javascript - jQuery Flot图形的正确缩放范围值

我已经使用zoomRange函数为图形指定了缩放范围，通过它我可以限制放大和缩小的范围。它采用两个值，例如xaxis和yaxis的zoomRange[min, max]。

我面临的问题是应为该范围提供正确的值。当我按照文档中的zoomRange[0.1, 10]给出范围时，缩放根本不起作用，而当我给出一些随机值时，则图在yaxis上放大更多，然后在xaxis上放大，反之亦然。

我给该图的值如下：

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

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

我想要通过zoomRange可以对我绘制的任何类型的图形执行完美的值。

附注：我几个月前曾问过这个问题，但仍然没有解决问题

最佳答案

我发现良好的缩放行为是将panRange设置为数据范围的最小值和最大值，+ /-〜10％。然后将zoomRange设置为数据的最小增量* some-small-integer，并将null设置为zoomRange的上限值（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限制设置得更宽可以使您缩小更多。