我找到了这个有用的链接https://jsfiddle.net/5rz5r9ag/12/,该链接显示了如何使用常规图表js获得onclick事件。与react chart js一起使用时的问题是,我无法像在该示例中那样访问myLineChart对象,因为这不是在react中制作折线图的方式。相反,我的反应当前在render函数中看起来更像这样:
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。
答案 0 :(得分:3)
尝试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:HERE