Javascript 如何在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];
  }
}

---

})

您只需在“图形选项”属性中添加onClick回调

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])
        }
}}

---

您需要获取ref，并添加事件

getElementAtEvent

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}/>
  )
}

从'react-chartjs-2'导入{Bar}
从“Chart.js”导入{Chart}
常量条形图=（）=>{
常量chartRef=useRef（空）
...
报税表（{
如果（当前图表参考）{
const chart=chart.getChart（chartRef.current）
常量clickedElements=chart！.getElementsAtEventForMode（事件'y'，{axis:'x'，intersect:false}，true）
如果（单击elements.length>0）{
console.log（clickedElements[0].index）//这里单击了标签|数据索引
}
}
}}
选项={options}/>
)
}

成功了，谢谢！欢迎朋友：）我无法从数据集中获取数据。你能告诉我这里缺少什么吗。它需要检查单击了哪个标签我得到的元素长度为零这个onClick在我单击图表的任何地方都有效，而不仅仅是标签。如果你得到的元素长度为零，那么这表明你没有单击dataset元素，你只是单击了图表。。。所以您必须检查元素的长度是否大于0，这意味着您单击了有效的图表元素