Question

我实现了一个JavaScript脚本，该脚本通过Websocket使用Plotly创建图形。

以下是脚本：


var modalCount = 0;

function graphTest(fio2) {

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

    var time = new Date();
    var update = {
        x: [[time]],
        y: [[fio2]]
    }

    myPlot.on('plotly_click', function(){
        modalCount++;
        console.log(modalCount);
    });

    Plotly.extendTraces('graphFiO2', update, [0]);

modalCount不是随着每次点击而增加，而是根据我从网络套接字接收到的数据量而增加很多，为什么？

编辑：

modalCount以错误的方式增加，例如：我希望每次点击事件的modalCount增加：第一次点击-modalCount = 1，第二次点击-modalCount = 2 ..

反而会发生什么：第一次单击-modalCount = 10，第二次单击= modalCount = 27（数字无意义）

Answer 1

那么，您称之为graphTest的网络套接字中的每个更新？好了，然后在每个更新上添加一个新的单击处理程序。因此，每次点击都会调用所有这些处理程序，从而以一种意想不到的方式增加您的数量。您应该重构代码，以便单击处理程序仅绑定一次。伪代码如下：

  var modalCount = 0,
      myPlot = document.getElementById('graphFiO2');

  Plotly.newPlot('graphFiO2', initialData, {});

  myPlot.on('plotly_click', function() {
    modalCount++;
    console.log(modalCount);
  });

  function graphTest(fio2) {

      var time = new Date();
      var update = {
        x: [
          [time]
        ],
        y: [
          [fio2]
        ]
      }

      Plotly.extendTraces('graphFiO2', update, [0]);    
  }

Plotly.js：我使用plotly_click事件[JS]时点击错误

1 个答案: