程序员经验分享-hwhale

Chart.js 中具有线性时间刻度的折线图

2024-04-10

我正在尝试使用Chart.js 3.3.2 https://www.chartjs.org/docs/latest/显示一些具有等距 x 日期轴的折线图。就像他们给出的例子一样here https://www.chartjs.org/docs/latest/samples/scales/time-line.html.

我无法让此示例的简单版本正常工作（请参见下面的代码片段），因为它输出错误：

错误：未实现此方法：检查是否提供了完整的日期适配器。

我没有尝试实现整个示例，因为它依赖于外部定义的函数和值。

我很久以前就问过类似的问题（Chart.js 使用日期创建折线图 https://stackoverflow.com/questions/47875045/chart-js-creating-a-line-graph-using-dates）但是重新阅读那里的答案后，它对我没有帮助（值得注意的是这里的大多数答案也集中在 Chart.js 2 而不是 3）。

我非常感谢这里的任何帮助（我发现这里的文档很难理解）。

const data = {
  labels: [
    new Date(86400000), // Day 1
    new Date(2*86400000), // Day 2
    new Date(3*86400000), // Day 3
    new Date(4*86400000), // Day 4
    new Date(6*86400000), // Day 6
    new Date(7*86400000), // Day 7
    new Date(13*86400000) // Day 13
  ],
  datasets: [{
    label: 'My First dataset',
    data: [1,3,4,5,6,7,8]
  }]
};

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

let ctx = document.querySelector("canvas").getContext("2d");
let chart = new Chart(ctx,config);
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.min.js"></script>
  </head>
  <body>
    <canvas></canvas>
    <script src="script.js"></script>
  </body>
</html>

您需要添加 3.x 迁移指南中提供的日期适配器

（在页面中搜索“可用适配器”）

https://www.chartjs.org/docs/latest/migration/v3-migration.html https://www.chartjs.org/docs/latest/migration/v3-migration.html

这是一个工作示例

const data = {
  labels: [
    new Date(86400000), // Day 1
    new Date(2 * 86400000), // Day 2
    new Date(3 * 86400000), // Day 3
    new Date(4 * 86400000), // Day 4
    new Date(6 * 86400000), // Day 6
    new Date(7 * 86400000), // Day 7
    new Date(13 * 86400000), // Day 13
  ],
  datasets: [
    {
      label: "My First dataset",
      data: [1, 3, 4, 5, 6, 7, 8],
    },
  ],
};

let ctx = document.querySelector("canvas").getContext("2d");

let chart = new Chart(ctx, {
  type: "line",
  data: data,
  
  options: {
    scales: {
      x: {
        type: "time",
      }
    },
  },
});
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection"></script>
    <title>repl.it</title>
  </head>
  <body>
    <canvas></canvas>
    <script src="new.ts"></script>
  </body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

chartjs

chartjs3

Chart.js 中具有线性时间刻度的折线图 的相关文章