如何使用 AJAX 更新时保存（保留）图表的缩放状态

发布于 2024-09-01 21:29:56 字数 164 浏览 7 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

那伤。 2024-09-08 21:29:56

我尝试了 Ozan 的这个答案，但无法获得复制缩放的块来工作，所以我只使用了plot.getOptions()并用它来绘制图表。
像这样：

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

这样您就可以动态更改您的视图，并且自动更新将在不更改您的视图的情况下进行更新。

I tried this answer from Ozan and I couldn't get the block for copying the zoom to work so I just used plot.getOptions() and used that to draw the graph.
Like this:

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

This way you can dynamically change your view and the auto-update will update without changing your view.

回复收藏 0 原文

忆离笙 2024-09-08 21:29:56

的回答

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

Here is the answer by Joshua Varner 1

When you get your new data before you re plot get the current zoom and
add it to the options on update.

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

回复收藏 0 原文

猫性小仙女 2024-09-08 21:29:56

您应该获取有关当前轴状态的信息，将其与初始选项合并，然后将它们提供给新绘图。

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

You should get the information about the state of the current axes, merge it with your initial options and than provide them to the new plot.

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

回复收藏 0 原文

~没有更多了~