整天的chart.js时间图

Question

我需要显示用户的在线状态报告，如下图所示：

我正在尝试找出应该使用哪种图形来生成如图所示的图形。

Answer 1

您制作的图表类型是时间轴。

但是，可以以不同的方式显示时间轴，因此弄清楚如何获得所需的外观可能是违反直觉的。不同的图表库将揭示不同的绘图机制。

如果您的图书馆没有提供所需外观的时间表，那么您将不得不使用基本绘图机制来构建自己的时间表。

您可以在给出的示例中使用的最通用的绘图机制可能是箱形绘图。

我将解释我如何得出该结论，以便您更好地了解如何分析图表构造：

当您要创建像这样的专门图表时，您需要将元素分解为一条数据，并问自己“我将如何绘制这一个数据元素？”

例如，在这种情况下，您的元素是“在线，离开，会议...”等等。

您可以使用箱形图来绘制任何一个。

以下是经典盒须图的链接，如下所示： Box and Whisker Plot

在您的情况下，您将绘制一个没有任何晶须的盒子。您的水平轴将是时间轴，而不是普通数字。

如果为每个数据元素绘制一个方框，则会得到与问题中显示的图表相似的图表。请记住，绘制顺序至关重要。如果希望较小的框出现在较大的框上，则应先绘制较大的框。

还请注意，您可以在不同的垂直位置绘制各种数据，以完全消除重叠并具有完全不同的外观。这是一个看起来像的例子： Timeline of Macintosh Models on Wikipedia

---

几乎所有图表库都是基于我在此描述的概念构建的。它们从基本的绘制机制开始，以在二维图像上绘制线，框和其他形状。然后他们使用这些基础知识来创建专门的图表。

在您的情况下，您可以创建自己的图表类，该图表类与使用库提供的更多原始绘图元素显示的图表一样呈现图表。

---

图的定义-许多库使用“图”一词来指代一组数据到图像的映射点。在您的情况下，“在线，离开，开会...”都可以视为一个单独的图。但是在语法上将它们全部都称为情节也是正确的。只需观察您正在阅读的内容的背景即可。

还有一点：即使我使用Box and Whisker图进行了描述，但请记住，几乎每个图表库的核心都是基本形状图。从技术上讲，您只需要绘制矩形即可。