javascript 设置数据后的 Highcharts 加载动画
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/15987283/
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
Highcharts loading animation after setdata
提问by user1766412
I am using Highcharts graphs and I am using .setData to update the data in the graph.
我正在使用 Highcharts 图,我正在使用 .setData 来更新图中的数据。
This is all working fine but I would like to use the loading animation (where the line chart draws itself from left to right) to be triggered every time I reset the data. Is there a way to call this animation?
这一切正常,但我想在每次重置数据时触发加载动画(折线图从左到右绘制)。有没有办法调用这个动画?
回答by Pawe? Fus
You can remove actual series, and add new one. Initial animation is different from all others (clip path is animated, not series itself).
您可以删除实际系列,然后添加新系列。初始动画与所有其他动画不同(剪辑路径是动画的,而不是系列本身)。
See example: http://jsfiddle.net/UTC6e/2/
参见示例:http: //jsfiddle.net/UTC6e/2/
chart.series[0].remove();
chart.addSeries({data:[229.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4]} );
回答by NickGreen
In the api referenceI see the method setVisible(): "A utility function to show or hide the series with an optional redraw.". I think that's what you're looking for?
在api 参考中,我看到了 setVisible() 方法:“使用可选的重绘显示或隐藏系列的实用函数。”。我想这就是你要找的?
UPDATE: added JS Fiddle, see: http://jsfiddle.net/UTC6e/1/
更新:添加了 JS Fiddle,参见:http: //jsfiddle.net/UTC6e/1/
So you could first setVisible to false, then set the new data, and at the end setVisible to true and tell the chart to redraw (second boolean argument).
因此,您可以先 setVisible 为 false,然后设置新数据,最后将 setVisible 设置为 true 并告诉图表重绘(第二个布尔参数)。
chart.series[0].setVisible(false);
chart.series[0].setData([229.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4] );
chart.series[0].setVisible(true, true);
回答by Shawson
You could just manually call the redraw method:
您可以手动调用重绘方法:
chart.redraw();