我正在尝试使用cross origin
库创建图表。 X轴必须是具有以下时间格式的时间轴:Chart.js
,但是在图表上它给出了错误的日期,甚至我的数据也无法正确显示。如果我删除DD-MM-YYYY HH:MM:SS
部分,其余的工作正常。有什么问题?我如何从HH:MM:SS
中显示时间?
这是我的小提琴:http://jsfiddle.net/vaxobasilidze/ak1vmj9q/
DD-MM-YYYY HH:MM:SS
function factorData(data) {
let _data = data.map((e, i, a) => {
let prev = a[i - 1];
let next = a[i + 1];
if (e === prev && e === next) return '' + e;
return e;
}).map(e => typeof e === 'string' ? null : e);
return _data;
}
var ctx = document.getElementById('chart').getContext('2d');
var gradient1 = ctx.createLinearGradient(0, 0, 0, 400);
gradient1.addColorStop(0, 'rgba(14, 22, 38, 1)');
gradient1.addColorStop(1, 'rgba(1, 103, 147, 0.7)');
/***************/
var datas = [];
datas.push({x: "01-04-2001 10:05:46", y: 175});
datas.push({x: "01-10-2002 10:15:46", y: 140});
datas.push({x: "01-07-2003 11:47:26", y: 98});
datas.push({x: "01-10-2003 01:07:42", y: 130});
datas.push({x: "01-09-2006 06:55:46", y: 164});
datas.push({x: "01-04-2013 10:22:35", y: 178});
datas.push({x: "01-10-2015 10:05:46", y: 118});
datas.push({x: "01-10-2018 10:05:46", y: 158});
var timeFormat = "DD-MM-YYYY HH:MM:SS";
var options = {
type: 'line',
data: {
datasets: [{
fillColor: gradient1,
backgroundColor: gradient1,
borderColor: gradient1,
fill: 'origin',
strokeColor: gradient1,
pointBackgroundColor: "#00b2ff",
pointRadius: 2,
pointBorderWidth: 0,
pointHoverRadius: 3,
pointHoverBackgroundColor: "rgba(0, 178, 255, 1)",
data: datas,
steppedLine: true,
spanGaps: true
}, ]
},
options: {
responsive: true,
maintainAspectRatio: false,
datasetStrokeWidth: 1,
pointDotRadius: 3,
pointDotStrokeWidth: 1,
pointHitDetectionRadius: 1,
tooltipFillColor: "rgba(120,0,0,0.8)",
tooltipFontStyle: "bold",
animation: false,
scaleFontColor: "#ffffff",
scaleFontStyle: "bold",
scales: {
xAxes: [{
type: "time",
time: {
format: timeFormat,
tooltipFormat: 'll',
min: new Date(2001, 1, 4, 1, 0, 0, 0),
},
ticks: {
maxTicksLimit: 21,
minRotation: 90,
fontColor: '#ffffff'
},
gridLines: {
color: "#444444"
}
}],
yAxes: [{
ticks: {
fontColor: '#ffffff'
},
gridLines: {
color: "#444444"
},
}]
}
},
}
var myLineChart = new Chart(ctx, options);
答案 0 :(得分:1)
我相信您正在寻找DD-MM-YYYY HH:mm:ss
,请参见moment.js,以获取允许的格式标记列表(chart.js使用与指定的here相同的格式)。
MM是几个月的时间(因为您在DD-MM-YYYY
部分中使用的是当前时间,而SS是小数秒。我不认为您希望其中任何一个都显示时间(这可能是错误的)小数秒,但绝对不是数分钟)
如果您希望标签上也有时间,则可以使用:
`type: "time",
time: {
displayFormats:{ timeFormat },
min: new Date(2001, 1, 4, 1, 0, 0, 0),
},`
这两种解决方案的总和如下图:
function factorData(data) {
let _data = data.map((e, i, a) => {
let prev = a[i - 1];
let next = a[i + 1];
if (e === prev && e === next) return '' + e;
return e;
}).map(e => typeof e === 'string' ? null : e);
return _data;
}
var ctx = document.getElementById('chart').getContext('2d');
var gradient1 = ctx.createLinearGradient(0, 0, 0, 400);
gradient1.addColorStop(0, 'rgba(14, 22, 38, 1)');
gradient1.addColorStop(1, 'rgba(1, 103, 147, 0.7)');
/***************/
/* var datas = [];
var labelss = [];
var quantity = 50;
for (var i = 0; i < quantity; i++) {
var test = Math.floor((Math.random() * 100) + 1);
datas.push(test);
labelss.push(i);
} */
var datas = [];
datas.push({x: "01-04-2001 10:05:46", y: 175});
datas.push({x: "01-10-2002 10:15:46", y: 140});
datas.push({x: "01-07-2003 11:47:26", y: 98});
datas.push({x: "01-10-2003 01:07:42", y: 130});
datas.push({x: "01-09-2006 06:55:46", y: 164});
datas.push({x: "01-04-2013 10:22:35", y: 178});
datas.push({x: "01-10-2015 10:05:46", y: 118});
datas.push({x: "01-10-2018 10:05:46", y: 158});
var timeFormat = "DD-MM-YYYY HH:mm:ss";
var options = {
type: 'line',
data: {
//labels: labelss,
datasets: [{
fillColor: gradient1,
backgroundColor: gradient1,
borderColor: gradient1,
fill: 'origin',
strokeColor: gradient1,
pointBackgroundColor: "#00b2ff",
pointRadius: 2,
pointBorderWidth: 0,
pointHoverRadius: 3,
pointHoverBackgroundColor: "rgba(0, 178, 255, 1)",
data: datas,
steppedLine: true,
spanGaps: true
}, ]
},
options: {
responsive: true,
maintainAspectRatio: false,
datasetStrokeWidth: 1,
pointDotRadius: 3,
pointDotStrokeWidth: 1,
pointHitDetectionRadius: 1,
tooltipFillColor: "rgba(120,0,0,0.8)",
tooltipFontStyle: "bold",
animation: false,
scaleFontColor: "#ffffff",
scaleFontStyle: "bold",
scales: {
xAxes: [{
type: "time",
time: {
displayFormats:{ timeFormat },
min: new Date(2001, 1, 4, 1, 0, 0, 0)
},
ticks: {
maxTicksLimit: 21,
minRotation: 90,
fontColor: '#ffffff'
},
gridLines: {
color: "#444444"
}
}],
yAxes: [{
ticks: {
fontColor: '#ffffff'
},
gridLines: {
color: "#444444"
},
}]
}
},
}
var myLineChart = new Chart(ctx, options);