將新系列添加到 highcharts 堆積柱形圖的頂部

Question

我正在嘗試控制將新（首次渲染后）系列添加到 Highcharts 中堆積柱形圖的順序。 現在，如果您只是使用 addSeries，則新添加的系列將添加到堆棧底部。 這是我正在做的事情的簡化版本

var chart = new Highcharts.Chart({

    chart: {
        type: 'column',
        renderTo: 'container'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar']
    },

    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },

    series: [{
        name: 'base',
        data: [10, 20, 30]
    }, {
        name: 'sec',
        data: [30, 20, 10]
    }]
});

var i = 0;
$('#add').on('click', function (e) {
    chart.addSeries({
        data: [32, 43, 42],
        name: ++i,
        index: 0 //??????
    });
});

這是一個小提琴： http : //jsfiddle.net/6bCBf/

任何人都可以想出一種方法來反轉/控制 Highcharts 插入新系列的位置？

我試過將新系列的索引設置為 0，但這沒有任何作用。 將其設置為 -1 會將新系列添加到數組的底部，但是“堆疊”無法正常工作

Answer 1

您可以設置 index 和 zIndex 以保持層之間的順序，然后使用適當的參數添加 serie。

示例： http : //jsfiddle.net/6bCBf/5/

var chart = new Highcharts.Chart({

    chart: {
        type: 'column',
        renderTo: 'container'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar']
    },

    plotOptions: {
        series: {
            stacking: 'normal'
         }
     },    

    series: [
        {
            name: 'base',
            data: [10, 20, 30],
            index:2,
            zIndex:10
        },
        {
            name: 'sec',
            data: [30, 20, 10],
            index:1,
            zIndex:9
        }
    ]
},function(chart){



    $('#add').on('click', function (e) {

        chart.addSeries({
            data: [32, 43, 42],
            index: 0,
            zIndex:1
        });
    });


});

Answer 2

Highcharts 還支持yAxis.reversedStacks屬性，如果設置為false ，將反轉堆疊數據點的順序。 在 OP 的 JSFiddle 中，第一個系列“base”出現在圖表的頂部，而第二個系列“sec”出現在圖表的下方。 在此更新的 JSFiddle 中設置reversedStacks: false會反轉該順序，並且新系列出現在堆棧頂部而不是底部。