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

问题描述

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

I am "animating" diagrams over time by changing the data and redrawing them.

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

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

Now after some time I will change the data in some way and want to update the diagram. The following solution works:

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

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

Bit this is a complete redraw. With lots of data and a short intervall jQPlot takes much memory and the diagram is flickering.

如何正确地做到这一点?

How to do this correct?

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

The solution using the redraw-function for me only draws the old diagram:

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

推荐答案

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

This is the way I found after lots of investigation. I am writing this down to help someone reading this question.

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

The correct place to update the data is in the series property, after updating the data you can redraw the plot:

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

如果你的轴改变了，那么你可以使用 replot() 而不是 redraw() 来重新缩放它们:

If your axis changed, then you can rescale them by using replot() instead of redraw():

targetPlot.replot({resetAxes:true});

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

This is much faster than redrawing a new plot every time.

这篇关于如何使用 jQuery 和 jQplot 为图表制作动画(更新数据)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！