Highcharts系列更新动画

时间:2015-04-09 22:12:33

标签: javascript animation charts highcharts

我可以更新蜘蛛图表的数据值,并使用此方法查看它:

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字。

3 个答案:

答案 0 :(得分:8)

更新name,然后将data设置为所需的动画:

chart.series[0].update({name:'new title'});
chart.series[0].setData(newData);

See working fiddle.

答案 1 :(得分:6)

由于正确的答案对我来说不适用于多个系列,我必须更加类似于此:

首先更新名称,因为没有动画就可以更快地进行操作。

// 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();

答案 2 :(得分:1)

我找到了更好的解决方案

chart.update({ series: newSeries }, true, true, true);

第三个参数是关键:

update(options [,redraw] [,oneToOne] [,animation])