Highcharts Y轴限制-Java 学习之路

我在控制高图图表的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并且一些点仍然可见但仍然可见 .

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

2 回答

0
我最终使用endOnTick参数来解决这个问题 . 将以下行添加到yAxis配置参数确实完全符合我的要求：
```
endOnTick: false,
```
这是更新的小提琴显示结果 .

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

在我看来，所有图表看起来都很不错（甚至是自动计算yAxis范围的图表） .
回复于 2024-04-26T06:20:55+08:00

您将需要读取数据，然后向上舍入以设置 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

回复于 2024-04-26T06:20:55+08:00

Highcharts Y轴限制

2 回答

相关问题