我正在使用React构建一个带有圆环图和条形图的项目。
我正在尝试使我的自定义图例发挥作用。我希望在用户单击我的图例项时使数据部分消失-就像在本机图例中一样，并且最好还删除数据，使图表在删除后显示更新的数据。
我还使用数据标签来表示分数上数据的百分比。

import ChartDataLabels from 'chartjs-plugin-datalabels';

我偶然发现了这个主题：ChartJS - Show/hide data individually instead of entire dataset on bar/line charts，并在此处使用了以下建议的代码：

function chartOnClick(evt) {
    let chart = evt.chart
    const points = chart.getElementsAtEventForMode(evt, 'nearest', {}, true);

    if (points.length) {
        const firstPoint = points[0];
        //var label = myChart.data.labels[firstPoint.index];
        //var value = myChart.data.datasets[firstPoint.datasetIndex].data[firstPoint.index];
        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()方法在激活时不会删除分数的百分比数据标签，而当单击本Map例时，它会完全删除分数的百分比数据标签。

我试着在插件的文档中查找，但没有找到如何删除单个标签。
我怎样才能实现我所追求的目标？

编辑：选项对象：

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, <-- this works and makes all of the data labels disappear
    },
  },
};