带有时间字符串标签的步长x轴

Question

这是我的代码部分，目前我正在使用chart.js

var lineChartData = {
labels: ['08:00','08:05','08:10','08:15','08:20','08:25','08:30','08:35','08:40','08:45','08:50','08:55','09:00'],
datasets: [{
label: 'Temperatur (°C)',
borderColor: window.chartColors.red,
backgroundColor: window.chartColors.red,
fill: false,
data: [23,23,23,23,23,23,23,23,23,23,23,23,23],
yAxisID: 'y-axis-1',
cubicInterpolationMode: 'monotone'
}, {
label: 'Feuchtigkeit (%)',
borderColor: window.chartColors.blue,
backgroundColor: window.chartColors.blue,
fill: false,
data: [34,34,34,34,34,34,34,34,34,34,34,34,34],
yAxisID: 'y-axis-2',
cubicInterpolationMode: 'monotone'
}]
};

    window.onload = function() {
        var ctx = document.getElementById('canvas').getContext('2d');
        window.myLine = Chart.Line(ctx, {
            data: lineChartData,
            options: {
                responsive: true,
                hoverMode: 'index',
                stacked: false,                 
                scales: {

                    xAxes: [{
                        ticks: {
                            minRotation: 0,
                            maxRotation: 90
                        }
                    }],
                    yAxes: [{
                        type: 'linear',
                        display: true,
                        position: 'left',
                        id: 'y-axis-1',
                        ticks: {
                            max: 60,
                            min: 0,
                            stepSize: 10
                        }
                    }, 
                    {
                        type: 'linear',
                        display: true,
                        position: 'right',
                        id: 'y-axis-2',
                        ticks: {
                            max: 60,
                            min: 0,
                            stepSize: 10
                        }
                    }],
                }
            }
        });
    };

我的x轴上有彼此之间5分钟的时间字符串标签我将此参数添加到“ xAxes部件”

xAxes: [{
   ticks: {
      minRotation: 0,
      maxRotation: 90
   },
   type: 'time',
   time: {
      unit: 'hour'
   }
}]

现在我的图表不再起作用。只有白页。我认为问题是，我的x轴仅显示字符串时间标签，但显示为字符串，而不显示为时间值。这可能是问题吗？

如果是，我该如何解决？有这样的典范吗？

非常感谢！ ：）

Answer 1

您未提供chartColors对象，因此假定这些颜色并默认添加。另外，我希望您在moment.js库之前安装chart.js库，以便时间类型图表工作。

[除此之外，您提供的labels不是标准的日期格式，例如2020-05-29T08：02：00Z），您需要传递time.parser选项以定义您要指定的仅日期的hours。

window.chartColors = {
'red': '#ff0000',
'blue': '#0000ff'
}
var lineChartData = {
  labels: ['08:00:00', '08:05:00', '08:10:00', '08:15:00', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45', '08:50', '08:55', '09:00'],
  datasets: [{
    label: 'Temperatur (°C)',
    borderColor: window.chartColors.red,
    backgroundColor: window.chartColors.red,
    fill: false,
    data: [23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23],
    yAxisID: 'y-axis-1',
    cubicInterpolationMode: 'monotone'
  }, {
    label: 'Feuchtigkeit (%)',
    borderColor: window.chartColors.blue,
    backgroundColor: window.chartColors.blue,
    fill: false,
    data: [34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34],
    yAxisID: 'y-axis-2',
    cubicInterpolationMode: 'monotone'
  }]
};

function init() {
  var ctx = document.getElementById('canvas').getContext('2d');
  window.myLine = Chart.Line(ctx, {
    data: lineChartData,
    options: {
      responsive: true,
      hoverMode: 'index',
      stacked: false,
      scales: {

        xAxes: [{
          ticks: {
            minRotation: 0,
            maxRotation: 90
          },
          type: 'time',
          time: {
            unit: 'hour',
            parser: 'hh'
          }
        }],
        yAxes: [{
            type: 'linear',
            display: true,
            position: 'left',
            id: 'y-axis-1',
            ticks: {
              max: 60,
              min: 0,
              stepSize: 10
            }
          },
          {
            type: 'linear',
            display: true,
            position: 'right',
            id: 'y-axis-2',
            ticks: {
              max: 60,
              min: 0,
              stepSize: 10
            }
          }
        ],
      }
    }
  });
};
window.onload = init();

正在运行的演示，JSFiddle