ChartJS 3+ x轴仅显示完整moment对象而非月份年份问题求助

问题修复方案 #

1. 先解决Invalid scale configuration for scale: x报错 #

这个报错基本都是配置写法和你使用的ChartJS版本不匹配导致的，核心排查点：

• 依赖引入顺序必须为 moment.js → chartjs-adapter-moment → Chart.js，顺序错误会导致适配器无法挂载，触发配置校验失败
• 停止使用v2版本的旧配置写法：v2中x轴配置写在scales.xAxes数组中，v3及以上版本已经废弃该语法，改为直接在scales下声明x对象作为配置项，旧写法会直接触发该报错
• 必须显式将x轴的type属性设置为time，否则时间相关配置不会生效，也可能触发配置校验错误

2. 配置x轴仅展示月份+年份 #

你需要在x轴配置的time属性下设置displayFormats指定月份刻度的显示格式，还可以通过unit强制刻度按照月份划分，参考正确配置示例：

const chartConfig = {
  type: 'line',
  data: {/* 你的数据配置 */},
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          // 强制刻度以月为单位
          unit: 'month',
          // 自定义月份刻度的显示格式，可根据需求调整为'YYYY-MM'等格式
          displayFormats: {
            month: 'MMM YYYY'
          }
        }
      }
    }
  }
}

3. 验证moment适配器是否生效 #

在初始化图表前执行以下代码，控制台输出的适配器实例如果包含moment相关调用逻辑，说明适配器已正常加载：

console.log(Chart.registry.getAdapter('date'))

额外注意点 #

如果你的x轴数据是字符串格式的日期，建议提前用moment(日期字符串)转换为moment对象再传入数据集，避免ChartJS自动解析日期出错。

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