highcharts - 如何对每个堆叠列中的项目进行排序？

Question

如何对每个堆叠列中的项目进行排序？升序或降序。

Answer 1

添加到图表的每个系列都按照收到的顺序绘制在图表上。要更改图表系列的顺序，您需要更改系列项目列表中的第一个系列。

话虽如此 - 我认为您想要做的是，独立于系列顺序，按值对每个堆栈进行排序。我认为这在 HighCharts 中是不可能的。

Answer 2

您只能设置系列的全局索引，但不能定位每个“堆栈”。

http://api.highcharts.com/highcharts#series.index

Answer 3

您可以使用下面的脚本按类别名称对堆叠图表条进行排序。

var sortData = function(chartSource) {
    var series = chartSource.series;
    var axis = chartSource.xAxis[0];
    var categories = [];

    if($.isArray(series)) {
        var ser = 
          $.grep(series, function(ser, seriesIndex) 
          {
              return ser.visible;
          })[0];

        $.each(ser.data, 
            function(dataIndex, datum) 
          {
            console.log(datum.category + ':' + datum.stackTotal);
            var obj = {
                name: datum.category,
                index: dataIndex,
                stackTotal: datum.stackTotal
            }
            categories.push(obj);
            }
          );
    }

    categories.sort(function(a, b) {
        var aName = a.name.toLowerCase();
        var bName = b.name.toLowerCase();
        var aTotal = a.stackTotal;
        var bTotal = b.stackTotal;
        //if(aTotal === bTotal) {
            return ((aName < bName) ? -1 : ((aName > bName) ? 1 : 0));
        //} else {
        //    return ((aTotal > bTotal) ? -1 : ((aTotal < bTotal) ? 1 : 0));
        //}
    });

    var mappedIndex = $.map(categories, function(category, index) {
        return category.index;
    });

    categories = $.map(categories, function(category, index) {
        return category.name;
    });

    console.log(categories);
    console.log(mappedIndex);
    axis.setCategories(categories);

    var newDataArray = [];

    $.each(series, function(seriesIndex, ser) {
        newDataArray = [];
        var data = $.map(mappedIndex, function(mappedIndex2, origIndex) {
            var ydata = ser.data[mappedIndex2];
            if(ydata.y!=null){
                var y = ydata.y
                newDataArray.push(y);
                return y;
            }
            else
            { 
                newDataArray.push(null);
                return null;
            }

        });
        ser.setData(newDataArray);
    });


};