Как сделать события OnClick для точек в React Chart JS? - PullRequest
Новая
       29

Как сделать события OnClick для точек в React Chart JS?

1 голос
/ 13 января 2020

Я нашел эту полезную ссылку https://jsfiddle.net/5rz5r9ag/12/, которая показывает, как вы можете получать события onclick с обычным графиком js. Проблема использования этого с диаграммой реагирования js заключается в том, что я не могу получить доступ к объекту myLineChart, как это было в этом примере, потому что это не то, как вы строите линейную диаграмму в реакции. Вместо этого моя реакция в настоящее время выглядит больше так в функции рендеринга: 

return (
      <Line
      data={this.state.chartData}
      options={{
        onClick: function(evt) {
          var element = myLineChart.getElementAtEvent(evt);
          if(element.length > 0)
          {
            var ind = element[0]._index;
            if(confirm('Do you want to remove this point?')){
              data.datasets[0].data.splice(ind, 1);
              data.labels.splice(ind, 1);
              myLineChart.update(data);
              }
            }
        },
        ....
      />
);

Я не могу получить доступ к myLineChart в реакции, как они могут в jsfiddle, и поэтому не могу понять, как сделать onClickevent для точек в моей линейной диаграмме.

1 Ответ

1 голос
/ 13 января 2020

попробуйте второй параметр onClick: 

return (
      <Line
      data={this.state.chartData}
      options={{
        onClick: function(evt, element) {
          if(element.length > 0)
          {
            var ind = element[0]._index;
            if(confirm('Do you want to remove this point?')){
              data.datasets[0].data.splice(ind, 1);
              data.labels.splice(ind, 1);
              myLineChart.update(data);
              }
            }
        },
        ....
      />
);

простая строка onClick: ЗДЕСЬ

...