react-chartjs-2自定义图例标签格式无效，求修复方案

你的代码核心问题是legend配置嵌套错误——在plugins.legend内部重复嵌套了一层legend，导致你写的labels.generateLabels逻辑根本没被Chart.js读取到。

修正后的代码如下：

const chartJsOptions = (datasetLabels: string[]) => {
    const generateLabel = (text: string) => {
        if (text.endsWith('_365')) {
            return text.replace('_365', ' (LY)');
        } else if (text.endsWith('_Rel_YoY')) {
            return text.replace('_Rel_YoY', ' (% Change)');
        } else if (text.endsWith('_Abs_YoY')) {
            return text.replace('_Abs_YoY', ' (Abs Change)');
        }
        return text;
    };

    return {
        plugins: {         
            legend: { 
                position: 'bottom',
                // 直接在这里配置labels，不要嵌套额外的legend节点
                labels: {
                    generateLabels: function(chart: any) {
                        // 获取默认生成的标签数组
                        const originalLabels = chart.defaults.plugins.legend.labels.generateLabels.call(this, chart);
                        // 遍历替换每个标签的文本
                        return originalLabels.map(label => ({
                            ...label,
                            text: generateLabel(label.text)
                        }));
                    }
                }
            },
        }
    };
}

关键修正点： #

• 移除了plugins.legend内部多余的嵌套legend对象，把labels配置直接放在外层legend下，这是Chart.js的正确配置结构
• 用map替代for循环，简化了标签文本的替换逻辑（功能和原来一致，写法更简洁）

这样修改后，图例文本就会按照你的规则自动转换：

• Clicks_365 → Clicks (LY)
• Clicks_Rel_YoY → Clicks (% Change)
• Clicks_Abs_YoY → Clicks (Abs Change)

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