charts - 如何用 Chart.js 实现这种热图/条形图

Question

我必须用 chartjs 构建一个水平条。我已经建造了一些，但它有点不同。该图表有 2 个 yAxis 标签（“Storm Risk”、“Ice Risk”）和 xAxes 的小时数。正如您在随附的屏幕截图中看到的那样，我必须每小时打印出具有不同颜色（“低”、“中”、“高”）的这些不同选项之一。

这种条形图通常用条形的长度表示值，它有点不同。

有什么建议吗？。

谢谢

Answer 1

您要实现的图表是一种“热图”。截至目前（2018 年 9 月），Chart.js 不支持开箱即用的热图图表。但是，您可以从堆叠条形图（在这种情况下，可能是堆叠的水平条形图？）中制作一个：使每个堆栈大小彼此相等，并且每个项目backgroundColor取决于所表示的实际值。完成此操作后，您可以覆盖ticks并tooltips使用 with callbacks。图例可以通过一个带有样本值和颜色的条形图来实现。

更多细节可以在相关的 GitHub 问题中找到：https ://github.com/chartjs/Chart.js/issues/4627

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