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

Question

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

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

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

// update Data
targetPlot.data = ...;
// remove old diagram
$('#<%= "diagram" + diagram.id.to_s %>container').empty();
// redraw
targetPlot = $.jqplot('#diagram', data, diagramOptions);

这是一个完整的重绘。有大量数据和较短的时间间隔 jQPlot 会占用大量内存并且图表会闪烁。

如何正确地做到这一点？

对我来说使用redraw-function的解决方案只画了旧图：

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

Answer 1

这是我经过大量调查后发现的方式。我写下来是为了帮​​助阅读这个问题的人。

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

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

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

targetPlot.replot({resetAxes:true});

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