我用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>
但是
时间轴不起作用的原因是，由于chart.js V3需要包含自己的日期适配器，chart.jss不再附带默认日期适配器。有关更多信息，请参阅文档
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>