谷歌折线图中的内存泄漏

Question

我一直在对 Google 图表库中的内存泄漏进行大量研究。没有发现任何对我的情况有帮助的东西。不知道到目前为止这个更新是什么。我看到谷歌图表开发团队正在尝试修复它并发布新的更新。

我正在使用折线图，数据来自 websockets。不断更新。

提前致谢

P.S 下面是我用来从 websockets 获取数据的代码。当套接字连接时，drawChart 函数每秒被调用一次。意味着整个折线图都被重绘了

function drawVisualization() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'data');
        data.addColumn('number', 'date');

        var data_test = new google.visualization.DataTable();
        data_test.addColumn('string', 'data test');
        data_test.addColumn('number', 'date test');

        for(var i=0; i<valueArr.length; i+=2) {

          if (i>=120) {
            data.removeRow(0);
            valueArr.splice(0, 2);
            timeArr.splice(0, 2);
          }

          data.addRow([timeArr[i], valueArr[i]]);
        }

        for(var i=1; i<valueArr.length; i+=2) {

            if (i>=120) {
              data_test.removeRow(0);
              valueArr.splice(0, 2);
              timeArr.splice(0, 2);
            }

            data_test.addRow([timeArr[i], valueArr[i]]);
        }

        //console.log(valueArr);
        // use a DataView to 0-out all the values in the data set for the initial draw
        var view = new google.visualization.DataView(data);
        var view_test = new google.visualization.DataView(data_test);

        // Create and draw the plot
        var chart = new google.visualization.LineChart(document.getElementById('visualization'));
        var chart_test = new google.visualization.LineChart(document.getElementById('visualization_test'));

        var options = {
            title:" ",
            width: 960,
            height: 460,
            bar: { groupWidth: "40%" },
            legend: { position: "bottom" },
            animation: {"startup": true},
            curveType: 'function',
            lineWidth: 3,
            backgroundColor: '#f9f9f9',
            colors: ['red'],
            tooltip: {
                textStyle: {
                  color: 'red',
                  italic: true
                },
                showColorCode: true
            },
            animation: {
                startup: true,
                easing: 'inAndOut',
                //duration: 500
            },
            vAxis: {
                title: '',
                gridlines: {
                  count: 8,
                  color: '#999'
                }
                /*minValue: 1.3,
                maxValue: 1.4*/
            },
            hAxis: {
              title: 'Time Stamp'
            },
        };

        //stay in sockets
        var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
            google.visualization.events.removeListener(runOnce);
            chart.draw(data, options);
            chart_test.draw(data, options);
        });

        chart.draw(view, options);
        chart_test.draw(view_test, options);
}

function init() {
try {
    socket = new WebSocket(portal);
    //console.log('WebSocket status '+socket.readyState);
    socket.onopen = function(msg) {
        //console.log("Welcome - status "+this.readyState);
    };


    socket.onmessage = function(msg) {
        parseData(msg);
        drawVisualization();

    };

    socket.onclose = function(msg) {
        console.log("Disconnected - status "+this.readyState);
    };
}
catch(ex){
    console.log(ex);
}
}

Answer 1

从只画一张图表开始，你可以设置类似于下面的 sn-p...

这应该用新数据绘制相同的图表，只有在上一次绘制完成之后......

function init() {
  var getData = true;

  var chart = new google.visualization.LineChart(document.getElementById('visualization'));
  google.visualization.events.addListener(chart, 'ready', function () {
    getData = true;
  });

  var options = {
    title:" ",
    width: 960,
    height: 460,
    bar: { groupWidth: "40%" },
    legend: { position: "bottom" },
    animation: {"startup": true},
    curveType: 'function',
    lineWidth: 3,
    backgroundColor: '#f9f9f9',
    colors: ['red'],
    tooltip: {
      textStyle: {
        color: 'red',
        italic: true
      },
      showColorCode: true
    },
    animation: {
      startup: true,
      easing: 'inAndOut',
      //duration: 500
    },
    vAxis: {
      title: '',
      gridlines: {
        count: 8,
        color: '#999'
      }
      /*minValue: 1.3,
      maxValue: 1.4*/
    },
    hAxis: {
      title: 'Time Stamp'
    },
  };

  // if you want data from previous draws, declare here...
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Time');
  data.addColumn('number', 'Value');
  // or see below...

  // msg = object with arrays from parseData
  function drawVisualization(msg) {

    // if you ** don't ** want data from previous draws, declare here instead...
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Time');
    data.addColumn('number', 'Value');
    // ---<

    for (var i = 0; i < msg.valueArr.length; i++) {
      data.addRow([msg.timeArr[i], msg.valueArr[i]]);
    }

    chart.draw(data, options);
  }

  function parseData(msg) {
    //... declare timeArr & valueArr locally here

    return {
      timeArr: timeArr,
      valueArr: valueArr
    };
  }

  function startData() {
    try {
      socket = new WebSocket(portal);
      //console.log('WebSocket status '+socket.readyState);

      socket.onopen = function(msg) {
        //console.log("Welcome - status "+this.readyState);
      };

      socket.onmessage = function(msg) {
        if (getData) {
          getData = false;

          // pass object with arrays from parseData
          drawVisualization(parseData(msg));
        }
      };

      socket.onclose = function(msg) {
        //console.log("Disconnected - status "+this.readyState);
      };
    }
    catch(ex){
      console.log(ex);
    }
  }
  startData();
}