javascript - 在折线图中添加不同的标签 - Chart.js

Question

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

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。我的第一个想法是使用散点图，但这是不可能的，因为它只适用于数值。因此，我考虑使用line类型的图表，但这样做的问题是默认情况下你只能定义一个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'
        }
    }
});

编辑:我在@alonas和@HeadhunterKev的帮助下进行的修改

这就是我现在所拥有的，不起作用我认为格式错误，但我不知道是什么。也许我需要几秒钟？可能是一个愚蠢的问题，但我对此迷失了......

var sData = {
    datasets: [{
        label: 'Dataset1',
        data: [{
            x: '09:00',
            y: 88
        }, {
            x: '09:10',
            y: 89
        }, {
            x: '09:13',
            y: 86
        }, {
            x: '09:23',
            y: 86
        }, {
            x: '09:26',
            y: 85
        }, {
            x: '09:29',
            y: 83
        }]
    }, {
        label: 'Dataset2',
        data: [{
            x: '09:02',
            y: 88
        }, {
            x: '09:13',
            y: 89
        }, {
            x: '09:14',
            y: 86
        }, {
            x: '09:20',
            y: 86
        }, {
            x: '09:24',
            y: 85
        }, {
            x: '09:29',
            y: 83
        }]
    }]
}

sData.datasets[0].data = formatData(sData.datasets[0].data)
sData.datasets[1].data = formatData(sData.datasets[1].data)

function formatData(oldData) {
    var newData = []
    for (var i = 0; i < oldData.length; i++) {
        var currentData = {}
        currentData.x = moment(oldData[i].x, "hh:mm").format('HH:mm')
        currentData.y = oldData[i].y
        newData.push(currentData)
    }
    return newData
  }

var data = sData

var options = {
    responsive: true,
    scales: {
        xAxes: [{
            type: 'time',
        }]
    },
    tooltips: {
        callbacks: {
            title: function(tooltipItem, data){
                return moment(tooltipItem[0].label).format('hh:mm')
            }
        }
    }
}

var ctx = document.getElementById('bateria_graf');
let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

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

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');
            }
         }
      }]
   }
}