chartjs v4 图例文本在使用 afterLayout 时未更新

Question

我使用的是chartjs v4。我正在修改图例文本。我看到代码被执行，但图例文本没有改变。这是代码：

var myChart = new Chart(ctx, {
    type: 'bar',
    plugins: [{
        afterLayout: chart => {
            chart.legend.legendItems.forEach(
                (label) => {
                    label.text += ' Test';
                    return label;
                }
            )
        }
    }],

...

图例标签保持不变（它不会在每个标签末尾添加“Test”）。我缺少什么？不知怎的，有些东西没有被刷新。

Answer 1

标签在图例插件的

afterUpdate

中重新构建 （源代码）， 这就是所谓的稍后 比

afterLayout

；所以，有两种可能性：

• 设置插件代码以更改

  afterUpdate

  中的标签，而不是

  afterLayout

中的标签
• [可能不必要的 hacky] 删除图例插件的

  afterUpdate

  以避免重复计算多余的图例项：

  Chart.registry.getPlugin('legend').afterUpdate = () => null;
  

Answer 2

找到解决方案！解决方案是使用 afterDraw 代替 afterLayout，如下所示：

var myChart = new Chart(ctx, {
            type: 'bar',
            plugins: [{
                afterDraw: (chart, args, opts) => {
                    chart.legend.legendItems.forEach(
                        (label) => {
                            label.text += ' Test ';
                            return label;
                        }
                    )
                }
            }],
...

现在图例文本已成功更新！