Chart.js用颜色可视化随时间的变化

Question

我试图随时间创建对象状态的视觉表示，并且创建了类似以下内容的东西：

https://i.stack.imgur.com/j0vQ6.png

但是，这是通过使用常规垂直条形图（将全1用作条形数据）并根据我的状态数据更改条形的颜色来完成的。使用水平堆叠的条形图会更有意义，但是标准的chart.js实现将数组作为输入，但是数据仅适用于跨多行的一个分段（请参见Horizontal stacked bar chart with chart.js，以及第72、76和80（已接受的答案随附的Codepen链接中）。

如果我希望每一行都有许多段（无论状态何时改变，可能会多次），是否有更好的方法来实现？可以接受其他库，但首选chart.js解决方案。

编辑：这是一个代码片段，可帮助您使事情更清晰。

var dataForChart = {
    datasets: [{
      data: dummyData,
      backgroundColor:colours,
      borderWidth: 0,
      xAxisId: "data"
    }],
    labels: chartLabels
};
var chart = new Chart(document.getElementById("statusChart"+count), {
    type: 'bar',
    data: dataForChart,
    options: statusChartOptions(count)
});

其中dummyData是一个1的数组（因此，条形图以固定的高度出现在图形上），colours是条形颜色的数组，表示状态。这两个都是我希望在一天中捕获的时间段（段）的长度。 count用于循环遍历代码并每天产生一张图表。理想情况下，我只能有一张图，并且可以将y轴标签更改为星期几。