时间图表chart.js [英] Time graphs chart.js
问题描述
我正在学习如何使用 chart.js，我想要一个显示一天中不同时间(x 轴)的随机值的图表，格式为h?h:mm".
在 x 轴上，我想要一小时的固定步长，从上午 12 点 (0:00) 开始，到上午 8 点 (8:00) 结束.
而数据，例如 (x = 4:45, y = 67) 在 te 对应的 x tick (3/4 between 4:00 and 5:00)
我尝试了以下方法:
var cfg = {类型:'线'，数据: {标签:['00:00'、'01:35'、'02:20'、'03:05'、'04:07'、'04:57'、'05:25'、'06:08', '07:10'],数据集:[{数据: [randomScalingFactor(18, 45),randomScalingFactor(18, 45),randomScalingFactor(18, 45),randomScalingFactor(18, 45),randomScalingFactor(18, 45),randomScalingFactor(18, 45),randomScalingFactor(18, 45),randomScalingFactor(18, 45),随机缩放因子(18, 45)],标签:改进的 ETA"，边框颜色:#e67e22"，边框宽度:2，填充:假，线张力:0}]},选项: {响应式:真实，保持纵横比:假，标题: {显示:真，text: '改进的 ETA',字体大小:14，fontFamily: 'Arial',字体颜色:'#000'},传奇: {显示:假},秤:{x轴:[{滴答声:{填充:12},网格线: {颜色:'rgba(0, 0, 0, 0.06)',zeroLineColor: 'rgba(0, 0, 0, 0.06)',drawTicks: 假}}],y轴:[{滴答声:{建议Min: 0,建议最大:80，填充:12},刻度标签:{显示:真，标签字符串:'分钟'},网格线: {颜色:'rgba(0, 0, 0, 0.06)',zeroLineColor: 'rgba(0, 0, 0, 0.06)',drawTicks: 假}}]}}};window.onload = 函数(){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 包的信息:https://www.chartjs.org/samples/latest/scales/time/line.html
首先你应该省略 labels 但将你的数据定义为 个别点，其中每个元素都有一个t和一个y 属性.
数据:[{ t: '4:45', y: 67 },{ t: '6:12', y: 45 },{ t: '7:33', y: 56 },],有了以上数据，xAxes.time 选项必须定义如下:
时间:{解析器:'H:mm'，单位:'小时'，步长:1，显示格式:{小时:'H:mm'},tooltipFormat: 'H:mm'},您还可以定义 xAxis.ticks 选项如下:
记号:{分钟:'0:00'，最大值:'8:00'}<块引用>
您已经注意到，Chart.js 在内部使用 Moment.js 来实现 时间轴.因此，您应该使用 捆绑版本 Chart.js 在单个文件中包含 Moment.js.
请看看下面的可运行代码，看看它是如何工作的.
new Chart('myChart', {类型:'线'，数据: {数据集:[{标签:我的数据集"，数据: [{ t: '4:45', y: 67 },{ t: '6:12', y: 45 },{ t: '7:33', y: 56 },],边框颜色:'蓝色'，填充:'假'，}]},选项: {秤:{y轴:[{滴答声:{beginAtZero: 真}}],x轴:[{类型:'时间'，时间: {解析器:'H:mm'，单位:'小时'，步长:1，显示格式:{小时:'H:mm'},tooltipFormat: 'H:mm'},滴答声:{分钟:'0:00'，最大值:'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>I'm learning how to use chart.js and I want a graph that displays random values in different hours of the day (x axis) with format "h?h:mm".
In the x axis I want a fixed step of one hour, starting at 12 AM (0:00) and ending at 8 AM (8:00).
And the data, for example (x = 4:45, y = 67) in te corresponding x tick (3/4 between 4:00 and 5:00)
I tried the following:
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>
But is not what I want, because the X axis ticks take the values of the labels (x data). And what is even worse the space between ticks is always the same (e.g from 10:30 to 10:40 there is the same space as 8:00 to 9:00).
PD: I also have read about using moment.js chart.js bundle because of the time graph: https://www.chartjs.org/samples/latest/scales/time/line.html
First you should omit labels but define your data as individual points, where each element has a t and an y property.
data: [
{ t: '4:45', y: 67 },
{ t: '6:12', y: 45 },
{ t: '7:33', y: 56 },
],
With above data, xAxes.time option will have to be defined as follows:
time: {
parser: 'H:mm',
unit: 'hour',
stepSize: 1,
displayFormats: {
hour: 'H:mm'
},
tooltipFormat: 'H:mm'
},
Further you can define the xAxis.ticks option as follows:
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.
Please take a look at the runnable code below and see how it works.
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>
这篇关于时间图表chart.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
