如何在Highcharts的堆積柱形圖中為每個類別添加不同的系列數據？

Question

在此堆積柱形圖中，我想為x軸上的不同類別添加不同的系列。 例如，在蘋果類別中我要顯示aaa = 1，bbb = 2，ccc = 3，而在橙子類別中我要顯示eee = 5，fff = 4，ggg = 1等。有可能嗎

 Highcharts.chart('container', { chart: { type: 'column' }, title: { text: 'Stacked column chart' }, xAxis: { categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] }, yAxis: { min: 0, title: { text: 'Total fruit consumption' }, stackLabels: { enabled: true, style: { fontWeight: 'bold', color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' } } }, legend: { align: 'right', x: -30, verticalAlign: 'top', y: 25, floating: true, backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', borderColor: '#CCC', borderWidth: 1, shadow: false }, tooltip: { headerFormat: '<b>{point.x}</b><br/>', pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}' }, plotOptions: { column: { stacking: 'normal', dataLabels: { enabled: true, color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' } } }, series: [{ name: 'John', data: [5, 3, 4, 7, 2] }, { name: 'Jane', data: [2, 2, 3, 2, 1] }, { name: 'Joe', data: [3, 4, 4, 2, 5] }] }); 

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/export-data.js"></script> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

Answer 1

您需要設置x數據值，例如作為數組中的第一個元素：

series: [{
    name: 'John',
    data: [
        [0, 5],
        [1, 3]
    ]
}, {
    name: 'Jane',
    data: [
        [1, 2],
        [2, 2]
    ]
}, {
    name: 'Joe',
    data: [
        [0, 3],
        [2, 4]
    ]
}]

現場演示： http ： //jsfiddle.net/BlackLabel/nh1toe8g/

API參考： https ： //api.highcharts.com/highcharts/series.column.data