我正在尝试使用 Chart.js 3.3.2 显示一些具有等距 x 日期轴的折线图。就像他们给出的例子here。
我无法让此示例的简单版本正常工作（请参阅下面的代码片段），因为它输出错误：
错误：此方法未实现：检查是否提供了完整的日期适配器。
我没有尝试实现整个示例，因为它依赖于外部定义的函数和值。
我很久以前就问过类似的问题（Chart.js 使用日期创建折线图），但是重新阅读了那里的答案，它对我没有帮助（值得注意的是这里的大多数答案也集中在 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
这是一个工作示例
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]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<title>repl.it</title>
</head>
<body>
<canvas></canvas>
<script src="new.ts"></script>
</body>
</html>