如何使用 chart.js 绘制二维线时间图

Question

我想用 chart.js 绘制折线图，但所有示例都显示单个数组作为数据，我有 2d 数据。X 是天（日期对象），y 是产品的价格。我有这样的功能来创建数据：function format(data) {    const result = [];    Object.entries(data).forEach(([key, value]) => {        var data = {            label: key,            backgroundColor: 'rgba(0,0,0,0)',            data: value.map(data => ({y: data[0], x: new Date(data[1])}))        };        result.push(data);    });    return result;}从文档中我看到我可以将对象与 {x,y} 一起使用，但这只渲染了 2 点。数据输出如下所示：[    {        "label": "cyfrowe.pl",        "backgroundColor": "rgba(0,0,0,0)",        "data": [            {                "y": 9299,                "x": "2020-08-01T05:19:28.000Z"            },            {                "y": 9299,                "x": "2020-08-02T04:15:01.000Z"            },我的图表代码如下所示：var canvas = document.querySelector('canvas');var ctx = canvas.getContext('2d');console.log(ctx);fetch('price.json')  .then(res => res.json())  .then(data => {      data = format(data);      console.log(data);      console.log(JSON.stringify(data.slice(0,1), true, 4));      var myLineChart = new Chart(ctx, {          type: 'line',          data:{ datasets: data }      });  });事实上，时间应该以天为单位，因为我有大约同一时间每个日期的价格。这是我不工作的演示。（演示已使用答案代码更新）。

Answer 1

要使您的代码正常工作，您可以使用散点图并将选项添加showLine: true到每个dataset.

为了获取每天的格式化标签，您需要通过将以下配置添加到 chart 来将 x 轴定义为时间笛卡尔轴options。

scales: {

  xAxes: [{

    type: 'time',

    time: {

      unit: 'day',

      tooltipFormat: 'MMM DD'

    }

  }] 

}

请注意，Chart.js 在内部使用 Moment.js 来实现时间轴的功能。因此，您应该使用在单个文件中包含 Moment.js 的 Chart.js捆绑版本。

当需要在工具提示中显示标签时，将以下内容添加到图表中options。

tooltips: {

  mode: 'point',

  callbacks: {

    title: (tooltipItem, data) => data.datasets[tooltipItem[0].datasetIndex].label

  }

}

请查看您修改后的CodePen。