'Chart.js'时间表未正确显示 [英] 'Chart.js' time chart not displaying properly

问题描述

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

So I'm trying to create a simple chart using chart.js. The chart consists of price values for the y-axis and time values for the x-axis. The data is fetched from an API.

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

The y-axis value are displayed properly, but for the x-values they appear condensed. These are the options I'm passing into the chart:

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 。可能是什么问题？

I've tried adjusting the step size, but it's not working. For some strange reason, the first label on the x-axis is 15:14 no matter how much I change the data. What could be the issue?

完整代码可以找到这里。

预先感谢。

推荐答案

似乎解析器不能很好地工作。只需删除选项中的 parser ，即可看到清晰的结果。

Seems parser doesn't really work well with. simply remove parser in the option, you can see the clear result.

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

这篇关于'Chart.js'时间表未正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！