Question

我有一个简单的应用程序，它每分钟轮询数据库的数据。获取新数据时，我正在使用ajax更新图形。但是，每当我更新图形（使用添加到绘图数据的新值重新绘制它）时，当前的缩放状态就会丢失。在更新图表之前，我想保留最新的缩放位置。更新图表后，我想将图表缩放到其保存位置。这很重要，因为每分钟重新缩放都很烦人。这可能吗？

Answer 1

我从Ozan尝试了这个答案，我无法获得用于复制缩放的块，因此我只使用了plot.getOptions（）并用它来绘制图形。像这样：

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

通过这种方式，您可以动态更改视图，自动更新将在不更改视图的情况下进行更新。

Answer 2

以下是Joshua Varner 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 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);

如何使用AJAX在Update上保存（保留）flot图的缩放状态

3 个答案:

以下是Joshua Varner 1