在折线图中添加其他标签-Chart.js

Question

我需要绘制一些信息，即X-axis是时间，Y-axis是数值。结构类似于下表，

Name   Date   Result
N1     9:00   88
N1     9:10   84
N1     9:16   83
N1     9:23   83
N1     9:29   85
N2     9:03   87
N2     9:07   87
N2     9:18   87
N2     9:25   86
N2     9:29   86

因此，在此示例中，我需要两个独立的行，每个行都处理它的数据。

为了显示此信息，我正在使用chart.js。我的第一个想法是使用scatter类型图，但这是不可能的，因为它仅适用于数值。因此，我考虑过使用line类型图，但是问题是默认情况下您只能定义一个label，以及如何看到我需要每个信息都是独立的，因为它们不必匹配小时。

是否可以添加另一个label？我试图定义两个列表，但是它不起作用，我也不知道如何处理。

let ctx = document.getElementById("my_chart").getContext("2d");

my_chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [
            ['9:00','9:10','9:16','9:23','9:29'],
            ['9:03','9:07','9:18','9:25','9:29']
        ],
        datasets: [{ 
            data: [88,84,83,83,85],
            label: "N1",
            borderColor: "#8e5ea2",
            fill: false
        }, { 
            data: [87,87,87,86,86],
            label: "N2",
            borderColor: "#c45850",
            fill: false
        }]
    },
    options: {
        title: {
            display: true,
            text: 'Info'
        }
    }
});

有人可以帮我吗？非常感谢。

Answer 1

您可以提供数据作为x，y的列表：

datasets: [{ 
        data: [{y:88,x:`${timestamp of 9:00}` },...],
        ...
    }, { 
        data: [{y:87, x:`${timestamp of 9:03}`},...],
        ...
    }]

像这里https://www.chartjs.org/docs/latest/charts/line.html#point

然后在选项中定义如何将x值（时间戳）显示为小时：分钟

{
   scales: {
      xAxes: [{
         ticks: {
            callback = (label, index, labels) => {
               return moment.unix(label).format('HH:mm');
            }
         }
      }]
   }
}