ChartJS v3.5.1截断canvas标签：ticks回调配置不生效问题求助

根因说明 #

你使用的是Chart.js v2版本的轴配置语法，v3版本已废弃scales.xAxes/scales.yAxes的数组写法，改为直接在scales下配置x/y单个轴对象，同时tooltip相关配置也迁移到了plugins节点下，因此你写的截断逻辑完全没有被触发。

修正后的配置代码 #

options: {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    x: {
      ticks: {
        callback: function (value) {
          // v3版本需要通过该方法获取原始标签内容，value为标签索引
          const originLabel = this.getLabelForValue(value);
          // 仅超过10字符的标签做截断加省略号处理
          return originLabel.length > 10 ? originLabel.substr(0, 10) + '...' : originLabel;
        }
      }
    },
    y: {}
  },
  plugins: {
    tooltip: {
      enabled: true,
      mode: 'label',
      callbacks: {
        // 悬浮tooltip显示完整原始标签，避免信息缺失
        title: function (tooltipItems) {
          return tooltipItems[0].label;
        }
      }
    }
  }
}

原异常效果参考 #

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