将新系列添加到 highcharts 堆积柱形图的顶部答案

【问题标题】：Add new series to the top of a highcharts stacked column chart将新系列添加到 highcharts 堆积柱形图的顶部
【发布时间】：2013-05-09 18:43:14
【问题描述】：

我正在尝试控制将新（首次渲染后）系列添加到 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 会将新系列添加到数组的底部，但是“堆叠”无法正常工作

【问题讨论】：

标签： javascript charts highcharts stacked

【解决方案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
        });
    });


});

【讨论】：

效果很好！谢谢！，奇怪的是你必须调整这两个东西来简单地颠倒订单......

【解决方案2】：

Highcharts 还支持yAxis.reversedStacks 属性，如果设置为false，将反转堆叠数据点的顺序。在 OP 的 JSFiddle 中，第一个系列“base”出现在图表的顶部，而第二个系列“sec”出现在它的下方。将reversedStacks: false 设置为this updated JSFiddle 会颠倒该顺序，新系列出现在堆栈的顶部而不是底部。

【讨论】：