如何根据 x 轴宽度计算高图表中的组填充

How to calculate group padding in Highcharts based on x-axis width

本文关键字：高图表填充计算何根更新时间：2023-09-26

我正在使用Highcharts在我正在处理的网页上呈现不同的图表。某些图表具有单列，而其他图表具有多个数据系列。x 轴上的类别数也不同。此外，网页设计是响应式的，因此图表宽度会发生变化。

我不希望每个组的每一列之间有任何空格，但组之间应该有距离。每列的大小应该是固定的。换句话说，我需要设置组填充的值。

我已将点填充设置为 0。但是为了防止图表宽度不同时它们之间的重叠列和/或空格，我已经发现我必须在 javascript 代码中自己计算 groupPpad。由于我在图表中的所有差异，此组填充值必须是动态的。

我知道如何在数学上做到这一点，但我需要为此以编程方式获取 xAxis 宽度，因为该值不是恒定的。我的第一个想法是使用图表容器的宽度，但 x 轴比这个轴小，因为 y 轴和边距/间距使用空间。

可以在呈现图表后获取 x 轴宽度，但我之前需要这个 - 也就是说，当我将所有选项设置为图表时。我该怎么做？

您以前无法获取该值，因为它不存在。但是，对于这种情况，您有加载事件。

在这种情况下，您可以访问轴的宽度this.xAxis[0].width。然后，您可以简单地进行计算并调用this.series[0].update({ groupPadding: new_value });