Vue3升级后vue-chartjs图例点击无删除线问题求助

问题根源 #

从Vue2搭配旧版Chart.js升级到Vue3搭配Chart.js v3+后，图例相关API出现重大变更：

• 原用于判断数据点隐藏状态的meta.data[i].hidden属性已被废弃，直接访问会返回undefined
• 图例点击切换显示的逻辑不再依赖手动修改hidden属性，需使用Chart.js官方提供的方法

修复方案 #

1. 修正generateLabels中的隐藏状态判断 #

自定义图例文本时，通过chart.getDataVisibility(i)获取数据点的可见状态，以此控制图例标签的删除线显示：

generateLabels: (chart) => {
  const { data } = chart;
  if (data.labels.length && data.datasets.length) {
    return data.labels.map((label, i) => {
      const dataset = data.datasets[0];
      // 获取当前数据点的可见状态，取反得到是否隐藏
      const isHidden = !chart.getDataVisibility(i);
      return {
        text: `${label}: ${dataset.data[i]}`,
        fillStyle: dataset.backgroundColor[i],
        hidden: isHidden, // 正确传递隐藏状态，触发删除线样式
        index: i
      };
    });
  }
  return [];
}

2. 替换图例点击事件逻辑 #

使用Chart.js v3+提供的toggleDataVisibility和update方法，替代旧的手动修改hidden属性的逻辑：

plugins: {
  legend: {
    onClick: (evt, legendItem, legend) => {
      const chart = legend.chart;
      // 切换对应数据点的可见状态
      chart.toggleDataVisibility(legendItem.index);
      // 更新图表
      chart.update();
    },
    generateLabels: /* 上述自定义逻辑 */
  }
}

关键API说明 #

• chart.getDataVisibility(index)：返回指定索引数据点的可见状态（布尔值）
• chart.toggleDataVisibility(index)：切换指定索引数据点的可见状态
• 需确保generateLabels返回的对象包含hidden字段，Chart.js会据此自动应用删除线样式

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