我已经为我正在开发的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
},