javascript - 我可以绑定(bind)一个onclick事件并在chartjs中编辑一个点吗

标签 javascript chart.js chart.js2 chartjs-2.6.0

我正在使用 Chartjs 制作一个小项目。我在编辑这些点时遇到了一些困惑和运气不佳。

这个库中是否有任何函数可以绑定(bind)一个 onclick 事件,该事件将显示一个弹出窗口,并且我可以删除该点?

这是我想要的摘要:

  1. 点击该点,会出现一个弹出窗口
  2. 单击删除按钮后,它会删除该点并重新绘制该点。 现在我只使用简单的折线图 this is my jsFiddle

我使用的是chartjs 2.6

最佳答案

您可以在option中使用onclick事件显示弹出窗口。 然后你可以用getElementsAtEvent检查是否点击了一个点。如果是这样,请将其从选项中删除,并 update图表。 我已经更新了您的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);
        }
      }
    }
};

关于javascript - 我可以绑定(bind)一个onclick事件并在chartjs中编辑一个点吗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47330122/

相关文章:

javascript - 为什么我不断收到 TypeError : args. sort is not a function?

javascript - "Process is not defined"与react-chartjs-2 CDN

angular - 如何将 Chart.js 与 Typescript 一起使用而不会出现可分配的错误?

javascript - ChartJS 2 - 添加 X 个项目后将数据添加到图表中断

javascript - Chart.js v2 - 组合堆叠条形图和 2 个非堆叠线

javascript - CSS/JS Checked 复选框应该是 "line out"待办事项列表应用程序中的 <li> 元素

javascript - 如何增加数据表中的列宽

javascript - 在回调函数中保留 "this"

javascript - 向 Chart.js 添加水印/ Logo

javascript - 如何消除 Tornado /条形图中的缺点