chartjs 中每个堆栈中具有多个相同类型的条形的堆叠条形图

Question

我正在尝试在 ChartJS 中重新创建顶部图表。底部的是我在chartjs中使用条形图的尝试。

我不知道如何在每一行添加多个好的和坏的栏。此外，每个栏都需要一个工具提示。

// my attempt at creating this in chartjs
const config = {
    type: 'bar',
    data: {
        labels: ['stream 1', 'stream 2', ... ],
        datasets: [
            {
                label: 'good',
                data: [[x1, x2], ...],
            },
            {
                label: 'bad',
                data: [[x1, x2], ...],
            },
        ],
    },
    options: {
        indexAxis: 'y',
        scales: { x: { type: 'time', min: minTime, max: maxTime }, y: { stacked: true } },
    },
};

理想情况下我可以传递这样的数据

// Ideally I can pass in data like this 
[{
    "name": "Good",
    "data": [
        {
            "x1": x1,
            "x2": x2,
            "y": streamIndex,
        }, ...
    ]
},
{
    "name": "Bad",
    "data": [
        {
            "x1": x1,
            "x2": x2,
            "y": streamIndex,
        }, ...
    ],
}]

我还尝试使用数据中的 showLines: true 和 null 散点图重新创建它，其中我不希望点与线连接。但通过这种方法，我很难让工具提示在正确的时间显示线条。因为它实际上是一个散点图，所以我可以让工具提示显示最近的点，但我需要它显示整行，而不需要在移动光标时工具提示从行的开头跳到行的结尾。另外，可能有两个点位于完全相同的点，因此很难确定在工具提示中显示哪个点。

是否可以在chartjs中重新创建第一个图表？

Answer 1

数据点格式应为：

{x: [110, 150], y: 'stream 1'}

要在

y = 'stream 1'

处绘制条形，从

x = 110

开始，到

x = 150

结束，请参阅数据结构文档部分中的 对象， 和浮动条示例.

这是一个例子：

const data = {
   labels: ['stream 1', 'stream 2'],
   datasets: [
      {
         label: 'good',
         data: [{x: [0, 50], y: 'stream 1'}, {x: [110, 150], y: 'stream 1'}, {x: [0, 100], y: 'stream 2'}],
      },
      {
         label: 'bad',
         data: [{x: [60, 100], y: 'stream 1'}, {x: [160, 200], y: 'stream 1'}, {x: [110, 200], y: 'stream 2'}],
      },
   ],
};

const options = {
   indexAxis: 'y',
   responsive: true,
   grouped: false,
   maintainAspectRatio: false,
   plugins: {
      legend: {
         display: true,
      },
   }
};

new Chart('barChart', {
   type: 'bar',
   data: data,
   options: options,
});

<div style="height:150px">
<canvas id="barChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>