ChartJS xAxis时间格式几天不变

Question

我有一张ChartJS图表，及时显示数据。

我使用以下时间格式：

displayFormats: {
  millisecond: 'mm:ss',
  second: 'mm:ss',
  minute: 'HH:mm',
  hour: 'HH:mm',
  day: 'MMM DD',
  week: 'MMM DD',
  month: 'YYYY MMM',
  quarter: 'YYYY MMM',
  year: 'YYYY',
}

我让用户从多个选项中选择：

• 最后一小时
• 最后一天
• 上个星期
• 上个月

现在，虽然我确实理解了为什么它会这样做（它需要大量的标签，而且标签比天多，所以它需要几个小时），但我不确定如何修复它。

我想在一周内让它显示day格式。有没有办法用ChartJS实现这一点？

我不确定这是否有帮助，但我为每个屏幕显示的数据点数量各不相同，可以是5000-50000，而且事先也不知道。

额外的是，由于它创建了大量的步骤，有时会在右边的标签上创建一个标签，这非常烦人。有办法解决这个问题吗？

Answer 1

可以使用< code>unit属性强制xAxis使用您想要的单位。例如，如果您希望它以天数而不是小时数来显示，您可以使用如下配置:

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            xAxes: [{
                time: {
                    unit: 'day',
                    displayFormats: {
                        day: 'MMM DD' 
                    }
                }
            }]
        }
    }
});

另一种选择是使用minUnit而不是Unit。这将确保您的图形更好地扩展，因为它将限制要使用的最低显示格式，同时在需要时仍然可以灵活地使用更大的格式。

关于重叠标签问题，调整unitStepSize属性可能会有所帮助。

更多信息请参阅 ChartJS 文档的时间单位部分