How to sort the items within each stacking column?

问题:

How to sort the items within each stacking column? Asc or desc.

回答1:

Each series added to a chart is drawn on the chart in the order it was received. To change the order of the chart series you will need to change which series is the first in your list of series items.

That being said - what I think you want to do is to, independently of the series order, sort on each stack by value. I do not think this is possible in HighCharts.

回答2:

You can only set global index of serie, but you cannot position each single "stack".

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

回答3:

You may use the script below to sort the Stacked Chart Bars by category name.

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);
    });


};