正确的 jquery 浮点图缩放范围值答案

【问题标题】：Correct zoom range values for jquery flot graph正确的 jquery 浮点图缩放范围值
【发布时间】：2013-09-02 07:28:23
【问题描述】：

我使用 zoomRange 函数为图形提供了缩放范围，通过该函数我可以限制放大和缩小的范围。它需要两个值，例如 xaxis 和 yaxis 的zoomRange[min, max]。

我面临的问题是我应该给这个范围的正确值是多少。当我给出文档中给出的范围zoomRange[0.1, 10] 时，缩放根本不起作用，当我给出一些随机值时，图形在 y 轴上缩放得更多，然后在 x 轴上缩放，反之亦然。

我给图的值如下-

xaxis: { 
        mode: "time",
        zoomRange: [240000, 2550000]
        },
yaxis: { 
        zoomRange: [2, 22]
       }

这些值是任意值，因此对于不同数量的数据表现不佳。

我希望 zoomRange 可以完美地用于我绘制的任何类型的图形。

P.S.：我几个月前问过这个问题，仍然没有解决问题

【问题讨论】：

你有没有学到更多东西，我不喜欢缩放的工作方式，所以也许我只是范围错了？如果我缩小，然后尝试再次放大，我再也找不到这个系列了......我猜它们超出了图表范围。

标签： javascript jquery graph plot

【解决方案1】：

我发现一个好的缩放行为是将 panRange 设置为数据范围的最小值和最大值，+/- ~10%。然后将 zoomRange 设置为 data*some-small-integer 的最小增量，并将 zoomRange 值设置为 null （panRange 将限制您可以缩小的距离，因此 zoomRange 上限并不是真正必要的）。例如，如果您的股票价格数据范围为 35 美元到 85 美元，并且 x 数据的时间间隔为每小时，那么您可以：

xaxis: {
    mode: "time",
    // set the lowest (zoomed all the way in) range on the x axis to 2 hours
    zoomRange: [7200000, null],
    // set the pan limits slightly outside the data range
    panRange: [min_time*0.9, max_time*1.1]
},
yaxis: {
    // set the lowest range on the y-axis to 5 dollars
    zoomRange: [5, null],
    // set the pan limits slightly outside the data range
    panRange: [30, 90] 
}

因此，通过此示例，您将能够在 2 小时内一直放大到 5 美元的增量。当您一直缩小时，您将得到 panRange 参数中指定的范围。

将最小 zoomRange 设置得较低将允许您放大更多（但考虑到数据的粒度，没有多大意义）。并且将 panRange 限制设置得更宽将允许您缩小更多。

【讨论】：

【解决方案2】：

不知道你有没有想到。无论如何，我发现了这个：

"zoomRange" 是可以发生缩放的间隔，例如和 zoomRange: [1, 100] 缩放永远不会缩放轴，因此 min 和 max 之差小于 1 或大于 100。您可以将它们中的任何一个设置为 null 以忽略。

这里：http://code.google.com/p/flot/source/browse/trunk/jquery.flot.navigate.js?r=186

【讨论】：