javascript - 剧情 JS : hover event does not contain points

Question

当鼠标悬停在我的图表上时，我需要 x 轴值。 根据 plotly 文档 ( https://plot.ly/javascript/hover-events/ )，悬停事件回调应该包含字段“points”，我应该从中获取 x 值。

但是如果您查看这个基本示例，您会发现回调不包含字段“points”。其他字段如“数据”也是未定义的:

HTML

<div id="tester" style="width:600px;height:250px;"></div>

JS

$(document).ready(function(){

   var tester = $('#tester');

   tester.on('plotly_hover', function(data){
     console.log(data)
   });

   Plotly.plot( 'tester', [{
       x: [1, 2, 3, 4, 5],
       y: [1, 2, 4, 8, 16] }], { 
       margin: { t: 0 } } );
})

请参阅此 fiddle 以便自己尝试: https://jsfiddle.net/c1kt3r82/158/

我做错了什么？

Answer 1

• plotly-basic 似乎不支持悬停事件，请改用plotly-latest
• 当使用 jQuery 选择元素时，它返回的对象与通过 document.getElementById 执行的不同
• 调用plot后需要定义hover事件

$(document).ready(function() {

  var tester = document.getElementById('tester');

  Plotly.plot(tester, [{
    x: [1, 2, 3, 4, 5],
    y: [1, 2, 4, 8, 16]
  }], {
    margin: {
      t: 0
    }
  });
  tester.on('plotly_hover', function(data) {
    console.log(data)
  });
});

<div id="tester" style="width:600px;height:250px;"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>