如何使用jQuery和jQplot为图表添加动画（更新数据）

随着时间的推移，我通过更改数据并重新绘制它们来“动画化”图表。

// initialization var data = ... var targetPlot = $.jqplot('#diagram', data, diagramOptions); 

一段时间后，我将以某种方式更改数据，并希望更新图表。 以下解决方案有效：

 // update Data targetPlot.data = ...; // remove old diagram $('#container').empty(); // redraw targetPlot = $.jqplot('#diagram', data, diagramOptions); 

这是一个完整的重绘。 由于存在大量数据和短暂的间隔，因此jQPlot占用大量内存并且图表闪烁。

怎么做对吗？

使用redraw-function的解决方案只绘制旧图：

 // update Data targetPlot.data = ...; targetPlot.redraw(); 

Answer 1

这是我经过大量调查后发现的方式。 我写这篇文章是为了帮助有人阅读这个问题。

更新数据的正确位置在系列属性中，更新数据后，您可以重绘绘图：

 targetPlot.series[0].data = myData; targetPlot.redraw(); 

如果您的轴发生了变化，那么您可以使用replot()而不是redraw()来重新缩放它们：

 targetPlot.replot({resetAxes:true}); 

这比每次重新绘制新绘图要快得多。