Chart.js环形图点击图例添加删除线失效问题求助

问题原因 #

直接修改legendItem.hidden不会触发图例样式更新，因为Chart.js在图表更新时会重新生成图例项，手动修改的状态会被覆盖。需要通过Chart.js内置的状态管理机制，或者自定义图例标签生成逻辑来实现删除线效果。

解决方案一：使用内置隐藏机制（推荐） #

通过操作图表元数据的hidden属性来控制数据点的显示/隐藏，Chart.js会自动同步图例的删除线样式：

public doughnutChartOptions: ChartConfiguration<'doughnut'>['options'] = {
    responsive: true,
    plugins: {
      legend: {
        display: true,
        onClick: (evt, legendItem, legend) => {
          const index = legendItem.index;
          const ci = legend.chart;
          // 获取数据集元数据
          const meta = ci.getDatasetMeta(0);
          
          // 切换对应数据点的隐藏状态
          meta.data[index].hidden = !meta.data[index].hidden;
          
          // 同步你的自定义变量（按需保留）
          this.holiShow = !this.holiShow;
          
          ci.update();
        },
      },
    },
    cutout: '80%',
  };

解决方案二：保留数据置0逻辑，自定义图例样式 #

如果需要保留将数据设为0的业务逻辑，同时给图例添加删除线，可通过自定义generateLabels方法手动控制样式：

public doughnutChartOptions: ChartConfiguration<'doughnut'>['options'] = {
    responsive: true,
    plugins: {
      legend: {
        display: true,
        onClick: (evt, legendItem, legend) => {
          const index = legendItem.index;
          const ci = legend.chart;
          
          // 切换数据值（0或原始值）
          ci.data.datasets[0].data[index] = ci.data.datasets[0].data[index] === 0 
            ? this.entitle[this.year][this.code][legendItem.text] 
            : 0;
          
          this.holiShow = !this.holiShow;
          ci.update();
        },
        labels: {
          generateLabels: (chart) => {
            const dataset = chart.data.datasets[0];
            return dataset.data.map((value, index) => ({
              text: chart.data.labels[index], // 替换为你的图例文本逻辑
              fillStyle: dataset.backgroundColor[index],
              hidden: value === 0,
              textStyle: {
                // 数据为0时添加删除线
                textDecoration: value === 0 ? 'line-through' : 'none'
              }
            }));
          }
        }
      },
    },
    cutout: '80%',
  };

内容的提问来源于stack exchange，提问作者R. Baraiya