如何在 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,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}/>
  )
}