Flot重置缩放

Question

我正在使用带鼠标滚动的Flot Chart来放大和缩小。我创建了一个调用zoomOut()的按钮，它工作得很好，但我找不到任何解决方案来让它看起来像第一次加载时的样子。我不想重新加载who容器，因为它使用ajax在刷新时从mysql中提取数据。

我用谷歌搜索了一下，但什么也没找到。

Answer 1

您可以保存初始轴范围并重新绘制绘图，就像在example中进行导航一样。但您的代码将如下所示：

// do the zooming
plotObjectPointer = $.plot(placeholder, plotData,
    $.extend(true, {}, options, {
        xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
        yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
    }));

其中ranges将是您的初始范围。为了防止重复加载Ajax，您可以使用window.localStorage或其他var来存储plotData。

Answer 2

您还可以设置双击来重置Flot图表的缩放功能。它将Flot图表重新绘制为其原始状态，并可与动态数据一起使用。

$("#placeholder").dblclick(function () {
plot = $.plot(placeholder, dataset, options);
});

Answer 3

可以将轴的范围设置为null。通过设置此选项，将设置缩放级别，以便每个数据点都可见，就像默认缩放级别一样。

与其他解决方案不同的是，这个解决方案不会构建一个全新的图。

var axes = plot.getAxes(),
    xaxis = axes.xaxis.options,
    yaxis = axes.yaxis.options;
xaxis.min = null;
xaxis.max = null;
yaxis.min = null;
yaxis.max = null;

// Don't forget to redraw the plot
plot.setupGrid();
plot.draw();