Flot reset zoom

Question

我正在使用Flot Charts和鼠标滚动来放大和缩小。我创建了一个按钮来调用zoomOut（），它运行良好，但我找不到任何解决方案，以便我可以一直缩小，以便它看起来就像第一次加载时一样。我不想重新加载哪个容器，因为它使用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 } 
    })); 

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

Answer 2

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

与其他解决方案不同，此解决方案不会构建全新的情节。

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

Answer 3

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

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