Chart.js v3.8.0搭配vue-chartjs v4.1.1时图表subtitle不显示怎么办

按优先级从高到低排查：

• 首先确认是否手动注册了SubTitle插件
  Chart.js v3 版本默认做了Tree Shaking优化，副标题功能不属于默认内置注册的核心模块，漏注册是升级后最常见的触发原因。需要在项目初始化chart的位置手动引入注册：

  import { Chart, SubTitle } from 'chart.js'
  // 注意插件名是大驼峰SubTitle，不要拼错
  Chart.register(SubTitle)
  

• 校验配置层级是否正确
  副标题配置必须和title配置平级，放在options.plugins.subtitle路径下，不要嵌套到title配置对象内部，标准配置结构参考：

  const options = {
    // 其他配置...
    plugins: {
      title: {
        display: true,
        text: '图表主标题'
      },
      // 副标题和主标题平级
      subtitle: {
        display: true,
        text: '图表副标题文本',
        // 建议显式配置样式避免重叠
        color: '#666',
        font: { size: 12 },
        padding: { top: 8, bottom: 12 }
      }
    }
  }
  

• 排查布局遮挡问题
  如果主标题padding配置过大、或者图表画布高度设置不足，副标题可能被挤出可视区域。可以先临时给subtitle设置醒目的颜色（比如红色）、增大上下padding值，确认是否是位置偏移导致的看不见。
• 校验vue-chartjs传参有效性
  确认传递给图表组件的:options参数没有丢失响应式、没有被其他逻辑覆盖，可以在组件onMounted钩子中拿到chart实例，打印chartInstance.options.plugins.subtitle查看配置是否被正确加载。
• 排查第三方插件冲突
  如果项目中引入了其他自定义Chart.js插件，可能会改写标题类元素的渲染逻辑，可以暂时禁用所有非官方插件，单独测试副标题渲染是否恢复正常。

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