我正在学习如何使用 chart.js,并且我想要一个以“h?h:mm”格式显示一天中不同时间(x 轴)的随机值的图表。
在 x 轴上,我想要一小时的固定步长,从上午 12 点 (0:00) 开始,到上午 8 点 (8:00) 结束。
以及数据,例如 (x = 4:45, y = 67) 对应的 x 刻度(4:00 和 5:00 之间的 3/4)
我尝试了以下方法:
var cfg = {
type: 'line',
data: {
labels: ['00:00', '01:35', '02:20', '03:05', '04:07', '04:57', '05:25', '06:08', '07:10'],
datasets: [{
data: [
randomScalingFactor(18, 45),
randomScalingFactor(18, 45),
randomScalingFactor(18, 45),
randomScalingFactor(18, 45),
randomScalingFactor(18, 45),
randomScalingFactor(18, 45),
randomScalingFactor(18, 45),
randomScalingFactor(18, 45),
randomScalingFactor(18, 45)
],
label: "Improved ETA",
borderColor: "#e67e22",
borderWidth: 2,
fill: false,
lineTension: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'Improved ETA',
fontSize: 14,
fontFamily: 'Arial',
fontColor: '#000'
},
legend: {
display: false
},
scales: {
xAxes: [{
ticks: {
padding: 12
},
gridLines: {
color: 'rgba(0, 0, 0, 0.06)',
zeroLineColor: 'rgba(0, 0, 0, 0.06)',
drawTicks: false
}
}],
yAxes: [{
ticks: {
suggestedMin: 0,
suggestedMax: 80,
padding: 12
},
scaleLabel: {
display: true,
labelString: 'mins'
},
gridLines: {
color: 'rgba(0, 0, 0, 0.06)',
zeroLineColor: 'rgba(0, 0, 0, 0.06)',
drawTicks: false
}
}]
}
}
};
window.onload = function() {
var ctx = document.getElementById('foo').getContext('2d');
window.myLine = new Chart(ctx, cfg);
};
<div style="width: 600px; height: 400px;">
<canvas id="foo"></canvas>
</div>
但这不是我想要的,因为 X 轴刻度采用标签的值(x 数据)。更糟糕的是,刻度之间的间隔始终相同(例如,从 10:30 到 10:40,与 8:00 到 9:00 之间的间隔相同)。
PD: 由于时间图,我还阅读了有关使用 moment.js Chart.js bundle 的信息:https://www.chartjs.org/samples/latest/scales/time/line.html
最佳答案
首先,您应该省略标签
,但将数据定义为 individual points ,其中每个元素都有一个 t
和一个 y
属性。
data: [
{ t: '4:45', y: 67 },
{ t: '6:12', y: 45 },
{ t: '7:33', y: 56 },
],
根据以上数据,xAxes.time
选项必须定义如下:
time: {
parser: 'H:mm',
unit: 'hour',
stepSize: 1,
displayFormats: {
hour: 'H:mm'
},
tooltipFormat: 'H:mm'
},
您还可以定义 xAxis.ticks
选项如下:
ticks: {
min: '0:00',
max: '8:00'
}
As you already noticed, Chart.js internally uses Moment.js for the functionality of the time axis. Therefore you should use the bundled version of Chart.js that includes Moment.js in a single file.
请查看下面的可运行代码并了解其工作原理。
new Chart('myChart', {
type: 'line',
data: {
datasets: [{
label: 'My Dataset',
data: [
{ t: '4:45', y: 67 },
{ t: '6:12', y: 45 },
{ t: '7:33', y: 56 },
],
borderColor: 'blue',
fill: 'false',
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
type: 'time',
time: {
parser: 'H:mm',
unit: 'hour',
stepSize: 1,
displayFormats: {
hour: 'H:mm'
},
tooltipFormat: 'H:mm'
},
ticks: {
min: '0:00',
max: '8:00'
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
<canvas id="myChart" height="90"></canvas>
关于javascript - 时间图chart.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66611822/