Plotly.js возвращает неожиданные данные при возникновении события plotly_click

Question

• https://plot.ly/javascript/plotlyjs-events/#click-event
• https://plot.ly/javascript/click-events/#click-event-data
• https://community.plot.ly/t/documentation-on-plotly-hover-and-click-events/833

У меня проблемы с привязкой события 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);

Вот как я связываю событие click:

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

(Я выяснил свою проблему в середине написания этого вопроса, но в духе Самоответ на документ для других Я подумал, что я все еще оставлю вопрос и отвечу на негоя.)

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, …}
    ]

}

Оттуда мы можем извлекать данные из каждой точки, как это документировано.