问题
I tried to sort values in stacked bar base on this question Sort the series data for every X-Axis in Highcharts
But after sorting, the data in series seem wrong.
The code for sorting
seriesData.forEach(function (name) {
if (name.data != undefined) {
name.data.sort(function (a, b) {
if (a < b) {
return -1;
} else if (a > b) {
return 1;
}
return 0;
});
}
});
Here is full my source code
JSfiddle https://jsfiddle.net/viethien/hdy2frkv/9/
var seriesData = [{
"name": "(Component)",
"data": [2039521123, 0, 0, 4046613348, 0, 544280301, 3865715691, 0],
"display": 2,
"stack": "Forecast",
"showInLegend": false,
"pointPadding": 0,
"pointPlacement": 0
}, {
"name": "(Substrate)",
"data": [1848232605, 1109333700, 0, 0, 1478070275, 0, 0, 0],
"display": 2,
"stack": "Forecast",
"showInLegend": false,
"pointPadding": 0,
"pointPlacement": 0
}, {
"name": "(Module)",
"data": [0, 532822345, 452625462, 0, 0, 207607714, 0, 103089669],
"display": 2,
"stack": "Forecast",
"showInLegend": false,
"pointPadding": 0,
"pointPlacement": 0
}, {
"name": "(Support)",
"data": [0, 0, 0, 0, 0, 537829903, 0, 0],
"display": 1,
"stack": "Forecast",
"showInLegend": false,
"pointPadding": 0,
"pointPlacement": 0
}, {
"name": "(Component)",
"data": [11118985500, 0, 4732915644, 14216361483, 0, 3423432732, 3216931478, 0],
"display": 1,
"stack": "Real",
"showInLegend": false
}, {
"name": "(Substrate)",
"data": [8495153800, 3191092821, 0, 0, 13153490000, 0, 0, 0],
"display": 3,
"stack": "Real",
"showInLegend": false
}, {
"name": "(Module)",
"data": [0, 13925175787, 9837488553, 0, 0, 3705001758, 0, 338212038],
"display": 1,
"stack": "Real",
"showInLegend": false
}, {
"name": "(Support)",
"data": [0, 0, 0, 0, 0, 4845038686, 0, 0],
"display": 1,
"stack": "Real",
"showInLegend": false
}, {
"name": "Forecast",
"color": "#fe7c7c",
"events": {}
}, {
"name": "Real",
"color": "#43d487",
"events": {}
}];
var option = {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
textOutline: false,
color: ( // theme
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || 'gray'
}
}
},
legend: {
align: 'center',
x: 0,
verticalAlign: 'bottom',
y: 5,
backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || 'white',
borderColor: '#CCC',
borderWidth: 0,
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
},
pointPadding: 0.05,
maxpointWidth: 35,
//groupPadding:0.1,
borderWidth: 0
},
series: {
maxpointWidth: 35,
groupPadding: 0.36,
//stacking: 'normal',
dataLabels: {
formatter: function() {
if (this.y === this.point.stackTotal || this.y == 0) {
return ''
}
return this.series.name;
},
enabled: true,
//allowOverlap: true,
//align: 'right',
color: '#444',
textOutline: false,
shadow: false,
//x:-50,
style: {
fontSize: "8px",
textShadow: "0px"
}
},
//pointPadding: 0.1,
pointWidth: 50,
groupPadding: 0.2,
stacking: 'normal',
//colorByPoint: true,
//showInLegend: false
}
},
series: []
}
seriesData.forEach(function (name) {
if (name.data != undefined) {
name.data.sort(function (a, b) {
if (a < b) {
return -1;
} else if (a > b) {
return 1;
}
return 0;
});
}
});
option.series = seriesData;
var chart = Highcharts.chart('container', option);
<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>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
Updated:
When i tried Sebastian sample but chart display incorrect
来源:https://stackoverflow.com/questions/61865464/sort-values-in-stacked-bar-highcharts-not-work