plotly js Uncaught TypeError: myPlot.on is not a function

Question

我是一个正在努力学习的新手。我修改了 plotly hover events 处的剧情代码目标是获得悬停事件，以便稍后我可以在模态中显示图像。

我的 CSV 确实读入了，绘图也显示在浏览器中。我收到一条错误消息：“Uncaught TypeError: myPlot.on is not a function”（在 Firefox 和 Chrome 调试器中）。关于这个问题的其他帖子表明我必须运行正确版本的“https://cdn.plot.ly/plotly-latest.min.js”。我已经尝试了所有我能想到的方法，甚至在没有多个函数调用的情况下制作了线性代码。帮助！谢谢...

<!DOCTYPE html>
<html lang="en" >
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<div id="myDiv"></div>
<div id="hoverinfo" style="margin-left:80px;"></div>
 
<script>
    var traces=[];
    var layout=[];
    var config={};
    var rows=[]
    const CSV="cloudcover.csv";

    Plotly.d3.csv(CSV, function(rows){
        let x=[];
        let y=[];
        let row;
        let i=0;
    while (i< rows.length){
        row=rows[i];
        x.push(row["Time"]);
        y.push(row["CloudCover"]);
        i+=1;
        };
    traces=[
        {x:x,
        y:y,
        line:{color:"#387fba"},
        width:2,
        }];

    layout={
        title:'Cloudcover',
        yaxis:{ range:[0,100]},
        xaxis:{tickformat: "%H:%M:%S"}
        };

    config={
        responsive:true
    };

Plotly.newPlot('myDiv',traces,layout,config,{showSendToCloud: true});
    });

    var myPlot = document.getElementById('myDiv')
    hoverInfo = document.getElementById('hoverinfo')

    myPlot.on('plotly_hover', function(data){
        var infotext = data.points.map(function(d){
          return (d.data.name+': x= '+d.x+', y= '+d.y.toPrecision(3));
        });
            hoverInfo.innerHTML = infotext.join('<br/>');
    })

     myPlot.on('plotly_unhover', function(data){
        hoverInfo.innerHTML = '';
    });
    
</script>
</body>
</html>

csv 很简单：

Time,CloudCover
2022-04-06 10:07:09,0
2022-04-06 11:07:18,100.0
2022-04-06 12:08:17,100.0
2022-04-06 13:09:16,96.0
2022-04-06 14:10:15,66.0
2022-04-06 15:11:14,7.0
2022-04-06 16:12:13,6.0

Answer 1

将 Plotly.newPlot 移出传递给 Plotly.d3.csv 的函数。一旦 Plotly.newPlot 执行，它将插入 polyfill 以允许使用 .on(...)

监听事件

下面的代码片段绘制了一个空白图表，它仍然没有 cloudcover.csv 文件，但解决了您的问题。

更新了代码段以在 CSV 内容可用后使用 Plotly.react() 刷新图表中的数据。 一般来说，数据更新函数中最好不要有组件creation/rendering代码。

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<div id="myDiv"></div>
<div id="hoverinfo" style="margin-left:80px;"></div>

<script>
  const chartEl = 'myDiv';
  const CSV = "cloudcover.csv";

  /*Create chart*/
  var layout = {
      title: 'Cloudcover',
      yaxis: {
        range: [0, 100]
      },
      xaxis: {
        tickformat: "%H:%M:%S"
      }
    },
    config = {
      responsive: true
    };

  Plotly.newPlot(chartEl, [], layout, config, {
    showSendToCloud: true
  });

  var myPlot = document.getElementById(chartEl)
  hoverInfo = document.getElementById('hoverinfo')

  myPlot.on('plotly_hover', function(data) {
    var infotext = data.points.map(function(d) {
      return (d.data.name + ': x= ' + d.x + ', y= ' + d.y.toPrecision(3));
    });
    hoverInfo.innerHTML = infotext.join('<br/>');
  })

  myPlot.on('plotly_unhover', function(data) {
    hoverInfo.innerHTML = '';
  });

  /*Update data in chart*/
  function updateChartData(rows) {
    let traces = [],
      x = [],
      y = [],
      row,
      i = 0;

    while (i < rows.length) {
      row = rows[i];
      x.push(row["Time"]);
      y.push(row["CloudCover"]);
      i += 1;
    };

    traces = [{
      x: x,
      y: y,
      line: {
        color: "#387fba"
      },
      width: 2,
    }];

    Plotly.react(chartEl, traces);
  }

  Plotly.d3.csv(CSV, updateChartData);
</script>
</body>

</html>

Answer 2

您必须将所有情节代码放入 Plotly.d3.csv 回调中，包括您的事件侦听器，如下所示：

Plotly.d3.csv(CSV, function (rows) {
        ...

        Plotly.newPlot('myDiv', traces, layout, config);

        const myPlot = document.getElementById('myDiv')

        myPlot.on('plotly_hover', function (data) {
            ...
        })

        myPlot.on('plotly_unhover', function (data) {
            ...
        });
});

这是因为您的数据只有在加载 CSV 文件后才可用（即您在回调中），并且 on 侦听器只有在从数据创建图表后才可用。

plotly js Uncaught TypeError: myPlot.on is not a function

plotly js Uncaught TypeError: myPlot.on is not a function

javascript

plotly

plotly.js