highcharts - 如何按总计排序xAxis类别？

Question

有没有办法按总额订购这个高潮图？

https://jsfiddle.net/bsvLnnxv/3/

在这种情况下预期的最终结果应该是：

名称1 - ＆gt; 19

姓名4 - ＆gt; 12

姓名3 - ＆gt; 10

名称2 - ＆gt; 8

找到以下代码：

＆＃13;

＆＃13;

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Highchart test'
            },
            stackLabels: {
              enabled: true,
              style: {
              	fontWeight: 'bold'
            	}
           }
        },
        legend: {
            enabled: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'AAA',
            data: [{
                name: 'Name 1',
                y: 5,
                drilldown: 'Name1AAA'
            }, {
                name: 'Name 2',
                y: 2
            }, {
                name: 'Name 3',
                y: 2
            }]
        }, {
            name: 'BBB',
            data: [{
                name: 'Name 1',
                y: 10,
                drilldown: 'Name1BBB'
            }, {
                name: 'Name 2',
                y: 5
            }]
        }, {
            name: 'CCC',
            data: [{
                name: 'Name 4',
                y: 12
            }, {
                name: 'Name 3',
                y: 8
            }, {
                name: 'Name 1',
                y: 4,
                drilldown: 'Name1CCC'
            }, {
                name: 'Name 2',
                y: 1
            }]
        }],
        
        drilldown: {
            series: [{
                name: 'Name 1 - AAA',
                id: 'Name1AAA',
                data: [
                    ['Name 1/1', 2],
                    ['Name 1/2', 2],
                    ['Name 1/3', 1],
                ]
            }, {
                name: 'Name 1 - BBB',
                id: 'Name1BBB',
                data: [
                    ['Name 1/1', 7],
                    ['Name 1/2', 2],
                    ['Name 1/3', 1],
                ]
            }, {
                name: 'Name 1 - CCC',
                id: 'Name1CCC',
                data: [
                    ['Name 1/1', 2],
                    ['Name 1/2', 3],
                    ['Name 1/3', 4],
                ]
            }]
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>


<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我找到了解决方案！

Highcharts没有自动排序数据的属性，因此您必须填写之前已排序的所有系列数据。

另一个注意点：如果您没有值，则需要将值设置为0，以确保所有类别具有相同数量的元素。

https://jsfiddle.net/bsvLnnxv/4/

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Highchart test'
            },
            stackLabels: {
              enabled: true,
              style: {
              	fontWeight: 'bold'
            	}
           }
        },
        legend: {
            enabled: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'AAA',
            data: [{
                name: 'Name 1',
                y: 5,
                drilldown: 'Name1AAA'
            }, {
                name: 'Name 4',
                y: 0
            }, {
                name: 'Name 3',
                y: 2
            }, {
                name: 'Name 2',
                y: 2
            }]
        }, {
            name: 'BBB',
            data: [{
                name: 'Name 1',
                y: 10,
                drilldown: 'Name1BBB'
            }, {
                name: 'Name 4',
                y: 0
            }, {
                name: 'Name 3',
                y: 0
            }, {
                name: 'Name 2',
                y: 5
            }]
        }, {
            name: 'CCC',
            data: [{
                name: 'Name 1',
                y: 4,
                drilldown: 'Name1CCC'
            }, {
                name: 'Name 4',
                y: 12
            }, {
                name: 'Name 3',
                y: 8
            }, {
                name: 'Name 2',
                y: 1
            }]
        }],
        
        drilldown: {
            series: [{
                name: 'Name 1 - AAA',
                id: 'Name1AAA',
                data: [
                    ['Name 1/1', 2],
                    ['Name 1/2', 2],
                    ['Name 1/3', 1],
                ]
            }, {
                name: 'Name 1 - BBB',
                id: 'Name1BBB',
                data: [
                    ['Name 1/1', 7],
                    ['Name 1/2', 2],
                    ['Name 1/3', 1],
                ]
            }, {
                name: 'Name 1 - CCC',
                id: 'Name1CCC',
                data: [
                    ['Name 1/1', 2],
                    ['Name 1/2', 3],
                    ['Name 1/3', 4],
                ]
            }]
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>