将小时和分钟添加到时间轴的日期对象

Question

我在使用时间格式时遇到问题。如您所见，我从给定的分钟数到小时数进行计算。现在我需要将前一天的时间“添加”到那些分钟/小时，并用适当的轴标记天数和 HH:mm，例如：对于 starttime var starttime = new Date('2020-03-12T11:00 :00') 我想添加时间来获得第二天的新日期，因为我将加起来 24 小时！我不知道该怎么做。实际上，您可以总结有关向日期对象添加小时和分钟的问题，如果您添加 24 小时，它会给出第二天！

所以，从下面的图表中可以看出，例如。 11:20。我想将开始时间 Date('2020-03-12T11:00:00') 添加到这一小时，以获得同一天的 22 点（我认为是晚上 10 点）或 23 小时，我得到第二天的上午 10 点: 日期('2020-03-13T10:00:00')

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
        }
      }]
    }
  }
});

Answer 1

使用 moment.js 实现这一点相当简单，这正是 Chart.js 期望的时间格式。

代码可以大大简化，如下例所示。

使用 Chart.js time axis display format options 来控制标签的格式。

var ctx = document.getElementById('myChart');
var HourLabels = [];
var 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]

for (let i = 0; i < MinLables.length; i++) {
  let starttime = moment('2020-03-12T11:00:00');
  starttime.add(MinLables[i], 'minutes');
  HourLabels.push(starttime)
}

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",
        time: {
          unit: 'hour',
          stepSize: 1,
          displayFormats: {
            hour: 'H',
          }
        },
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>