如何在图例单击时添加自定义事件

import React, { useState } from 'react';
import { LineChart, Legend, Line } from 'react-chartjs-2';

const ChartComponent = () => {
  const [legendClickHandler, setLegendClickHandler] = useState({});

  const handleLegendClick = (e, legendItem) => {
    const datasetIndex = legendItem.datasetIndex;
    const chart = e.chart;
    
    // 根据需要添加自定义逻辑
    // ...

    // 示例：显示或隐藏对应的数据系列
    const meta = chart.getDatasetMeta(datasetIndex);
    meta.hidden = meta.hidden === null ? !chart.data.datasets[datasetIndex].hidden : null;
    chart.update();
  };

  const legendClickHandlers = (chart) => {
    if (!chart) return;
    const instance = chart.chartInstance;
    if (!instance.legend.legendItems.length) return;

    instance.legend.legendItems.forEach((legendItem) => {
      const datasetIndex = legendItem.datasetIndex;
      if (!legendClickHandler[datasetIndex]) {
        legendClickHandler[datasetIndex] = (e) => handleLegendClick(e, legendItem);
        instance.legend.legendItems[datasetIndex].legendHitBox.addEventListener('click', legendClickHandler[datasetIndex]);
      }
    });
  };

  return (
    <div>
      <LineChart
        data={{
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
          datasets: [
            {
              label: 'Dataset 1',
              data: [65, 59, 80, 81, 56, 55, 40],
              fill: false,
              borderColor: 'red',
              tension: 0.1
            },
            {
              label: 'Dataset 2',
              data: [28, 48, 40, 19, 86, 27, 90],
              fill: false,
              borderColor: 'blue',
              tension: 0.1
            },
          ],
        }}
        options={{
          plugins: {
            legend: {
              onClick: legendClickHandlers,
            },
          },
        }}
      />
    </div>
  );
};

export default ChartComponent;