Как сохранить (сохранить) состояние масштабирования графиков флота при обновлении с помощью AJAX

У меня есть простое приложение, которое каждую минуту опрашивает базу данных для получения данных. Когда новые данные извлекаются, я обновляю график с помощью ajax. Однако всякий раз, когда я обновляю график (перерисовываю его с новыми значениями, добавленными к данным графика), текущее состояние масштабирования теряется. Перед обновлением графика я хочу сохранить последнюю позицию масштабирования. После обновления графика я хочу увеличить его до сохраненной позиции. Это важно, потому что изменение масштаба каждую минуту раздражает. Это возможно?


javascript ajax zooming flot
person Ozan Kaya    schedule 11.05.2010    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Я попробовал этот ответ от Озана, и я не смог заставить работать блок для копирования масштабирования, поэтому я просто использовал plot.getOptions() и использовал его для рисования графика. Как это:

var oldOptions = plot.getOptions();
plot = $.plot($("#graph"), data, oldOptions);

Таким образом, вы можете динамически изменять свой вид, и автоматическое обновление будет обновляться без изменения вашего вида.

person Asitaka    schedule 18.03.2012
comment
Это сработало лучше и для меня. Это также обрабатывает панорамирование, а также масштабирование... - person gabaum10; 17.11.2012

arrow_upward
2
arrow_downward

Вот ответ Джошуа Варнера 1

Когда вы получите новые данные перед повторным построением графика, получите текущий масштаб и добавьте его к параметрам обновления.

// Get the current zoom
var zoom = plot.getAxes();

// Add the zoom to standard options
var zoomed = {};
$.extend(zoomed,options);
zoomed.xaxis.min = zoom.xaxis.min;
zoomed.xaxis.max = zoom.xaxis.max;
zoomed.yaxis.min = zoom.yaxis.min;
zoomed.yaxis.max = zoom.yaxis.max;

// draw/save the plot
plot = $.plot($("#graph"), d, zoomed);
person Ozan Kaya    schedule 07.02.2011

arrow_upward
0
arrow_downward

Вы должны получить информацию о состоянии текущих осей, объединить ее с вашими начальными параметрами и предоставить их новому графику.

// Deep copy of the options object so that we can keep it unchanged
// for when we don't want to preserve the zoom.
var copyOptions = $.extend(true, {}, options);

if (plot != null && preserveZoom) {
    // There might be more than one Y axis
    var zoomY = plot.getYAxes();

    for (var i = 0; i < zoomY.length; i++) {
        copyOptions.yaxes[i].min = zoomY[i].min;
        copyOptions.yaxes[i].max = zoomY[i].max;
    }

    // Considering only one X axis, in case of more than one
    // you should use the same method as for the Y axis.
    copyOptions.xaxis.min = plot.getXAxes()[0].min;
    copyOptions.xaxis.max = plot.getXAxes()[0].max;
}

plot = $.plot("#placeholder", data, copyOptions);
person ohvitorino    schedule 24.01.2014