https://jsfiddle.net/vasjav1/ywspnocd
Quiero ordenar el gráfico de barras de pila de mínimo a máximo, es decir, la barra más pequeña debe ocurrir primero y la más grande debe ocurrir al final. No encontré ninguna solución presente en ningún otro lugar relacionado con el gráfico de barras de pila. hay una solución presente aquí https://www.highcharts.com/docs/advanced-chart-features/data-sorting , pero en su mayoría se ajusta al gráfico de barras, pero no pude encajarlo con la barra de pila. ¿Alguien puede ayudarme a ordenar stackbarchart?
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] }] });Primero tendría que ordenar los datos y luego enviarlos a Highcharts. Por ejemplo, si sus datos de entrada se pueden representar así:
{ "Apples": { "John": 5, "Jane": 2, "Joe": 3 }, "Oranges": { "John": 3, "Jane": 2, "Joe": 4 }, "Pears": { "John": 4, "Jane": 3, "Joe": 4 }, "Grapes": { "John": 7, "Jane": 2, "Joe": 2 }, "Bananas": { "John": 2, "Jane": 1, "Joe": 5 }, };... luego podría ordenar eso y luego traducirlo al argumento que desea pasar a highcharts:
// The original input data in one object (or array): let data = { "Apples": { "John": 5, "Jane": 2, "Joe": 3 }, "Oranges": { "John": 3, "Jane": 2, "Joe": 4 }, "Pears": { "John": 4, "Jane": 3, "Joe": 4 }, "Grapes": { "John": 7, "Jane": 2, "Joe": 2 }, "Bananas": { "John": 2, "Jane": 1, "Joe": 5 }, }; // Sort the data by sum of values: let sorted = Object.entries(data).map(([cat, obj]) => [cat, obj, Object.values(obj).reduce((a, b) => a + b)] ).sort((a, b) => a[2] - b[2]); // Now generate the argument for the chart: Highcharts.chart('container', { chart: { type: 'column' }, title: { text: 'Stacked column chart' }, xAxis: { categories: sorted.map(([cat]) => cat) }, 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: Object.keys(sorted[0][1]).map(name => ({ name, data: sorted.map(([_, {[name]: val}]) => val) })) }); <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>Actualmente, la función de clasificación de datos solo funciona con series individuales.
Puede usar la clasificación dependiente como se describe aquí (ejemplo: https://jsfiddle.net/BlackLabel/3f8x7j5w/ )
series: [{ id: 'mainSeries', dataSorting: { enabled: true }, data: [...] }, { linkedTo: 'mainSeries', data: [...] }, { linkedTo: 'mainSeries', data: [...] }, { linkedTo: 'mainSeries', data: [...] }]u ordene cada serie individualmente (ejemplo: https://jsfiddle.net/BlackLabel/dsm0bz3k/ ), pero la mejor manera será usar la solución de la respuesta de trincot.