Как анимировать диаграммы с помощью jQuery и jQplot (обновление данных)

Question

Я «оживляю» диаграммы с течением времени, меняя данные и перерисовывая их.

// 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 занимает много памяти, и диаграмма мигает.

Как это сделать правильно?

Решение, использующее для меня функцию перерисовки, рисует только старую диаграмму:

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

Answer 1

Это то, что я нашел после большого количества исследований.Я записываю это, чтобы помочь кому-нибудь прочитать этот вопрос.

Правильное место для обновления данных находится в свойстве серии, после обновления данных вы можете перерисовать график:

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

Если ваша ось изменилась, вы можете изменить их масштаб, используя replot() вместо redraw():

targetPlot.replot({resetAxes:true});

Это намного быстрее, чем каждый раз перерисовывать новый график.