如何使用 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。