Charts 如何使用chart.js实现这种热图/条形图

我必须用chartjs构建一个水平条。我已经建立了一些，但它有点不同。该图表有两个标签表示亚克斯（“风暴风险”、“冰风险”）和哈克斯的小时数。我必须每小时打印一个不同颜色的选项（“低”、“中”、“高”），正如你们在所附的屏幕截图中看到的

这种条形图通常用条形图的长度来表示，其数值稍有不同

有什么建议吗

---

谢谢

您想要实现的图表是一种“热图”。截至目前（2018年9月），Chart.js不支持即时热图图表。但是，您可以从堆叠条形图中制作一个（在本例中，可能是堆叠水平条形图？）：根据所表示的实际值，使每个堆栈大小彼此相等，每个项目

backgroundColor

。完成此操作后，您可以使用with REQUIRE

回调来覆盖
标记
和
工具提示
。图例可以通过一个或多个带有示例值和颜色的条形图来实现

更多详细信息可在相关GitHub问题中找到：

另一种选择是使用BubbleChart。该策略将是类似的-您将需要使所有气泡大小相同，但覆盖其颜色。但是，如果提供问题中的外观，堆叠水平条形图将更合适