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

Question

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

Answer 1

Вот ответ Джошуа Варнер 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);

Answer 2

Я попробовал этот ответ от Озана, и я не мог получить блок для копирования зума на работу, поэтому я только что использовал сюжету. GTETOPTIONS () и использовал это, чтобы нарисовать график. Так:

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

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

Answer 3

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

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