Chart.js 时间线

Question

Chart.js 是一个非常流行的用于制作图表的 JavaScript 库。时间线是一种非常流行的图表类型。看起来，chart.js 可以制作许多不同类型的图表，但时间线除外。可以用chart.js制作时间线吗？

Answer 1

时间表有所延长。

https://github.com/fanthos/chartjs-chart-timeline

它不是很出名，也没有太多文档，但我使用过它并且效果很好。

如有任何疑问，请随时询问。

Answer 2

我也在寻找一种使用 Chartjs 3 绘制时间线/甘特图的方法（在我的例子中是react-chartjs-2），但我找不到一个可以满足我所有需求的好例子。

1. 使用

   Date

   作为开始和结束
2. 一张图中的多个组
3. 自定义工具提示
4. 无重叠 -> 将事件移动到一组内的新行，以便它们不重叠

所以我开始尝试水平堆叠条形图并得到了我需要的一切。我能够格式化和堆叠数据来满足我的所有需求，无需任何花哨的库，只需 Chartjs 3 和数据格式化。 在我的应用程序中，我还通过过滤数据创建了水平滚动，效果非常好。

我使用带组的堆叠条形图和水平条形图作为起点。

这些信息对于使其正常工作至关重要：

1. 您可以通过提供包含两个数字条目的数组来为条形指定开始值和结束值

2. stack

   的第一个柱的值是绝对值，同一

   stack

   的所有后续值必须相对于前一个柱的末尾
3. 您需要利用

   skipNull

   财产
4. 您还需要使用

   display

   选项的

   datalabels

   功能来隐藏所有具有空值的数据标签

我在codesandbox中创建了一个基本示例：

基本示例

Answer 3

我必须登录才能对@DAGA表示感谢。 你的工作拯救了我的一天。

准确地说，DAGA 的方法使用

[number, number][]

作为数据结构，这在 Chart.js 文档中的Floating Bars示例中提到。