'Chart.js'时间表无法正确显示

Question

所以我正在尝试使用chart.js创建一个简单的图表。图表由 y 轴的价格值和 x 轴的时间值组成。数据是从 API 获取的。

y 轴值显示正确，但对于 x 值，它们显示为压缩。这些是我传递到图表中的选项：

options: {
        title: {
          display: false
        },
        legend: {
          display: false
        },
        scales: {
          xAxes: [{
            type: 'time',
            ticks: {
              source: 'data',
              autoSkip: true,
              autoSkipPadding: 50
            },
            time: {
              parser: 'HH:mm',
              tooltipFormat: 'HH:mm',
              unit: 'minute',
              stepSize: 10,
              displayFormats: {
                'minute': 'HH:mm',
                'hour': 'HH:mm'
              }
            }
          }],
          yAxes: [{
            type: 'linear',
            ticks: {
              beginAtZero: false,
              callback: function(value, index, values) {
                return '$' + value;
              }
            }
          }]
        }
}

我尝试调整步长，但它不起作用。出于某种奇怪的原因，无论我如何更改数据，x 轴上的第一个标签都是 15：14。可能是什么问题？

完整的代码可以在这里找到。

提前谢谢。

Answer 1

似乎parser不太好用。 只需删除选项中的parser，您就可以看到清晰的结果。

time: {
  //parser: 'HH:mm',
  tooltipFormat: 'HH:mm',
  unit: 'minute',
  stepSize: 10,
  displayFormats: {
    'minute': 'HH:mm',
    'hour': 'HH:mm'
  }
}