我必须用 chartjs 构建一个水平条。我已经建立了一些，但它有点不同。该图表有 2 个 yAxis 标签（“Storm Risk”、“Ice Risk”）和 xAxes 的小时数。正如您在随附的屏幕截图中看到的那样，我必须每小时打印出具有不同颜色（“低”、“中”、“高”）的这些不同选项之一。
这种条形图通常用条形的长度来表示值，它有点不同。
有什么建议吗？
谢谢
【问题讨论】：
标签： charts bar-chart chartjs-2.6.0
您要实现的图表是一种“热图”。截至目前（2018 年 9 月），Chart.js 不支持开箱即用的热图图表。但是，您可以从堆叠条形图（在这种情况下，可能是堆叠的水平条形图？）中制作一个：使每个堆叠大小彼此相等，并且每个项目 backgroundColor 取决于所表示的实际值。完成此操作后，您可以根据 callbacks 使用 with 覆盖 ticks 和 tooltips。图例可以通过一个带有示例值和颜色的条形图来实现。
更多细节可以在相关的 GitHub 问题中找到：https://github.com/chartjs/Chart.js/issues/4627
另一种选择是使用 BubbleChart。该策略将是相似的 - 您需要使所有气泡大小相同，但覆盖它们的颜色。但是，如果看问题，堆叠水平条形图会更合适。
【讨论】：