如何在 chart.js 折线图中启用时间刻度？

Question

我用 chart.js 构建了一个示例折线图。这是我的 html 和 js 代码。我看到绘制了我的数据集的图表。

但是当我尝试通过在 options、

中添加它来在我的 x 轴上启用时间刻度时

const config = {
    type: 'line',
    data: data,
    options: {
        responsive: true,
        scales: {
            x: {
                type: 'time',
            }
        }
    }
};

没有绘制图表。而且我在浏览器控制台中没有看到任何错误。你能告诉我我错过了什么吗？

工作 html 和 js 没有启用时间轴。

<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Integration</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  </head>

<canvas id="line-chart" width="800" height="450"></canvas>

<script>
    const data = {
        datasets: [{
            label: 'my first dataset',
            borderColor: 'rgb(255, 99, 132)',

            data: [{ x: "2016-12-25", y: 3 }, { x: "2016-12-28", y: 10 }, { x: "2016-12-29", y: 5 }, { x: "2016-12-30", y: 2 }, { x: "2017-1-3", y: 20 }, { x: "2017-1-5", y: 30 }, { x: "2017-1-8", y: 45 }],
        }
        ,
        {
            label: 'My Second dataset',
            borderColor: 'rgb(99, 255, 132)',

            data: [{ x: "2016-12-25", y: 20 }, { x: "2016-12-27", y: 62 }, { x: "2016-12-26", y: 15 }, { x: "2016-12-31", y: 172 }, { x: "2017-1-1", y: 30 }, { x: "2017-1-5", y: 50 }, { x: "2017-1-6", y: 25 }],
        }
        ]
    };

    const config = {
        type: 'line',
        data: data,
        options: {
            responsive: true,
        }
    };

    const myChart = new Chart(
        document.getElementById('line-chart'),
        config
    );
</script>

但是

Answer 1

您的时间轴不起作用的原因是因为自 chart.js V3 以来您将需要包含您自己的日期适配器，chart.js 不再附带默认日期适配器。有关详细信息，请参阅 documentation

const data = {
  datasets: [{
      label: 'my first dataset',
      borderColor: 'rgb(255, 99, 132)',

      data: [{
        x: "2016-12-25",
        y: 3
      }, {
        x: "2016-12-28",
        y: 10
      }, {
        x: "2016-12-29",
        y: 5
      }, {
        x: "2016-12-30",
        y: 2
      }, {
        x: "2017-01-03",
        y: 20
      }, {
        x: "2017-01-05",
        y: 30
      }, {
        x: "2017-01-08",
        y: 45
      }],
    },
    {
      label: 'My Second dataset',
      borderColor: 'rgb(99, 255, 132)',

      data: [{
        x: "2016-12-25",
        y: 20
      }, {
        x: "2016-12-27",
        y: 62
      }, {
        x: "2016-12-26",
        y: 15
      }, {
        x: "2016-12-31",
        y: 172
      }, {
        x: "2017-01-01",
        y: 30
      }, {
        x: "2017-01-05",
        y: 50
      }, {
        x: "2017-01-06",
        y: 25
      }],
    }
  ]
};

const config = {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    scales: {
      x: {
        type: 'time',
      }
    }
  },
};

const myChart = new Chart(
  document.getElementById('line-chart'),
  config
);

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chart.js Integration</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

  <!--Line below added, added date adapter for time scale -->
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
</head>

<body>
  <canvas id="line-chart" width="800" height="450"></canvas>
</body>

</html>

如何在 chart.js 折线图中启用时间刻度？

How to enable timescale in chart.js line chart?

javascript

chart.js