Question

似乎不起作用，或者我做错了什么。我将分钟数转换为小时数，例如“ 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选项似乎都没有任何影响...

Answer 1

无论我在哪里键入内容，及时的displayFormats选项似乎都没有任何影响...

因为尚未告知Chart.js使用time类型的轴，例如：

xAxes: [{
    id: 'xAxis0',
    type: "time", // <-- add this line.
    time: {
    ...

此外，for中的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>

chart.JS时间轴标签应为小时格式

1 个答案: