Question

我在将plotly_click事件绑定到plotly.js中的条形图时遇到麻烦。从我所见过的所有文档/帖子中（请参见上面的链接），从事件传递到回调的数据应采用以下结构：

{
  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与记录的不同吗？我正在创建图表并绑定文档显示的click事件。

这是我创建图表的方式：

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的精神，我仍然想发布问题并亲自回答。）

Answer 1

我正在使用Plotly.js v1.50.1

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

据记录：

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_click”事件时，Plotly.js返回意外数据

1 个答案: