如何根据 x 轴宽度计算 Highcharts 中的组填充

Question

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

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

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

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

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

Answer 1

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

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