問題描述

隨著時間的推移，我通過更改數(shù)據(jù)并重新繪制它們來動畫化"圖表.

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

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

現(xiàn)在一段時間后，我將以某種方式更改數(shù)據(jù)并希望更新圖表.以下解決方案有效:

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);

這是一個完整的重繪.有大量數(shù)據(jù)和較短的時間間隔 jQPlot 會占用大量內(nèi)存并且圖表會閃爍.

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();

推薦答案

這是我經(jīng)過大量調(diào)查后發(fā)現(xiàn)的方式.我寫下來是為了幫??助閱讀這個問題的人.

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

更新數(shù)據(jù)的正確位置在series屬性中，更新數(shù)據(jù)后可以重繪繪圖:

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.

這篇關(guān)于如何使用 jQuery 和 jQplot 為圖表制作動畫(更新數(shù)據(jù))的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！