作者:晴可倾 | 来源:互联网 | 2023-02-08 09:03
我有一个显示正常的Chart.js图表,直到我添加了一个时间刻度.配置如下所示:
this.chart = new Chart(this.ctx, {
type: 'line',
data: data,
options: {
legend: {
display: false
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'month',
format: 'timeFormat'
}
}]
}
}
});
而data
物体看起来是这样的:
let data = {
labels: ["1485903600", "1490738400"],
datasets: [{
label: '',
data: [120, 30],
lineTension: 0
}]
};
x轴正确显示两个日期,y轴由正确的限制(即120和30)限制,但数据未显示在图表上.
1> jordanwillis..:
转换为时间刻度时图表未显示数据的原因是因为您要为Date
构造函数无法解析的标签传递字符串值.
时间刻度要求整数(自纪元以来的毫秒数),Date
对象,moment.js
对象或具有Date.parse()
可以理解的格式的日期的字符串表示.
因此,在您的情况下,当渲染图表时,它无法Date
为X轴创建对象(因为您的标签值),因此它使用创建2个date
对象new Date()
(这就是为什么X轴仍然显示一些日期数据...请注意这是2017年的日期,因为现在new Date()
返回Date
初始化).
要更正此问题,只需将标签值转换为整数(例如删除引号),然后图表就会显示您的数据点.该图表看起来仍然很有趣,但因为X比例是以单位为单位配置的,month
但您的数据值仅相隔1天(1485903600 = 1970年1月17日10:45 PM和1490738400 = 1970年1月18日12:05 AM).
这是一个代码示例,显示您的原始图表和正确的图表,以便您可以看到差异.