如何使用jQuery和jQplot动画图表（更新数据） [英] How to animate diagrams with jQuery and jQplot (updating data)

问题描述

我通过更改数据并重新绘制它来动画图表。

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.

如何做到这一点？

使用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动画图表（更新数据）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！