Chart.js图例点击无删除线效果问题排查

问题描述 #

点击Chart.js图例时，图例文本没有显示预期的删除线效果，请问问题出在哪里？

代码示例 #

JavaScript代码 #

const autocolors = window['chartjs-plugin-autocolors'];

Chart.register(autocolors);

var options = {
  type: 'line',
  data: {
    labels: ["0", "1", "2", "3", "4", "5"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3]
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7]
      },
      {
        label: '# of People',
        data: [3, 1, 15, 4, 9, 12]
      }
    ]
  },
  options: {
    plugins: {
      autocolors: {
         mode: 'dataset'
      },

legend: {
        onClick: (evt, legendItem, legend) => {
          //console.log(legendItem);
          const index = legendItem.datasetIndex;
          const ci = legend.chart;
          
          legend.chart.data.datasets.forEach((d, i) => {
            ci.hide(i);
            d.hidden = true;
          })

          ci.show(index);
          legendItem.hidden = false;

          ci.update();
        },
        labels: {
          generateLabels: (chart) => {
            const datasets = chart.data.datasets;

            legends = [];
            for(let i=0;i<datasets.length;i++){
              //console.log(datasets[i].data);
              let total = datasets[i].data.reduce((total, item) => total + item);
              //console.log(datasets[i].borderColor);
              legends.push({text: `${datasets[i].label} (${total.toLocaleString()})`, fillStyle: datasets[i].borderColor, datasetIndex:i});
            }

            return legends;
          }
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

HTML代码 #

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-autocolors"></script>
</body>

问题原因 #

1. 自定义图例项缺失hidden状态：Chart.js判断是否给图例加删除线，完全依赖generateLabels返回的每个图例对象中的hidden属性。你当前的代码在生成图例时，没有把数据集的hidden状态同步到返回的对象里，Chart.js根本不知道哪些图例项需要显示删除线。

2. 点击事件的状态同步错误：在自定义的onClick逻辑里，你直接修改了legendItem.hidden，但没有确保这个状态和数据集的hidden属性保持一致。而且后续调用ci.update()时，generateLabels会重新生成图例项，此时又没有读取数据集的hidden状态，导致状态完全丢失，删除线自然无法显示。

3. 额外隐患：legends变量没有用let或const声明，属于全局变量，容易引发其他意外问题。

修复方案 #

1. 完善generateLabels方法，同步hidden状态 #

修改generateLabels，在生成图例项时加入hidden属性，同步对应数据集的隐藏状态：

generateLabels: (chart) => {
  const datasets = chart.data.datasets;
  const legends = []; // 用const声明变量，避免全局污染
  for(let i=0;i<datasets.length;i++){
    let total = datasets[i].data.reduce((total, item) => total + item);
    legends.push({
      text: `${datasets[i].label} (${total.toLocaleString()})`,
      fillStyle: datasets[i].borderColor,
      datasetIndex:i,
      hidden: datasets[i].hidden ?? false // 同步数据集的hidden状态，默认false
    });
  }
  return legends;
}

2. 修改onClick逻辑，正确同步数据集状态 #

不要直接操作legendItem.hidden，而是修改数据集的hidden属性，让Chart.js自动处理图例状态：

onClick: (evt, legendItem, legend) => {
  const index = legendItem.datasetIndex;
  const ci = legend.chart;
  
  // 将所有数据集设为隐藏
  ci.data.datasets.forEach((d) => {
    d.hidden = true;
  });
  // 将点击的数据集设为显示
  ci.data.datasets[index].hidden = false;
  
  ci.update();
}

这样修改后，点击图例时，对应的数据集状态会正确同步到图例项，Chart.js就能根据hidden属性自动显示删除线了。

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