如何獲取Highcharts的yAxis以顯示類別而不是數字值？

-1

我有這個小提琴JSfiddle 如何獲取Highcharts的yAxis以顯示類別而不是數字值？

這裏是複製的代碼：

$(function() { 
$('#container').highcharts({ 
    chart: { 
     type: 'bar' 
    }, 
    xAxis: { 
     categories: ['Heroku', 'Ruby','Lisp','Javascript','Python','PHP'] 
    }, 
    yAxis: { 
     categories: ['low','medium','high'], 
     title: { 
      text: 'expertise', 
      align: 'high' 
     }, 
     labels: { 
      overflow: 'justify' 
     } 
    }, 
    tooltip: { 
     valueSuffix: ' millions' 
    }, 
    plotOptions: { 
     bar: { 
      dataLabels: { 
       enabled: true 
      } 
     } 
    }, 
    series: [{ 
     data: ['low','high','low','medium','medium'] 
    }] 
}); 
});

如果你看一下小提琴的Y軸不呈現，並且具有每X個類別的值。我一直在看highcharts api，但我似乎無法做到這一點。代碼對我來說很合理，但我顯然做錯了什麼。有人能指出爲什麼YAxis顯示不正確嗎？

來源

2016-10-06 Dan Rubio

你不提供任何實際數據值的圖表。您需要數值來繪製 - 在這種情況下，數字將是類別的數字索引。所以，如果'['low'，'high'，'low'，'medium'，'medium']'是打算繪製的y軸值，您需要發送的是'[0,2 ，0,1,1]' – jlbriggs

正如我在評論中提到，您需要提供該類別的數值，而不是類別名稱。

在類別的情況下，數值是數組索引。

另外，在你的情況下，你試圖繪製的值的方式，我會在開始時添加一個空的類別，否則你的第一類low得到繪製爲0，這似乎不正確。

所以，

categories: ['low','medium','high']

變爲

categories: ['','low','medium','high'],

而且

data: ['low','high','low','medium','medium']

變爲

data: [1,3,1,2,2]

更新小提琴：

http://jsfiddle.net/jlbriggs/k64boexd/3/

來源

2016-10-06 12:31:06 jlbriggs

謝謝@jlbriggs –

-1

檢查此琴： http://jsfiddle.net/navjot227/k64boexd/2/

關鍵是要利用格式化功能。如果需要，也可以在y軸標籤上使用類似的格式化函數。儘管看起來你需要爲數據標籤解決這個問題。

$(function() { 
    $('#container').highcharts({ 
    chart: { 
     type: 'bar' 
    }, 
    xAxis: { 
     categories: ['Heroku', 'Ruby', 'Lisp', 'Javascript', 'Python', 'PHP'] 
    }, 
    yAxis: { 

     title: { 
     text: 'expertise', 
     align: 'high' 
     }, 
     labels: { 
     overflow: 'justify', 

     } 
    }, 
    tooltip: { 
     valueSuffix: ' millions' 
    }, 
    plotOptions: { 
     bar: { 
     dataLabels: { 
      enabled: true, 
      formatter: function() { 
      if (this.y == 0) { 

       return 'low' 
      } else if (this.y == 1) { 
       return 'medium' 
      } else { 
       console.log(this.y); 
       return 'high' 
      } 
      } 

     } 
     } 
    }, 
    series: [{ 
     data: [0, 2, 0, 1, 1] 
    }] 
    }); 
});

來源

2016-10-06 06:45:50

-1

在我看來，線圖有一個y軸類別是不太可能的，因爲它說的更多的是數量或價值。在你的情況下，「低，中，高」表示範圍，可以爲其分配一定的值。

因此，Highcharts接受數字形式的系列數據。但可以解決它通過在yAxis的category屬性設定['low', 'medium', 'high']，然後設置系列data隨着數目對應於該類別的索引的陣列，即[0,1,1,2,...]和調整工具提示顯示類別，而不是使用formatter的y值的屬性。

下面是代碼：

$(function() { 
    yCategories = ['low', 'medium', 'high']; 
    $('#container').highcharts({ 
    title: { 
     text: 'Chart with category axes' 
    }, 

    xAxis: { 
     categories: ['Heroku', 'Ruby','Lisp','Javascript','Python','PHP'] 
    }, 

    yAxis: { 
     categories: yCategories 
    }, 

    tooltip: { 
     formatter: function() { 
     return this.point.category + ': ' + yCategories[this.y]; 
     } 
    }, 

    series: [{ 
     data: [0, 1, 2, 2, 1] 
    }] 
    }); 
});

這裏是一個工作示例：JSFiddle

來源

2016-10-06 06:46:37

如何獲取Highcharts的yAxis以顯示類別而不是數字值？

回答

相關問題