为什么高图表为某个条形图添加填充?

Question

我遇到了一个非常奇怪的高图表行为。

我在两个容器中渲染相同的图表，高度只有一个 px 差异：

<div id="container" style="min-width: 310px; height:118px; margin: 0 auto"></div>
<div id="container2" style="min-width: 310px; height:117px; margin: 0 auto"></div>

第一个图形将 y 轴呈现为 100，并添加不必要的额外空间。第二个图形对齐轴以仅使用所需的空间。

这是一个小提琴的链接：

https://jsfiddle.net/647cg3mp/

知道这个额外的填充突然从哪里来吗？

Answer 1

该行为与tickInterval和tickPixelInterval属性相关。例如，您可以通过增加tickPixelInterval或将tickAmount设置为2来更改它。

刻度间隔：数字

以轴为单位的刻度线间隔。如果未定义，则计算报价间隔为大致遵循 线性轴和日期时间轴上的刻度像素间隔。

yAxis: {
tickPixelInterval: 73,
...
}

---

现场演示：https://jsfiddle.net/BlackLabel/do46qhgx/

接口参考：

https://api.highcharts.com/highcharts/yAxis.tickPixelInterval

https://api.highcharts.com/highcharts/yAxis.tickInterval

Answer 2

我跑了你的小提琴。起初我不知道你说的填充是什么意思，但会推断你指的是 y 轴的范围：两个div 是不同的。您可以在参数中显式设置 y 轴范围的最大值，

"yAxis": {
"min": 0,
"max": 100,

这将解决您的问题，从某种意义上说，两个图表将使用相同的范围。作为有效的解决方案，您可以查询数据以确定在任何情况下的最大值，然后根据您的需要舍入为 50 个增量或其他合适的增量，然后将其用作最大值。