javascript Highcharts 系列更新动画

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29549969/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 10:42:45  来源:igfitidea点击:

Highcharts series update with animation

javascriptanimationchartshighcharts

提问by Orkun Ozen

I can update the data value of a spider chart and see it animated using this method:

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

chart.series[i].setData(newSeries[i].data);

But, as the series in a spider chart consists not only of databut also other fields, as in

但是,由于蜘蛛图中的系列不仅包含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'
        }]

Along with the data, when I need to change the value name: 'Actual Spending', how can I update the series with animation?

随着数据,当我需要更改值时name: 'Actual Spending',如何使用动画更新系列?

Because, for example if I call:

因为,例如,如果我打电话:

chart.series[i].update({series: newSeries[i] , name : newName}); 

There won't be any animation.

不会有任何动画。

If it is still unclear... Well, sometimes a jsfiddleis worth a 100 words.

如果还不清楚……好吧,有时一个jsfiddle值 100 字。

回答by falsarella

Update the name, then set the datawith the desired animation:

更新name,然后data使用所需的动画设置 :

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

See working fiddle.

见工作小提琴。

回答by Mario Sannum

Since the correct answer did not work for me with multiple series, I had to do it more similar to this:

由于正确的答案在多个系列中对我不起作用,我不得不这样做:

First update the names since it's a quicker operation without animation.

首先更新名称,因为这是没有动画的更快操作。

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

回答by TiagoXavi

I found a better solution

我找到了更好的解决方案

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

The third argument is the key:

第三个参数是关键:

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

更新(选项 [,重绘] [,oneToOne] [,动画])