Javascript 将新系列添加到highcharts堆叠柱形图的顶部
我试图控制新(第一次渲染后)系列添加到Highcharts中堆叠柱形图的顺序。现在,如果只使用addSeries,则新添加的系列将添加到堆栈的底部。这是我正在做的一个简化版本Javascript 将新系列添加到highcharts堆叠柱形图的顶部,javascript,charts,highcharts,stacked,Javascript,Charts,Highcharts,Stacked,我试图控制新(第一次渲染后)系列添加到Highcharts中堆叠柱形图的顺序。现在,如果只使用addSeries,则新添加的系列将添加到堆栈的底部。这是我正在做的一个简化版本 var chart = new Highcharts.Chart({ chart: { type: 'column', renderTo: 'container' }, xAxis: { categories: ['Jan', 'Feb', 'Ma
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 //??????
});
});
这里有一把小提琴:
任何人都能想到一种方法来反转/控制Highcharts插入新系列的位置
我已经尝试将新系列的索引设置为0,但没有任何效果。将其设置为-1会将新系列添加到阵列的底部,但“堆叠”无法正常工作您可以设置索引和zIndex以保持层之间的顺序,然后使用适当的参数添加序列 例如:
您可以设置index和zIndex以保持层之间的顺序,然后使用适当的参数添加serie 例如:
Highcharts还支持一个属性,如果设置为
false
,该属性将反转堆叠数据点的顺序。在OP的JSFIDLE中,第一个系列“base”出现在图表顶部,而第二个系列“sec”出现在图表下方。设置reversedStacks:false
(如中)会反转该顺序,并且新系列显示在堆栈顶部而不是底部。Highcharts还支持一个属性,如果设置为false
,该属性将反转堆叠数据点的顺序。在OP的JSFIDLE中,第一个系列“base”出现在图表顶部,而第二个系列“sec”出现在图表下方。设置reversedStacks:false
与中的设置相同,可以反转顺序,新系列显示在堆栈的顶部而不是底部。效果非常好!谢谢奇怪的是,你必须调整这两件事,以简单地颠倒顺序…工程伟大!谢谢奇怪的是,你必须调整这两件事来简单地颠倒顺序。。。
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
});
});
});