IT技术 - 如何在 react-chartjs-2 中的图表标签上添加 onclick 事件？ - 吾爱随笔录

我想在单击图表 js 标签时打开一个对话框。这是数据集代码：-

const data = {
datasets: [
  {
    label: 'Reviews',
    backgroundColor: theme.palette.primary.main,
    data: dataProp.reviews,
    barThickness: 12,
    maxBarThickness: 10,
    barPercentage: 0.5,
    categoryPercentage: 0.5
  },
  {
    label: 'Talents',
    backgroundColor: theme.palette.secondary.main,
    data: dataProp.talents,
    barThickness: 12,
    maxBarThickness: 10,
    barPercentage: 0.5,
    categoryPercentage: 0.5
  }
],
labels

};

这是图表创建的屏幕截图。我知道如何在图例上设置 onclick 但如何在标签上设置 onClick ？

我在选项中尝试过这个，但它不起作用并给我错误

const options = {
responsive: true,
maintainAspectRatio: false,
animation: false,
cornerRadius: 20,
legend: {
  display: false
},
layout: {
  padding: 0
},
scales: {
  xAxes: [
    {
    }
  ],
  yAxes: [
    {
      
    }
  ]
},
tooltips: {
  
},
onClick: function(evt, element) {
  if (element.length > 0) {
    console.log(element);
    // you can also get dataset of your selected element
    data.datasets[element[0]._datasetIndex].data[element[0]._index];
  }
}

};

options={{ ..... onClick: function(evt, element) { if(element.length > 0) { console.log(element,element[0]._datasetInde) // you can also get dataset of your selected element console.log(data.datasets[element[0]._datasetIndex]) } }}

import { Bar } from 'react-chartjs-2' import { Chart } from 'chart.js' const BarChart = () => { const chartRef = useRef<HTMLCanvasElement>(null) ... return ( <Bar type='horizontalBar' data={chartData} ref={chartRef} getElementAtEvent={(i: any, event: any) => { if (chartRef.current) { const chart = Chart.getChart(chartRef.current) const clickedElements = chart!.getElementsAtEventForMode(event, 'y',{axis: 'x', intersect: false}, true) if (clickedElements.length > 0) { console.log(clickedElements[0].index) // Here clicked label | data index } } }} options={options}/> ) }