我可以绑定一个onclick事件并在chartjs中编辑一个点(Can I bind an onclick event and edit a point in chartjs)

我可以绑定一个onclick事件并在chartjs中编辑一个点(Can I bind an onclick event and edit a point in chartjs)

我正在使用chartjs来制作一个小型项目。 我在编辑要点时遇到了一些困惑和运气。

有没有这个库中的任何功能，我可以绑定一个onclick事件，它会显示我弹出，我可以删除点？

以下是我想要的摘要：

单击该点，将出现一个弹出窗口 单击“删除”按钮后，它将删除该点并重绘该点。 现在我只使用简单的折线图这是我的jsFiddle

我正在使用chartjs 2.6

I am using chartjs for making a small project. I am getting some confusion and hard luck in editing the points.

Is there any function in this library I can bind an onclick event to which will show me a pop up and I can remove the point?

Here is the summary what I want:

Click on the point and a popup appear After clicking on the remove button it removed the point and redraw the point. Right now i am only using simple line chart this is my jsFiddle

I am using chartjs 2.6

最满意答案

您可以使用选项中的onclick事件来显示弹出窗口。 然后，您可以使用getElementsAtEvent检查点是否被点击，如果是这样，请将其从选项中删除并更新图表。 我更新了你的jsfiddle 。

var option = { showLines: true, 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); } } } };

You can use the onclick event in the option to show the popup. Then you can check whether a point was clicked with getElementsAtEvent and if so remove it from the options and update the chart. I've updated your jsfiddle.

var option = { showLines: true, 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); } } } };