Highcharts - 如何并排显示超过 30 列答案

【问题标题】：Highcharts - How to show more than 30 columns side by sideHighcharts - 如何并排显示超过 30 列
【发布时间】：2018-10-04 17:43:59
【问题描述】：

我正在使用 Highcharts 6.1.1 和 react-highcharts 16.0.0。当我创建一个包含 30 个或更少系列的“柱状”样式图表时，具有匹配 x 值的数据点都并排排列：

但是，如果我添加另一个系列，使总数达到 31，Highcharts 不再将列并排分组，而是将它们全部呈现在同一个位置，而不是堆叠，只是重叠：我似乎无法在 highcharts 配置中找到设置来更改此分组阈值，并且已经尝试了很多设置填充和宽度等尝试最大化它将并排显示的列数，但我永远不能让它适用于 30 多个系列。

【问题讨论】：

标签： javascript reactjs highcharts

【解决方案1】：

当您使用 boost 模块时，列总是一个像素宽。此外，当 boost 模块工作时，许多功能（例如导致此问题的 grouping）被禁用。

这里：https://github.com/highcharts/highcharts/issues/6600，你已经很好地解释了这个模块的假设。

要解决此问题，您可以使用十进制 x 值：

series: [{
    data: [1]
}, {
    data: [2, 2]
}, {
    data: [{
        x: 0.3,
        y: 1
    }]
}, {
    data: [2]
}, ... ]

现场演示：http://jsfiddle.net/BlackLabel/8bq9yL4f/

【讨论】：

【解决方案2】：

问题出在配置的 boost 部分：

config = {
  boost: {
      enabled: true,
      useGPUTranslations: true,
      seriesThreshold: 30
   },
 }

因此，我可以提高该 seriesThreshold 或仅针对这种情况禁用 boost 来解决问题。虽然我想知道是否有办法让 boost 渲染正确并排显示列。

【讨论】：