React中Chart.js 3.x自定义图例hide()无法移除数据标签

我正在用React开发包含环形图和条形图的项目，采用Chart.js 3.xx版本。需求是实现自定义图例交互：点击图例项时，对应数据片段像原生图例那样隐藏，同时移除对应数据并让图表展示更新后的数据。另外我还用到了ChartDataLabels插件在数据片段上显示百分比。

import ChartDataLabels from 'chartjs-plugin-datalabels';

我参考了相关方案，使用了下面的点击事件代码：

function chartOnClick(evt) {
    let chart = evt.chart
    const points = chart.getElementsAtEventForMode(evt, 'nearest', {}, true);
    
    if (points.length) {
        const firstPoint = points[0];
        let datasetIndex = firstPoint.datasetIndex, index = firstPoint.index;
        
        if (firstPoint.element.hidden != true) {
            chart.hide(datasetIndex, index);
        } else {
            chart.show(datasetIndex, index);
        }
    }
}

options: { // chart options
    onClick: chartOnClick
}

功能基本正常，但调用hide()方法时，对应数据片段的百分比标签没有被移除，而点击原生图例却能完全移除该标签。

我的环形图配置如下：

export const doughnutOptsObj = {
  onClick: chartOnClick,
  responsive: true,
  maintainAspectRatio: false,
  layout: { padding: { top: 16, bottom: 16 } },
  hoverOffset: 32,
  plugins: {
    legend: {
      display: true,
      position: 'bottom',
    },
    datalabels: {
      formatter: (value, dnct1) => {
        let sum = 0;
        let dataArr = dnct1.chart.data.datasets[0].data;
        dataArr.map((data) => {
          sum += Number(data);
        });

        let percentage = ((value * 100) / sum).toFixed() + '%';
        return percentage;
      },
      color: ['#fbfcfd'],
      font: { weight: 'bold' },
      // display: false, <-- 这个设置可以让所有数据标签消失
    },
  },
};

我查了插件文档，但没找到移除单个标签的方法，该怎么实现需求？

问题核心是chart.hide()仅隐藏图表数据元素，但不会同步通知ChartDataLabels插件隐藏对应标签。以下是两种可行的解决方法：

方法一：通过插件display回调自动判断状态 #

修改datalabels配置，添加display回调函数，让插件根据数据元素的隐藏状态决定是否显示标签：

datalabels: {
  formatter: (value, dnct1) => {
    // 优化求和逻辑，用reduce更高效
    const sum = dnct1.chart.data.datasets[0].data.reduce((acc, curr) => acc + Number(curr), 0);
    const percentage = ((value * 100) / sum).toFixed() + '%';
    return percentage;
  },
  color: ['#fbfcfd'],
  font: { weight: 'bold' },
  // 添加display回调，判断元素是否隐藏
  display: (context) => {
    const element = context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex];
    return !element.hidden;
  }
}

这种方式是插件原生支持的逻辑，每次图表渲染时会自动检查元素状态，确保标签和数据元素的显示状态完全同步，无需手动维护。

方法二：手动控制标签状态并触发重绘 #

在点击事件中，调用hide()/show()后手动更新标签状态，再触发图表重绘：

function chartOnClick(evt) {
    let chart = evt.chart
    const points = chart.getElementsAtEventForMode(evt, 'nearest', {}, true);
    
    if (points.length) {
        const firstPoint = points[0];
        const datasetIndex = firstPoint.datasetIndex;
        const index = firstPoint.index;
        const meta = chart.getDatasetMeta(datasetIndex);
        const element = meta.data[index];
        
        if (!element.hidden) {
            chart.hide(datasetIndex, index);
            // 清空标签内容
            element._model.label = null;
        } else {
            chart.show(datasetIndex, index);
            // 恢复标签时无需手动设置，重绘后插件会自动重新计算
        }
        // 触发重绘更新标签显示
        chart.update();
    }
}

这种方式需要手动维护标签状态，不如方法一简洁，仅在特殊场景下使用。

推荐优先使用方法一，逻辑更清晰且能和Chart.js原生状态保持同步。

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