HighCharts.js 中子组不相等的堆积柱形图

Question

我正在尝试创建一个 "sub-groups" 数量不等的堆积柱形图。

例如，给定以下数据：

Category#1 : [SubCategory1: 2, SubCategory2: 4, SubCategory3: 3], 
Category#2 : [SubCategory4: 5, SubCategory5: 3], 
Category#3 : [SubCategory6: 4, SubCategory7: 3, SubCategory8: 3, SubCategory9: 5]
...

我想创建一个柱形图，其中第一列由三个堆叠段组成，总高度为 9，第二列有两个段的堆栈，总高度为 8，第三列有四段，总高度为15.

在使用 HighCharts API 工作了一段时间后，总体上取得了不错的结果，我相信我想要完成的事情可能是可行的，我可能只是缺少一些选项组合或构建我的数据不正确。有谁知道我需要做什么才能创建这样的图表？

Answer 1

解决此问题的两种方法是：

为系列中的每个点指定一个与类别索引相关的特定 x 索引。

系列示例 (JSFiddle)：
```
series: [{
    name: 'John',
    data: [{x:0,y:5},{x:3,y:7},{x:4,y:2}]
}
```
这里我们跳过第二类和第三类（索引1和2），所以它们不会有值。

在您的系列中使用 null 值来跳过它出现在类别中的步骤。

系列示例 (JSFiddle)：
```
series: [{
    name: 'John',
    data: [5, null, null, 7, 2]
}
```
这个系列也像上面的一样跳过了第二和第三类。

您的解决方案选择可能取决于您最终会得到多少 null 个值。如果只有几个，那么这可能是最轻量级的解决方案。如果很多，那么使用 x 值的 Point 对象可能更合适和更干净。

HighCharts.js 中子组不相等的堆积柱形图

Stacked Column Chart With Unequal SubGroups in HighCharts.js

highcharts