在图表中更改图例文字JS引起问题

Question

我正在尝试缩短图表传奇，因此我使用 beforerender 插件来更改传奇文本。但是，一旦绘制了图表，它似乎会保留原始标签的尺寸（请参见下面的摘要，传奇被偏移到左侧而不是中间，如果单击橙色，则可以切换一个早期的项目之一）。

如果我尝试 beforedraw ，并且如果我使用 或 beforelayout ，则会发生同样的情况，则似乎还没有创建传奇。

有什么方法可以获取图表以用新文本重新绘制传奇？或更改传说文本以使其正确呈现？

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;
      });
    },
  }],
});

<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>

Answer 1

更好的方法是使用自定义这样的功能：

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: function(chart) {
          const data = chart.data;
          if (data.labels.length && data.datasets.length) {
            return data.labels.map(function(label, i) {
              const meta = chart.getDatasetMeta(0);
              const style = meta.controller.getStyle(i);

              return {
                text: label.split(' - ')[0],
                fillStyle: style.backgroundColor,
                strokeStyle: style.borderColor,
                lineWidth: style.borderWidth,
                hidden: isNaN(data.datasets[0].data[i]) || meta.data[i].hidden,

                // Extra data used for toggling the correct item
                index: i
              };
            });
          }
          return [];
        }
      }
    }
  },
});

<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>