Question

我在控制highcharts图的Y轴范围时遇到问题。似乎highcharts喜欢漂亮的圆形数字。当我的数据通过或接近某些阈值时，Y轴范围可以扩展很多，从而有效地向下压缩所有绘图点。

这是一个说明我遇到的问题的jsfiddle： https://jsfiddle.net/shannonwrege/z8h5eork

这篇文章的相关代码是：

chart.yAxis[0].setExtremes(0, max, true, false);

请记住，我事先不知道数据会是什么样子，因此我必须动态修改Y轴范围。现在我正在使用setExtremes因为other suggestions我已经阅读了stackoverflow。

前两个图表中数据的最大y值为99.您会注意到第一个图表中的y轴设置为150，其中自动计算范围，第二个图表中的y轴设置为100专门设定极值。第二张图表的外观就是我想要的。所以似乎setExtremes（0,99，true，false）应该做的伎俩，但实际上并没有。

在第3个图表中，我更改了数据，以便数据的最大y值为101，我调用了setExtremes（0,101，true，false）。你会注意到y轴现在又回到了150.

理想情况下，我希望将图表的比例限制在最大值上，以限制额外空白的大约。我想查看所有数据，但我不一定关心y轴显示的最大波段是否大于最大数据值。在这种情况下，我很高兴y轴在轴上显示100，有些点仍然可见。

有谁知道如何使这项工作？

Answer 1

我最终使用endOnTick参数来解决此问题。将以下行添加到yAxis配置参数中就完全符合我的要求：

endOnTick: false,

这里有更新的小提琴显示结果。

https://jsfiddle.net/shannonwrege/z8h5eork/3/

在我看来，所有图表看起来都很不错（甚至是自动计算yAxis范围的图表）。

Answer 2

您需要阅读数据然后向上舍入以设置idealMax

var chart,
    idealMax = 0; // init the max value

// Read the data to find the highest value
for (i=0;i < (options.series[0].data).length; i++ ){
    if (options.series[0].data[i][1] > idealMax) {
        idealMax = options.series[0].data[i][1];
    }
}

// Round the max to the nearest 10
idealMax = Math.round(idealMax / 10) * 10;

options.yAxis.tickPixelInterval = idealMax/10;

Highcharts.chart('container1', options);

chart = $('#container1').highcharts();
chart.yAxis[0].setExtremes(0, idealMax, true, false);

Updated Fiddle

Highcharts Y轴限制

2 个答案: