javascript – 如何使用jQuery和jQplot动画图表(更新数据)

前端之家收集整理的这篇文章主要介绍了javascript – 如何使用jQuery和jQplot动画图表(更新数据)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
随着时间的推移,我通过更改数据并重新绘制它们来“动画化”图表.
// 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',diagramOptions);

这是一个完整的重绘.由于大量数据和短暂的间隔,jQPlot占用大量内存,图表闪烁.

怎么做对吗?

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

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

解决方法

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

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

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

如果您的轴已更改,则可以使用replot()而不是redraw()重新缩放它们:

targetPlot.replot({resetAxes:true});

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

原文链接:https://www.f2er.com/jquery/155599.html

猜你在找的jQuery相关文章