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

我想用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 }
      });
  });

我的图表代码如下所示：

[
    {
        "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 }
      });
  });

事实上，时间应该以天为单位，因为我在大约同一个小时内有每个日期的价格

---

这是。（演示已使用答案代码进行了更新）。

要使代码正常工作，您可以使用图表并向每个

数据集添加选项
showLine:true

为了获得每天的格式化标签，您需要将以下配置添加到图表
options
，从而将x轴定义为a轴

scales: {
  xAxes: [{
    type: 'time',
    time: {
      unit: 'day',
      tooltipFormat: 'MMM DD'
    }
  }] 
}

tooltips: {
  mode: 'point',
  callbacks: {
    title: (tooltipItem, data) => data.datasets[tooltipItem[0].datasetIndex].label
  }
}

请注意，Chart.js在内部使用Moment.js来实现的功能。因此，您应该使用Chart.js的名称，在单个文件中包含Moment.js

当在工具提示中同时显示标签时，请将以下内容添加到图表
选项

scales: {
  xAxes: [{
    type: 'time',
    time: {
      unit: 'day',
      tooltipFormat: 'MMM DD'
    }
  }] 
}

tooltips: {
  mode: 'point',
  callbacks: {
    title: (tooltipItem, data) => data.datasets[tooltipItem[0].datasetIndex].label
  }
}

请看一下您的修订版。
您能提供一个StackBlitz吗？@uminder谢谢，您知道如何在工具提示上显示标签，而不是在x轴上显示日期而不是时间戳吗？@jcubic:我更新了我的答案，现在还显示了如何处理标签和工具提示。还有一件事，如果两个项目的点相同，则只有一个标签。为了解决这个问题，我添加了
tooltipItem.map（item=>data.datasets[item.datasetIndex].label）
，它非常完美。@jcubic:很好，您也解决了这个工具提示问题。