chart.js - chart.JS 时间轴标签应该只是小时格式
问题描述
它似乎不起作用或我做错了什么。我以“1:45”等格式将分钟转换为小时,但我希望轴只在整个小时内滴答一次,例如“0,1,2,3,...”现在,我只是在每个奇数点都有每个滴答数据点小时...
var ctx = document.getElementById('myChart');
var HourLabels = [];
MinLables=[54, 83, 155, 192, 206, 238, 285, 307, 335, 367, 431, 444, 495, 548, 604, 651, 680, 721, 777, 789, 859, 936, 980, 1004, 1047, 1089, 1122, 1135, 1200, 1245, 1323, 1381, 1396]
function parseMinToHours (x) {
MINUTES = x;
var m = MINUTES % 60;
var h = (MINUTES-m)/60;
var HHMM = h.toString() + ":" + (m<10?"0":"") + m.toString();
return HHMM;
};
function getHoursLabels () {
for (var i = 0; i <= MinLables.length; i++)
HourLabels.push(parseMinToHours(MinLables[i]));
};
getHoursLabels();
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: HourLabels,
datasets: [{
label: "Messwert",
xAxisID:'xAxis0',
data: [196.0, 222.0, 251.0, 272, 258, 298, 293, 235, 269, 226, 223, 242, 246, 290, 267, 261, 285, 274, 243, 200, 197, 203, 219, 269, 238, 268, 271, 280, 252, 266, 282, 296, 289, 300, 291],
lineTension: 0,
fill: false,
borderColor: 'orange',
backgroundColor: 'transparent',
borderDash: [5, 5],
pointBorderColor: 'orange',
pointBackgroundColor: 'rgba(255,150,0,0.5)',
pointRadius: 5,
pointHoverRadius: 10,
pointHitRadius: 30,
pointBorderWidth: 2,
pointStyle: 'rectRounded'
}]
},
options:{
responsive: true,
maintainAspectRatio: false,
legend: {
display: true,
position: "left",
labels: {
fontColor: 'rgb(255, 99, 132)'
}},
scales:{
xAxes:[
{
id:'xAxis0',
time: {
parser: 'h',
unit: 'hour',
stepSize:1,
displayFormats: {
'minute': 'h',
'hour': 'h',
min: '00:00',
max: '23:59'
},
},
}],
yAxes:[{
ticks:{
beginAtZero:true
}
}]
}
}
});
无论我为什么在那儿打字,及时的 displayFormats 选项似乎都没有任何影响......
解决方案
无论我为什么在那儿打字,及时的 displayFormats 选项似乎都没有任何影响......
因为 Chart.js 没有被告知使用time
类型轴,例如:
xAxes: [{
id: 'xAxis0',
type: "time", // <-- add this line.
time: {
...
此外,应该使用for
循环 in而不是,否则它会遍历输入数组的末尾并附加到结果数组。getHoursLabels
<
<=
NaN:NaN
此外,您displayFormats
可以简化为:
displayFormats: {
hour: 'H'
}
这是一个完整的工作示例:
var ctx = document.getElementById('myChart');
var HourLabels = [];
MinLables = [54, 83, 155, 192, 206, 238, 285, 307, 335, 367, 431, 444, 495, 548, 604, 651, 680, 721, 777, 789, 859, 936, 980, 1004, 1047, 1089, 1122, 1135, 1200, 1245, 1323, 1381, 1396]
function parseMinToHours(x) {
MINUTES = x;
var m = MINUTES % 60;
var h = (MINUTES - m) / 60;
var HHMM = h.toString() + ":" + (m < 10 ? "0" : "") + m.toString();
return HHMM;
};
function getHoursLabels() {
for (var i = 0; i < MinLables.length; i++) // not <=, only < !!!
HourLabels.push(parseMinToHours(MinLables[i]));
};
getHoursLabels();
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: HourLabels,
datasets: [{
label: "Messwert",
xAxisID: 'xAxis0',
data: [196.0, 222.0, 251.0, 272, 258, 298, 293, 235, 269, 226, 223, 242, 246, 290, 267, 261, 285, 274, 243, 200, 197, 203, 219, 269, 238, 268, 271, 280, 252, 266, 282, 296, 289, 300, 291],
lineTension: 0,
fill: false,
borderColor: 'orange',
backgroundColor: 'transparent',
borderDash: [5, 5],
pointBorderColor: 'orange',
pointBackgroundColor: 'rgba(255,150,0,0.5)',
pointRadius: 5,
pointHoverRadius: 10,
pointHitRadius: 30,
pointBorderWidth: 2,
pointStyle: 'rectRounded'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: true,
position: "left",
labels: {
fontColor: 'rgb(255, 99, 132)'
}
},
scales: {
xAxes: [{
id: 'xAxis0',
type: "time", // add this!
time: {
parser: 'H:m',
unit: 'hour',
stepSize: 1,
min: '00:00',
max: '23:59',
displayFormats: {
hour: 'H', // change to uppercase 'H'.
}
},
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>
推荐阅读
- java - java.lang.RuntimeException:无法启动活动 ComponentInfo - FirebaseListAdapter 空对象
- html - Angularjs - 在单击特定链接时滚动到特定 div 位置时无法折叠特定 div
- powershell - 为什么只有 1 行的 DataTable.Load 的结果表现得好像是 DataRow 而不是 DataTable?
- c++ - 在 pcl 查看器中绘制样条曲线
- c# - 带有 Crystal Quartz 调度程序的应用程序 ASP.NET Core 不适用于远程调度程序
- c# - 无法将类型字符串隐式转换为 serilog.formatting.ITextformatter
- php - 如何使用 PhpSpreadsheet 冻结上一行
- django - Django 加载 ES6 javascript 文件
- angular - 安装 npm install -g @angular/cli 时出错
- java - 在 Spring MVC 中使用属性前缀