在这里查看我的代码。我正在从后端获取数据，因此无法进一步处理它们。我使Chart.js成为散点图，但提供的日期被解析为错误，2020年变为1996年，依此类推。
知道如何正确设置X轴格式吗？
var config = {
type: 'scatter',
data: {
datasets: [
{
label: "US Dates",
data: [
{x:2020-01-23,y:25.55,date:[2020,1,23]},
{x:2020-01-24,y:21.53,date:[2020,1,24]},
{x:2020-01-25,y:21.11,date:[2020,1,25]}
],
fill: false,
borderColor: 'red'
}
]
},
options: {
responsive: true,
title: {
display: true,
text: "Chart.js Time Scale"
},
scales: {
xAxes: [{
time: {
parser: 'YYYY-MM-DD',
tooltipFormat: 'll',
unit: 'month',
unitStepSize: 1,
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
}
}]
}
}
};
window.onload = function () {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<body>
<div style="width:75%;">
<canvas id="canvas"></canvas>
</div>并且请忽略数据中的“日期”值。这只是来自后端。
谢谢！
您只需要在x值两边加上引号，并将x轴类型设置为'时间'，就可以解决问题！
var config = {
type: 'scatter',
data: {
datasets: [
{
label: "US Dates",
data: [
{x:'2020-01-23',y:25.55,date:[2020,1,23]},
{x:'2020-01-24',y:21.53,date:[2020,1,24]},
{x:'2020-01-25',y:21.11,date:[2020,1,25]}
],
fill: false,
borderColor: 'red'
}
]
},
options: {
responsive: true,
title: {
display: true,
text: "Chart.js Time Scale"
},
scales: {
xAxes: [{
type: 'time',
time: {
parser: 'YYYY-MM-DD',
tooltipFormat: 'll',
unit: 'month',
unitStepSize: 1,
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
}
}]
}
}
};
window.onload = function () {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<body>
<div style="width:75%;">
<canvas id="canvas"></canvas>
</div>