Plotly.js中plotly_click事件返回数据与文档不符问题

你碰到的这个问题其实是jQuery事件绑定的特性导致的，我来给你掰扯清楚：

当你用jQuery的on()方法绑定Plotly的plotly_click事件时，回调函数的第一个参数是jQuery封装后的事件对象（也就是你现在打印出来的包含currentTarget、delegateTarget这些属性的对象），而Plotly官方文档里描述的包含points数组的事件数据，其实是作为第二个参数传递给回调函数的。

你之前的代码只接收了第一个参数，自然拿不到想要的结构。解决方法有两种：

方法一：使用原生DOM事件绑定（推荐） #

直接用原生JS的addEventListener绑定事件，回调的第一个参数就是Plotly的事件数据：

document.getElementById('my-plotly-bar-chart').addEventListener('plotly_click', function(plotlyEventData) {
  console.log(plotlyEventData); // 这里就能看到包含points数组的结构了
});

方法二：保留jQuery绑定，接收第二个参数 #

如果你习惯用jQuery，只需要在回调里多接收一个参数，这个参数就是Plotly的事件数据：

$('#my-plotly-bar-chart').on('plotly_click', function(jqEvent, plotlyEventData) {
  console.log(plotlyEventData); // 这个才是你要的官方文档里的结构
});

简单来说，就是jQuery把自己的事件对象放在了第一个参数位，而Plotly的自定义数据在第二个位置，只要调整参数接收，就能拿到正确的点击点信息啦。

内容的提问来源于stack exchange，提问作者koolahman