Highcharts 系列更新动画
Highcharts series update with animation
我可以更新蜘蛛图的数据值并使用此方法查看动画:
chart.series[i].setData(newSeries[i].data);
但是,由于蜘蛛图中的系列不仅包含 data
,还包含其他字段,如
series: [{
name: 'Allocated Budget',
data: [43000, 19000, 60000, 35000, 17000, 10000],
pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [50000, 39000, 42000, 31000, 26000, 14000],
pointPlacement: 'on'
}]
连同数据,当我需要更改值时 name: 'Actual Spending'
,我该如何更新动画系列?
因为,例如,如果我调用:
chart.series[i].update({series: newSeries[i] , name : newName});
不会有任何动画。
如果还不清楚...嗯,有时候一个jsfiddle抵得上100个字
更新 name
,然后使用所需的动画设置 data
:
chart.series[0].update({name:'new title'});
chart.series[0].setData(newData);
由于正确答案对我来说对多个系列不起作用,所以我不得不这样做:
首先更新名称,因为没有动画会更快。
// Pass false to skip redraw (since there are multiple operations, for better performance)
chart.series[0].update({name:'new title 0'}, false);
chart.series[1].update({name:'new title 1'}, false);
chart.series[2].update({name:'new title 2'}, false);
chart.series[3].update({name:'new title 3'}, false);
// Redraw the name changes before updating the data.
chart.redraw();
// Update the series data with animation, passing false to redraw here as well.
chart.series[0].setData(newData, false);
chart.series[1].setData(newData1, false);
chart.series[2].setData(newData2, false);
chart.series[3].setData(newData3, false);
// Now we redraw the series data
chart.redraw();
我找到了更好的解决方案
chart.update({ series: newSeries }, true, true, true);
第三个参数是关键:
update(options [, redraw] [, oneToOne] [, animation])
我可以更新蜘蛛图的数据值并使用此方法查看动画:
chart.series[i].setData(newSeries[i].data);
但是,由于蜘蛛图中的系列不仅包含 data
,还包含其他字段,如
series: [{
name: 'Allocated Budget',
data: [43000, 19000, 60000, 35000, 17000, 10000],
pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [50000, 39000, 42000, 31000, 26000, 14000],
pointPlacement: 'on'
}]
连同数据,当我需要更改值时 name: 'Actual Spending'
,我该如何更新动画系列?
因为,例如,如果我调用:
chart.series[i].update({series: newSeries[i] , name : newName});
不会有任何动画。
如果还不清楚...嗯,有时候一个jsfiddle抵得上100个字
更新 name
,然后使用所需的动画设置 data
:
chart.series[0].update({name:'new title'});
chart.series[0].setData(newData);
由于正确答案对我来说对多个系列不起作用,所以我不得不这样做:
首先更新名称,因为没有动画会更快。
// Pass false to skip redraw (since there are multiple operations, for better performance)
chart.series[0].update({name:'new title 0'}, false);
chart.series[1].update({name:'new title 1'}, false);
chart.series[2].update({name:'new title 2'}, false);
chart.series[3].update({name:'new title 3'}, false);
// Redraw the name changes before updating the data.
chart.redraw();
// Update the series data with animation, passing false to redraw here as well.
chart.series[0].setData(newData, false);
chart.series[1].setData(newData1, false);
chart.series[2].setData(newData2, false);
chart.series[3].setData(newData3, false);
// Now we redraw the series data
chart.redraw();
我找到了更好的解决方案
chart.update({ series: newSeries }, true, true, true);
第三个参数是关键:
update(options [, redraw] [, oneToOne] [, animation])