使用generateLabel时Chart.js图例标签删除线功能失效求助

你遇到的问题根源是：自定义generateLabels实现文本截断和样式调整时，漏掉了默认删除线依赖的textDecoration属性，导致点击图例标签时没有删除线效果。之前单独编写插件搞崩其他功能，是因为插件覆盖了Chart.js的默认逻辑，干扰了tooltip、零数据过滤等功能的正常运行。

直接修改generateLabels即可解决问题，无需额外插件，既能恢复删除线切换功能，又能完整保留所有原有特性：

const outsourcedProductionNames = ["Development", "Content", "Design"];
const outsourcedProductionCounts = new Array(outsourcedProductionNames.length).fill(0);

// 文本截断加省略号
function truncateText(text, maxLength) {
    if (text.length > maxLength) {
        return text.substring(0, maxLength) + '...';
    }
    return text;
}

// 生成区分色值
function generateDistinctColors(count) {
    const colors = [];
    for (let i = 0; i < count; i++) {
        const hue = i * (360 / count);
        colors.push(`hsl(${hue}, 100%, 75%)`);
    }
    return colors;
}

const colors = generateDistinctColors(outsourcedProductionNames.length);

const ctx = document.getElementById('allChartsOutsourcedProduction').getContext('2d');
new Chart(ctx, {
    type: 'pie',
    data: {
        labels: outsourcedProductionNames,
        datasets: [{
            label: 'Outsourced Production',
            data: outsourcedProductionCounts,
            backgroundColor: colors,
            borderColor: 'white',
            borderWidth: 2
        }]
    },
    options: {
        aspectRatio: 1.5,
        plugins: {
            legend: {
                labels: {
                    // 保留零数据过滤逻辑
                    filter: (legendItem, data) => data.datasets[0].data[legendItem.index] != 0,
                    generateLabels: function(chart) {
                        return chart.data.labels.map((label, index) => {
                            const isHidden = chart.getDatasetMeta(0).data[index].hidden;
                            return {
                                text: truncateText(label, 20),
                                fillStyle: chart.data.datasets[0].backgroundColor[index],
                                strokeStyle: undefined,
                                lineWidth: 0,
                                hidden: isHidden,
                                // 核心修改：根据数据隐藏状态设置删除线
                                textDecoration: isHidden ? 'line-through' : 'none',
                                index: index
                            };
                        });
                    }
                }
            },
            tooltip: {
                // 保留原有tooltip样式配置
                titleFont: {
                    family: "sans-serif",
                    weight: 900
                },
                callbacks: {
                    label: data => (' ' + data.parsed + ' Projects')
                }
            }
        }
    }
});

关键说明 #

• 在generateLabels返回的标签对象中添加textDecoration属性，根据数据项的hidden状态动态切换line-through（删除线）和none（正常显示）
• 完整保留了文本截断、零数据过滤、tooltip样式等原有配置，避免功能冲突
• 依赖Chart.js默认的图例点击事件同步数据显示/隐藏状态，无需额外编写插件，稳定性更高

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