Chart.js环形图如何通过回调使用substr()截断图例标签

可以直接实现，Chart.js 原生提供了图例标签的自定义回调能力，你可以在回调逻辑中使用substr()完成标签截断，具体配置方式如下：

基础配置示例（适配 Chart.js v3/v4 版本） #

const doughnutChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    // 你的数据配置
    labels: ['很长很长的标签文本1', '很长很长的标签文本2', '普通标签'],
    datasets: [{
      data: [30, 50, 20],
    }]
  },
  options: {
    plugins: {
      legend: {
        labels: {
          generateLabels: (chart) => {
            // 先获取默认生成的图例标签列表
            const originLabels = Chart.defaults.plugins.legend.labels.generateLabels(chart);
            // 遍历处理每个标签文本
            originLabels.forEach(item => {
              const maxTextLength = 8; // 自定义最大展示字符数
              if (item.text.length > maxTextLength) {
                // 截断后拼接省略号，不需要可以去掉
                item.text = item.text.substr(0, maxTextLength) + '...';
              }
            })
            return originLabels;
          }
        }
      }
    }
  }
})

注意事项 #

• 如果你使用的是 Chart.js v2 版本，只需要把配置层级调整为options.legend.labels.generateLabels即可，处理逻辑完全一致
• substr()的第一个参数为截断起始索引，第二个参数为截取长度，你可以根据业务需求灵活调整最大字符阈值
• 如果需要保证图例悬浮提示、数据悬浮提示的文本显示逻辑统一，可以对应给tooltip也配置相同的截断回调

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