【问题标题】:Can I bind an onclick event and edit a point in chartjs我可以绑定 onclick 事件并在 chartjs 中编辑一个点吗
【发布时间】:2017-11-16 12:50:41
【问题描述】:

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

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

这是我想要的摘要:

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

我正在使用 chartjs 2.6

【问题讨论】:

  • 没有。我知道的!但是您可以通过触发事件来打开一个弹出窗口。显示一些代码以获得更好的意见。
  • 我只有一个示例折线图的 jsfiddle 而已。
  • 好的。显示链接!
  • 是的,你可以。库中没有弹出窗口,但您可以自己制作。顺便说一句,你的问题可能会被关闭。最好向我们展示(包括问题)到目前为止你已经尝试过什么(代码明智)来解决它。

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


【解决方案1】:

您可以使用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);
        }
      }
    }
};

【讨论】:

  • @Shiftfty 谢谢你的回复。我不明白弹出点。我必须在事件中包含弹出窗口吗?我可以在这个中使用模态弹出窗口吗?
  • @fatpotato 您不必在事件中包含弹出窗口的初始化,但您必须调用它的 show 方法。如果您的模式有一个按钮,您可以移动代码以删除该点并将图表更新为该按钮的点击事件。
  • 让我测试一下并回复你
  • @fatpotato 你能测试一下吗?
  • @Sgiffty 我真的很抱歉没有接受它。正如你所说,这很好用。谢谢你:)
猜你喜欢
  • 1970-01-01
  • 2013-06-16
  • 1970-01-01
  • 1970-01-01
  • 2021-12-20
  • 1970-01-01
  • 1970-01-01
  • 2019-08-23
相关资源
最近更新 更多