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



我已经为我正在开发的highcharts应用程序添加了缩小功能,但是我注意到在缩小时出现了一些非常糟糕的行为。如果缩放窗口包含图形数据范围之外的区域,则产生的缩放级别会错误地忽略该区域。对不起,如果这有点不清楚,我不知道如何解释最好。

这里有一个演示问题的小提琴: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)…这显然不是缩放请求所要求的。

我已经尝试钩到轴的setextrees事件,当这个问题发生的边界是未定义的。我不知道如何"劫持"setextrees请求来修复未定义的值。我也不能在该事件中递归地调用setextrees。

这是预期的行为吗?我可以理解为什么您只想缩放数据所在的位置,但我真的希望能够自由地缩放到没有数据的位置,以便透视。

看来这是预期的行为。在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'选项,但不幸的是,没有未记录的钩子,我可以找出(或在源代码中找到)。

根据源代码中的评论,缩放方法是可重写的(他们特别提到了股票图表),我宁愿避免尝试从外部手动设置'allowZoomOutside',并希望它不会被某些内部机制擦除。使用缺少此检查的版本重写效果很好。下面是一个更新的小提琴作为例子:http://jsfiddle.net/7XHMz/

如果有人能弄清楚如何正确设置'allowZoomOutside'选项虽然这可能是最好的方式来做到这一点

这与"started chart"以自己的形式生成(两个axss中的min/max值)有关,然后调用setExtrems,这只是一个事件,调用一次。所以图表不能"记住"新的极端。因此,您可以使用setextrees和关于事件的数字来定义最小/最大值。

http://jsfiddle.net/rnAEB/1/

 xAxis:{
            min:-10,
            max:20
        },
        yAxis:{
            min:-500,
            max:1000
        },

最新更新