Chart.js 3.9.1时间格式设置异常与自定义格式解决方法

问题现象 #

使用Chart.js 3.9.1时遇到两个问题：

• 给X轴设置DD-HH:MM:SS时间格式后，显示效果不符合预期
• 数据本该按5分钟间隔递增，实际却变成每秒递增

排查后确认是传入的日期格式无效，导致Chart.js自动启用了默认格式。同时还涉及两个疑问：能不能直接用字符串当X轴标签？怎么自定义日期格式？

原配置代码 #

scales: {
        x: {
          stacked: true,
          position: 'bottom',
          type: chartType,
          time:{
            format:'DD-HH:MM:SS'
          },
          adapters: { 
            date: {
              locale: enUS, 
            },
          }, 
        },
    },

解决方法及最终配置 #

在X轴的time配置项里添加displayFormats，为所有时间粒度统一指定dd-HH:MM:SS格式，就能让自定义时间格式生效。

另外必须注意：传入的日期数据必须是Chart.js能识别的格式，测试阶段可以用Date.parse()校验——如果返回NaN，说明格式无效，得先修正数据格式。

最终生效配置代码：

scales: {
    x: {
      stacked: true,
      position: 'bottom',
      type: chartType,
      time:{
        displayFormats: {
          'millisecond': 'dd-HH:MM:SS',
          'second': 'dd-HH:MM:SS',
          'minute': 'dd-HH:MM:SS',
          'hour': 'dd-HH:MM:SS',
          'day': 'dd-HH:MM:SS',
          'week': 'dd-HH:MM:SS',
          'month': 'dd-HH:MM:SS',
          'quarter': 'dd-HH:MM:SS',
          'year': 'dd-HH:MM:SS'
        }
      },
      adapters: { 
        date: {
          locale: enUS, 
        },
      }, 
    },
},

内容的提问来源于stack exchange，提问作者boredProjects