Vue-chartjs环形图点击图例时如何正确更新图例样式？

问题核心在于默认Canvas绘制的图例不支持CSS text-decoration样式，且直接修改legendItem对象无法持久化（Chart.js更新时会重新生成图例项）。正确的做法是开启HTML图例模式，结合自定义标签生成逻辑和CSS来实现需求。

步骤1：开启HTML图例模式 #

在Chart配置中开启useHTML: true，让图例以HTML元素渲染，这样就能用CSS控制文字样式：

options: {
  plugins: {
    legend: {
      useHTML: true, // 关键：启用HTML图例
      labels: {
        generateLabels: (chart) => {
          // 获取默认生成的图例项
          const defaultLabels = Chart.defaults.plugins.legend.labels.generateLabels(chart);
          // 遍历修改每个图例项的文本，添加状态类
          return defaultLabels.map(label => {
            const meta = chart.getDatasetMeta(0);
            const isHidden = meta.data[label.index].hidden;
            const statusClass = isHidden ? 'hidden-legend-item' : '';
            // 用span包裹文本并绑定类
            return {
              ...label,
              text: `<span class="${statusClass}">${label.text}</span>`
            };
          });
        },
        font: {
          size: 14,
          weight: 700,
          family: 'Roboto',
        },
        padding: 14,
        color: "#b9b9b9",
      },
      onClick: (e, legendItem, legend) => {
        const chart = legend.chart;
        const index = legendItem.index;
        const meta = chart.getDatasetMeta(0);
        const value = chart.data.datasets[0].data[index];

        // 切换数据段显示/隐藏状态
        meta.data[index].hidden = !meta.data[index].hidden;

        // 更新totalValue计算
        if (meta.data[index].hidden) {
          totalValue.value = roundToTwoDecimals(totalValue.value - value);
        } else {
          totalValue.value = roundToTwoDecimals(totalValue.value + value);
        }

        // 触发图表更新，让generateLabels重新生成带样式的图例项
        chart.update();
      }
    }
  }
}

步骤2：添加CSS样式控制 #

在Vue组件的<style>中添加对应类的样式：

.hidden-legend-item {
  color: #d3d3d3 !important;
  text-decoration: line-through;
}

为什么之前的方案失效？ #

1. 直接修改legendItem对象：Chart.js在执行chart.update()时会重新调用generateLabels生成新的图例项，之前修改的临时对象会被丢弃，无法持久化样式。
2. Canvas图例限制：默认Canvas绘制的图例只能通过Chart.js提供的有限样式属性（如fontColor）控制，不支持text-decoration这类CSS样式，必须启用HTML图例才能实现删除线效果。

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