我正在用图表 js 做一个 json 的图表。即使我将格式化设置为日期,我仍然会得到时间戳。我希望有一个人可以帮助我。顺便说一句,正在从 firebase 检索数据。我附上我正在使用的代码。
提前致谢。
期望的输出:
代码:
var currentDate= val.date; //Extracting the date value in dd/mm/yyyy format from the mentioned text box
我从firebase获取数据
//Printing the extracted date value before making the change
var newDate = currentDate.split('/'); //Splitting the extracted date value using the delimiter /, which is the seperator used in the date value
currentDate = newDate[1] + "/" + newDate[0] + "/" + newDate[2];//Constructing a new date value (string) using the splitted values.
我将其格式化为 MMDDYYYY
var dateObject = new Date(currentDate);
然后改成日期数据类型
var data_point={
x:dateObject,
y:parseFloat(val.sa_quantity)
};
datapoints.push(data_point);
我将所有更改的数据添加到用于绘制数据的数组中
var chartData = [];
var ctxR = document.getElementById("data_chart").getContext('2d');
var myChart = new Chart(ctxR, {
type: 'scatter',
data: {
labels:dates,
datasets: [{
label: 'Predicted Sales($)',
data: datapoints
}]
},
responsive: true,
title:{
display: true,
text:"Chart.js Time Scale"
},
scales:{
xAxes: [{
type: 'time',
time: {
displayFormats: {
'millisecond': 'MMM DD',
'second': 'MMM DD',
'minute': 'MMM DD',
'hour': 'MMM DD',
'day': 'MMM DD',
'week': 'MMM DD',
'month': 'MMM DD',
'quarter': 'MMM DD',
'year': 'MMM DD',
},
round: 'day',
unit: 'day',
}
}]
}
});
myChart.update();
您必须更改显示格式。chart.js 喜欢 unix,人们喜欢日期字符串。您应该添加类似此功能的内容来显示您的日期:
function getTimeString(date) {
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
return day + '/' + month + '/' + year;
}
Whenever I work with a time-scale in chart.js I add moment.js because it's much more powerful. But it can be kind of an overkill for webapps.
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句