Highcharts 如何设置堆叠条形图中系列的堆叠顺序?
我已经能够通过在序列对象中设置Highcharts 如何设置堆叠条形图中系列的堆叠顺序?,highcharts,Highcharts,我已经能够通过在序列对象中设置索引字段来控制highchart的堆叠顺序,如下所示: series: [ { name: 'My Products', data: randomRange(12, 7, 61), // Just random test data for now. stack: 'ProductType',
索引
字段来控制highchart的堆叠顺序,如下所示:
series: [
{
name: 'My Products',
data: randomRange(12, 7, 61), // Just random test data for now.
stack: 'ProductType',
index: 1 // Here index sets the stacking order in the bar. This will be on the bottom.
}, {
name: 'Total',
data: randomRange(12, 233, 240), // Just random test data for now.
stack: 'ProductType',
index: 0 // This will be on the top.
}
]
如您所见,较低的索引编号将在条中堆叠得较高
现在我正在尝试刷新序列,但堆叠顺序丢失,无法设置索引:
var chart1 = $('#quantityPerMonthChart1').highcharts();
chart1.series[1].setData(randomRange(12, 233, 240), false);
chart1.series[1].index = 0; // Doesn't work.
chart1.series[0].setData(randomRange(12, 7, 61), false);
chart1.series[0].index = 1; // Doesn't work.
chart1.redraw();
网上似乎没有关于如何做到这一点的文档或其他例子。因此,我进行了实验,发现索引是按照添加到序列数组的顺序自然设置的。因此,我可以将我的种子系列更改为:
series: [
{
name: 'Total', // The series you add first will get stacked on the top
data: randomRange(12, 233, 240),
stack: 'ProductType'
}, {
name: 'My Products',
data: randomRange(12, 7, 61),
stack: 'ProductType'
}
]
然后,当我使用不同的选项刷新图表数据时,我会执行以下操作:
$('#productType').on('change', function() {
var chart1 = $('#quantityPerMonthChart1').highcharts();
// These series already have an index (which affects stack order).
// Here it is unchanged.
chart1.series[0].setData(randomRange(12, 233, 240), false);
chart1.series[1].setData(randomRange(12, 7, 61), false);
chart1.redraw();
});
索引
是可以使用更新的序列的选项-它也可以用于更新序列的数据,因为数据是另一个选项
$(function() {
var chart = Highcharts.chart('container', {
chart: {
type: 'column'
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
data: [1, 2, 3, 4, 5, 4],
index: 1
}, {
data: [6, 4, 5, 6, 7, 4],
index: 2,
id: 's2'
}]
});
$('#button').click(function() {
chart.get('s2').update({index: 0});
});
});
示例:@Kacper您能告诉我如何在chartLoad上执行此操作吗?我尝试在chartLoad上更新系列索引,当图表呈现时,我得到一个最大的调用堆栈错误。是否可以在chartLoad上更新多个系列索引?如果要更改chart load上的索引,则意味着开始时图表配置应该不同,不需要更新。在图表中使用之前处理数据和在图表配置中设置索引以保持初始动画会更容易,但下面是您要求的演示:如果您想要反转堆栈索引,可以使用:
yAxis:{reversedStacks:true}