react-chartjs-2（为图例创建自定义标签）

Question

我正在尝试更新react-chartjs-2中图例中的单词格式。

例如：

1. {{name}}_365

   >

   {{name}} (LY)

   （例如，

   Clicks_365

   >

   Clicks (LY)

   ）

2. {{name}}_Rel_YoY

   >

   {{name}} (% Change)

   （例如，

   Clicks_Rel_YoY

   >

   Clicks (% Change)

   ）

这是我尝试过的方法，但我无法让它发挥作用。有什么想法如何修复吗？

const chartJsOptions = (datasetLabels: string[]) => {
    console.log('datasetLabels', datasetLabels)

    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',
                legend: {
                    position: 'bottom',
                    labels: {
                        generateLabels: function(chart: any) {
                            const originalLabelsGenerator = chart.defaults.plugins.legend.labels.generateLabels;
                            const labels = originalLabelsGenerator.call(this, chart);
    
                            for (let i = 0; i < labels.length; i++) {
                                labels[i].text = generateLabel(labels[i].text);
                            }

                            return labels;
                        }
                    }
                },
            },
        }
    };
}

Answer 1

你的传说中有一个传说，我认为这是不正确的

legend: { 
  position: 'bottom',
  legend: {
    position: 'bottom',