Plotly.js returns 触发 'plotly_click' 事件时的意外数据

Question

我无法将 plotly_click 事件绑定到 plotly.js 中的条形图。从我看到的所有文档/posts（见上面的链接）来看，从事件传递到回调的数据的结构应该如下所示：

{
  points: [{
    curveNumber: 2,  // index in data of the trace associated with the selected point 
    pointNumber: 2,  // index of the selected point
    x: 5,        // x value
    y: 600,      // y value
    data: {/* */},       // ref to the trace as sent to Plotly.plot associated with the selected point
    fullData: {/* */},   // ref to the trace including all the defaults
   xaxis: {/* */},   // ref to x-axis object (i.e layout.xaxis) associated with the selected point
   yaxis: {/* */}    // ref to y-axis object " "
  }, {
    /* similarly for other selected points */
  }]
}

但是，当我的点击事件被触发时，我看到以下内容：

{
  currentTarget: div#containers-per-month-chart.js-plotly-plot
  data: undefined
  delegateTarget: div#containers-per-month-chart.js-plotly-plot
  handleObj: {type: "plotly_click", origType: "plotly_click", data: undefined, handler: ƒ, guid: 37, …}
  isTrigger: 3
  jQuery111208711647541870211: true
  namespace: ""
  namespace_re: null
  result: undefined
  target: div#containers-per-month-chart.js-plotly-plot
  timeStamp: 1572448651720
  type: "plotly_click"
  __proto__: Object
}

有人知道为什么我收到的 json 与记录的不同吗？我正在创建我的图表并绑定点击事件，如文档所示。

以下是我创建图表的方式：

Plotly.newPlot('my-plotly-bar-chart', data, layout, config);

下面是我如何绑定点击事件：

$('#my-plotly-bar-chart').on('plotly_click', function (data) {
                    console.log(data)
                });

（我在写这个问题的过程中发现了我的问题，但本着 Self Answering to Document for others 的精神，我想我仍然会 post 这个问题并自己回答。）

Answer 1

我正在使用 Plotly.js v1.50.1

出现此问题是因为应将点击事件设置为在回调函数中接受两个参数，而不是文档中所示的一个参数。

如文件所示：

var myPlot = document.getElementById('myDiv');

// ... other setup here...

Plotly.newPlot('myDiv', data, layout);

myPlot.on('plotly_click', function(data){
  // do some stuff
});

但是，我的解决方案如下：

var myPlot = document.getElementById('myDiv');

// ... other setup here...

Plotly.newPlot('myDiv', data, layout);

myPlot.on('plotly_click', function(arg1,arg2){
  // do some stuff
});

arg2就是我们要的对象，长得像

{
    event: { ... }
    points: [
      {data: {…}, fullData: {…}, curveNumber: 0, pointNumber: 0, pointIndex: 0, …}
      {data: {…}, fullData: {…}, curveNumber: 1, pointNumber: 0, pointIndex: 0, …}
    ]

}

从那里，我们可以从每个点提取数据，如文档所述。

Plotly.js returns 触发 'plotly_click' 事件时的意外数据

Plotly.js returns unexpected data when 'plotly_click' event is fired

plotly

plotly.js