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

【问题标题】：Stacked Bar "Time Line" Chart using Ng2-Charts/ChartJs使用 Ng2-Charts/ChartJs 的堆积条形“时间线”图表
【发布时间】：2019-04-02 16:28:54
【问题描述】：

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

但是，我在数据集的逻辑上遇到了困难。我已经研究找到一个类似的图表（使用 ng2-charts），但无济于事。

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

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

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

【问题讨论】：

【解决方案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：

【讨论】：

首先，感谢您花时间回复我的帖子，非常感谢。很棒的信息！您的技巧几乎就在那里，但是有没有办法让 X 轴反映日期而不是数值（如我最初的帖子中所示）？如果做不到这一点，您是否知道是否有其他图表解决方案能够提供所需的图表？
用更多技巧修改 ChartJS 并不能为您提供可行的解决方案。我认为您正在寻找某种甘特图，对吗？看看angular-gantt (AngularJS)、angular4-gantt (Angular) 或 some other。我可以向您推荐StackExchange's Software Recommendations，以寻求更适合您的设置的工具。祝你好运！
是的，甘特图可能更符合要求，我会考虑您的建议。再次感谢您迄今为止提供的所有帮助。