如何为 React Chart JS 中的点制作 OnClick 事件？答案

【问题标题】：How to make OnClick events for points in a React Chart JS?如何为 React Chart JS 中的点制作 OnClick 事件？
【发布时间】：2020-01-13 15:01:17
【问题描述】：

我发现了这个有用的链接https://jsfiddle.net/5rz5r9ag/12/，它显示了如何使用常规图表 js 获取 onclick 事件。将它与反应图表 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);
              }
            }
        },
        ....
      />
);

我无法像在 jsfiddle 中那样访问 myLineChart，因此无法弄清楚如何为我的折线图中的点创建 onClickevent。

【问题讨论】：

标签： javascript reactjs charts react-chartjs

【解决方案1】：

试试 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);
              }
            }
        },
        ....
      />
);

简单的在线点击：HERE

【讨论】：

这不适用于多个数据集。