Chart.js修改图例文本引发布局错位、点击异常如何解决

需要缩短Chart.js饼图的图例文本，最初使用beforeRender插件钩子修改图例文字，但图表绘制完成后仍保留原始标签的尺寸参数，出现两个异常：

• 图例整体向左偏移，无法居中
• 点击橙色图例项时，会错误切换前面其他图例项的显示状态

后续尝试在beforeDraw钩子中执行相同修改逻辑，出现完全一致的问题；改用beforeInit或beforeLayout钩子执行修改时，图例还未完成创建，无法获取到图例项进行修改。
核心诉求为：是否有方法可以让图表基于修改后的新文本重新计算布局、重绘图例？或是存在正确的修改图例文本的方式，能让图例正常渲染？

JavaScript 部分 #

var ctx = document.getElementById("canvas").getContext("2d");

window.myBar = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['red - some other text that appears after', 'blue - some other text that appears after', 'green - some other text that appears after', 'orange - some other text that appears after'],
    datasets: [{
      data: [4, 2, 10, 3],
      backgroundColor: ['red', 'blue', 'green', 'orange'],
    }],
  },
  options: {
    responsive: true,
  },
  plugins: [{
    beforeRender: chart => {
      chart.legend.legendItems.forEach(label => {
        const labelParts = label.text.split(' - ');
        const newLabel = label;
        newLabel.text = labelParts[0];

        return newLabel;
      });
    },
  }],
});

HTML 部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>

<div style="width: 100%">
  <canvas id="canvas"></canvas>
</div>

直接在beforeRender/beforeDraw阶段修改chart.legend.legendItems的文本无法生效：图例的布局总宽度、点击热区坐标在这两个钩子执行前，就已经基于原始长文本计算完成，仅修改显示用的文本字段不会触发布局重算，自然会出现居中偏移、点击错位的问题。而beforeInit/beforeLayout执行阶段图例实例还未完成初始化，自然无法获取到已生成的图例项。

不要在渲染类钩子中修改已生成的图例项，直接使用官方提供的图例配置项legend.labels.generateLabels自定义图例文本即可。这个回调会在图例布局计算前执行，返回的文本会直接参与宽度、热区位置的计算，从根源上避免错位问题。

修改后的完整JS代码如下：

var ctx = document.getElementById("canvas").getContext("2d");

window.myBar = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['red - some other text that appears after', 'blue - some other text that appears after', 'green - some other text that appears after', 'orange - some other text that appears after'],
    datasets: [{
      data: [4, 2, 10, 3],
      backgroundColor: ['red', 'blue', 'green', 'orange'],
    }],
  },
  options: {
    responsive: true,
    legend: {
      labels: {
        generateLabels: (chart) => {
          // 获取默认生成的原始图例项
          const originLabels = Chart.defaults.pie.legend.labels.generateLabels(chart);
          // 遍历处理文本
          return originLabels.map(label => {
            label.text = label.text.split(' - ')[0];
            return label;
          });
        }
      }
    }
  }
});

该方案的优势：

• 无需编写自定义插件，直接使用官方公开配置，兼容性稳定
• 图例总宽度基于修改后的短文本计算，可自动居中
• 点击热区与图例项一一对应，不会出现点击错位切换的问题
• 全版本兼容Chart.js 2.x分支，当前使用的2.9.4版本可直接运行

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