使用Ng2-Chart / ChartJs的堆积条形“时间线”图表

Question

我希望使用Ng2-Charts（ChartJs的Angular 2指令）创建以下图表。

但是，我很难理解数据集的逻辑。我已经研究过找到类似的图表（使用ng2-charts），但无济于事。

以下是有关图表的一些信息： 每个公司和3个阶段（用红色，黄色和绿色表示），该值表示公司在给定阶段花费了多少天。

例如： 公司1在第一阶段（绿色）花费了27天，在第二阶段（黄色）花费了54天，在第三阶段（绿色）花费了2天。

如何使用ng2-charts实现此图表？

Answer 1

很好的问题，但是ChartJS似乎还不支持它。看看this issue和更有趣的this pull-request。

由于这是许多人提出的开放功能要求，因此也可以通过添加诸如here之类的自定义功能来解决此问题，但是您将无法直接使用ng2-charts找到解决方案。

在您的情况下，我建议尝试使用这些叉子并直接使用Chart.js（不使用角度分量），或者搜索另一个能够显示这些图表类型的库。

一种可行的破解解决方案也正在为每个堆叠的条添加white padding，在此处建议如何使用：https://github.com/chartjs/Chart.js/issues/2912#issuecomment-230468691

A使用此“解决方案”创建了working stackblitz：