javascript - jquery flot 图的正确缩放范围值

Question

我使用zoomRange函数给图表指定了缩放范围，通过它我可以限制放大和缩小的范围。它需要两个值，例如 zoomRange[min, max]对于 x 轴和 y 轴。

我面临的问题是我应该给这个范围赋予什么正确的值。当我给出文档中给出的范围时，即 zoomRange[0.1, 10]然后缩放根本不起作用，当我给出一些随机值时，图表在 y 轴上的缩放程度大于 x 轴，反之亦然。

我给图表赋予的值如下 -

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

这些值是任意值，因此对于不同的数据量来说效果不佳。

我想要 ZoomRange 对于我绘制的任何类型的图形都可以完美执行的值。

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

Answer 1

我发现良好的缩放行为是将 panRange 设置为数据范围的最小值和最大值，+/- ~10%。然后将zoomRange设置为数据的最小增量*一些小整数，并将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 参数中指定的范围。

将最小缩放范围设置得较低将允许您放大更多(但考虑到数据的粒度，没有多大意义)。将 panRange 限制设置得更宽将允许您缩小更多。