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',
}

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

最后一小时
最后一天
上周
上个月

在做“最后一小时”时，输出效果很好。使用minute

执行Last Day时，输出效果很好。使用hour

执行Last Week时，输出非常糟糕。我甚至尝试了9天，但它再次使用hour

并且表明它在一小时内没有“卡住”，当做一个月时，输出是好的。使用day。

现在，虽然我明白为什么会这样做（它需要一定数量的标签，并且标签数量多于几天，因此需要几个小时），我不知道如何修复它。

我想在一周内显示day格式。有没有办法用ChartJS实现这个目标？

我不确定这有什么帮助，但我为每个屏幕显示的数据点数量各不相同，可能是5,000 - 50,000，而且事先也不知道。

加成令人讨厌的是，在右侧，它有时会在标签顶部创建一个标签，因为它创建了大量的步骤。有没有办法解决这个问题？

Answer 1

可以使用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 docs Time Units Section中的更多信息

ChartJS xAxis时间格式不会改变数天

1 个答案: