javascript - 如何避免缩放到数据范围之外的区域的不良行为

Question

我已将缩小功能添加到我正在开发的 highcharts 应用程序中，但我注意到放大时会出现一些非常糟糕的行为。如果缩放窗口包含图形数据范围之外的区域，则生成的结果缩放级别错误地忽略了该区域。抱歉，如果这有点不清楚，我不确定如何最好地解释它。

这是一个展示问题的 fiddle :http://jsfiddle.net/rnAEB/

$(function () {
    chart = new Highcharts.Chart({

        chart: {
            renderTo: "container",
            zoomType: "xy"
        },

        title: {
            text: 'Try zooming outside the data range'
        },

        tooltip: {
            headerFormat: '<b>{series.name}</b><br />',
            pointFormat: 'x = {point.x}, y = {point.y}'
        },

        series: [{            
            data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
            pointStart: 1
        }]
    });

    chart.xAxis[0].setExtremes(-10, 20, true);
    chart.yAxis[0].setExtremes(-500, 1000, true);
});

尝试将矩形从 (5, 1000) 放大到 (10, -500)。生成的缩放区域约为 (5, 600) 到 (10, -100)...这显然不是缩放请求所要求的。

我尝试 Hook 轴的 setExtremes 事件，并且发生此问题时的边界未定义。然而，我不知道如何“劫持”setExtremes 请求来修复未定义的值。我也无法从该事件中递归调用 setExtremes。

这是预期的行为吗？我可以理解为什么您只想缩放有数据的位置 - 但我真的希望能够自由地缩放到没有数据的位置，以方便查看。

Answer 1

这似乎是预期的行为。通过浏览 highcharts 源代码，我找到了 Highcharts.Axis.prototype.zoom 方法，该方法具有以下条件:

    // Prevent pinch zooming out of range
    if (!this.allowZoomOutside) {
        if (newMin <= this.dataMin) {
            newMin = UNDEFINED;
        }
        if (newMax >= this.dataMax) {
            newMax = UNDEFINED;
        }
    }

我尝试使用配置选项设置“allowZoomOutside”选项，但不幸的是，没有我可以弄清楚(或在源代码中找到)的未记录的 Hook 。

根据源代码中的评论，缩放方法旨在可重写(他们特别提到了股票图表)，我宁愿避免尝试从外部手动设置“allowZoomOutside”并希望它不会被删除通过某种内部机制。用缺少此检查的版本覆盖就像一个魅力。这是一个更新的 fiddle 作为示例:http://jsfiddle.net/7XHMz/

如果有人能够弄清楚如何正确设置“allowZoomOutside”选项，尽管这可能是最好的方法。