Как добавить событие onclick на метку диаграммы в react-chartjs-2?

Я хочу открыть диалоговое окно при нажатии на метку диаграммы 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];
  }
}

};


reactjs javascript charts react-chartjs
person Shashank Dubey    schedule 21.01.2021    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Все, что вам нужно сделать, это просто добавить обратный вызов 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])
        }
}}
person Sanoodia    schedule 21.01.2021
comment
Это сработало Спасибо! - person Shashank Dubey; 21.01.2021
comment
Добро пожаловать друг:) - person Sanoodia; 21.01.2021
comment
Я не могу получить данные из наборов данных, вы можете сказать, что мне здесь не хватает. Его нужно проверить, какая метка нажата, я получаю нулевую длину элемента - person Shashank Dubey; 21.01.2021
comment
Этот onClick работает везде, где я нажимаю на диаграмму, а не только на метку. - person Shashank Dubey; 21.01.2021
comment
если вы получаете нулевую длину элемента, это означает, что вы не щелкнули по элементу набора данных, вы просто щелкнули по диаграмме ... поэтому вам нужно проверить, больше ли длина элемента, чем 0, это означает, что вы щелкнули по действительному элементу диаграммы - person Sanoodia; 21.01.2021
comment
Я также обновил свой ответ, проверьте это - person Sanoodia; 21.01.2021

arrow_upward
0
arrow_downward

Вам нужно получить реф и добавить событие 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}/>
  )
}
person Marat Tynarbekov    schedule 26.05.2021