chart.JS时间轴标签应为小时格式 [英] chart.JS time axis labels should be just in hours format
本文介绍了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]
函数parseMinToHours（x）{
MINUTES = x;
var m = MINUTES％60;
var h =（MINUTES-m）/ 60;
var HHMM = h.toString（）+： +（m <10？ 0：）+ m.toString（）;
返回HHMM；
};
函数getHoursLabels（）{
for（var i = 0; i< = MinLables.length; i ++）
HourLabels.push（parseMinToHours（MinLables [i]）） ;
};
getHoursLabels（）;
var myChart = new Chart（ctx，{
type：'line'，
数据：{
标签：HourLabels，
数据集：[{{
标签： Messwert，
xAxisID：'xAxis0'，
数据：[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：'橙色'，
pointBackgroundColor：'rgba（255,150,0,0.5）'，
pointRadius：5，
pointHoverRadius：10，
pointHitRadius：30 ，
pointBorderWidth：2，
pointStyle：'rectRounded'
}]
}，
选项：{
自适应：true，
keepAspectRatio：false，
图例：{
显示：true，
位置： left，
标签：{
fontColor：'rgb（255，99，132）'
}}，
比例尺：{
xAxes：[
{
id：'xAxis0'，
时间：{
解析器：'h'，
单位：'hour'，
stepSize：1，
displayFormats：{
'minute'：'h'，
'hour'：'h'，
最小值： 00:00，
最大值： 23:59
}，
}，
}]，
yAxes：[{
ticks：{
beginAtZero：true
}
}]
}
}
}）；
无论何时在此键入内容，displayFormats选项似乎都没有任何影响...
解决方案
< blockquote>
无论我在哪里键入内容，及时的displayFormats选项似乎都没有任何影响...
因为尚未告知Chart.js使用 time 类型轴，例如：
xAxes：[{
id：'xAxis0'，
type： time，//<-添加此行。
时间：{
...
此外，<$ c $ getHoursLabels 中的c> for 循环应使用< 而不是< = ，否则它将迭代输入数组的末尾，并将 NaN：NaN 附加到结果数组。
此外，您的 displayFormats 可以简化为：
displayFormats：{
小时：'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）{MINU TES = 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：{标签：HourLabels，数据集：[{标签： Messwert ，xAxisID： xAxis0，数据：[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，填充：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} ]}，选项：{响应式：true，maintainAspectRatio：false，图例：{display：true，位置： left，标签：{fontColor：'rgb（255，99，132）'}}，比例尺：{xAxes： [{id：'xAxis0'，键入： time，//添加它！时间：{解析器： H：m，单位：小时，stepSize：1，最小值： 00:00，最大值： 23:59，displayFormats：{小时： H，//更改为大写字母 H。 }}，}]，y轴：[{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>
it seems not working or I do something wrong. I converted minutes to hours in format like "1:45" but I want to have the axis ticks only just every whole hours like "0,1,2,3,..." Now, I just have every tick at every odd data point hour...
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
}
}]
}
}
});
The displayFormats option in time does not seem to have any influence regardless whyt I am typing there...
解决方案
The displayFormats option in time does not seem to have any influence regardless whyt I am typing there...
Because Chart.js has not been told to use the time type axis, e.g.:
xAxes: [{
id: 'xAxis0',
type: "time", // <-- add this line.
time: {
...
Also, the for loop in getHoursLabels should use < instead of <= as otherwise it iterates past the end of the input array and appends NaN:NaN to the result array.
Also, your displayFormats can be simplified to:
displayFormats: {
hour: 'H'
}
Here's a fully working example:
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>
这篇关于chart.JS时间轴标签应为小时格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
