将新级数添加到highcharts堆叠柱状图的顶部

Add new series to the top of a highcharts stacked column chart

本文关键字：顶部 新级数 添加 highcharts      更新时间：2023-09-26

我试图控制新(首次渲染后)系列添加到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将新序列添加到数组的底部，但随后'堆叠'无法正常工作

您可以设置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
        });
    });

});

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

相关文章：