我通过更改数据并重新绘制它们来“动画”图表。
// 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();
答案 0 :(得分:15)
这是我经过大量调查后发现的方式。我写这篇文章是为了帮助有人阅读这个问题。
更新数据的正确位置在series属性中,更新数据后可以重绘图:
targetPlot.series[0].data = myData;
targetPlot.redraw();
如果你的轴发生了变化,那么你可以使用replot()
代替redraw()
重新缩放它们:
targetPlot.replot({resetAxes:true});
这比每次重新绘制新绘图要快得多。