Javascript ChartJS xAxis时间格式不';好几天都不会变

Javascript ChartJS xAxis时间格式不';好几天都不会变,javascript,chart.js,Javascript,Chart.js,我有一个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', } 我允许用户从多个选项中进行选择: 最后一小时

我有一个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

最后一天执行
,输出良好。使用
hour

上周执行
,输出非常糟糕。我甚至试了9天,但它又在使用
hour

为了证明它没有“卡在”小时,当做一个月的时候,输出是好的。使用
day

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

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

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

奖金
在右侧,由于创建了大量的步骤,它有时会在标签的顶部创建一个标签,这是非常恼人的。有没有办法解决这个问题?

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

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            xAxes: [{
                time: {
                    unit: 'day',
                    displayFormats: {
                        day: 'MMM DD' 
                    }
                }
            }]
        }
    }
});
另一种方法是使用
minUnit
而不是
unit
。这将确保您的图形更好地向上扩展,因为它将限制使用最低的显示格式,同时在需要时仍然可以灵活地使用较大的格式

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


更多信息请参见图表js docs

您可以设置一个示例小提琴来演示这一点吗?特别是想了解你的图表配置和输入数据。这很好。它不会实时变化,所以我不能直接切换设备,但如果我事先确定,它确实可以工作。这就解决了这个问题,现在我想知道如何在不重新加载整个图表的情况下重新加载图表选项。