Javascript google折线图中的内存泄漏

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

我使用的是折线图，数据来自WebSocket。这是不断更新的

提前谢谢

下面是我用来从WebSocket获取数据的代码。连接插座后，每秒调用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);
}
}

函数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'）；
数据_test.addColumn（'number'，'date test'）；
对于（变量i=0；i=120）{
数据流（0）；
接头参数（0,2）；
时间阵列拼接（0,2）；
}
data.addRow（[timeArr[i]，valueArr[i]]）；
}
对于（变量i=1；i=120）{
数据检验（0）；
接头参数（0,2）；
时间阵列拼接（0,2）；
}
数据_test.addRow（[timeArr[i]，valueArr[i]]）；
}
//控制台日志（valueArr）；
//使用数据视图将初始绘图的数据集中的所有值进行0-out
var view=newgoogle.visualization.DataView（数据）；
var view_test=新的google.visualization.DataView（数据_test）；
//创建并绘制绘图
var chart=new google.visualization.LineChart（document.getElementById（'visualization'）；
var chart_test=new google.visualization.LineChart（document.getElementById（'visualization_test'）；
变量选项={
标题：“，
宽度：960，
身高：460，
条：{groupWidth:“40%”，
图例：{位置：“底部”}，
动画：{“启动”：true}，
curveType:'函数'，
线宽：3，
背景颜色：“#f9f9f9”，
颜色：[“红色”]，
工具提示：{
文本样式：{
颜色：“红色”，
斜体：对
},
showColorCode：true
},
动画：{
是的，
放松：'无生气'，
//持续时间：500
},
言辞：{
标题：“”，
网格线：{
计数：8，
颜色：“#999”
}
/*最小值：1.3，
最大值：1.4*/
},
哈克斯：{
标题：“时间戳”
},
};
//呆在插座里
var runOnce=google.visualization.events.addListener（图表'ready'，函数（）{
google.visualization.events.removeListener（runOnce）；
图表绘制（数据、选项）；
图表-测试图（数据、选项）；
});
图表绘制（视图、选项）；
图表测试。绘图（查看测试，选项）；
}
函数init（）{
试一试{
套接字=新的WebSocket（门户）；
//log（'WebSocket状态'+socket.readyState）；
socket.onopen=函数（msg）{
//log（“欢迎-状态”+this.readyState）；
};
socket.onmessage=函数（msg）{
解析数据（msg）；
绘图可视化（）；
};
socket.onclose=函数（msg）{
log（“断开连接-状态”+此.readyState）；
};
}
捕获（ex）{
控制台日志（ex）；
}
}

从只绘制一个图表开始，您可以进行类似以下代码段的设置

只有在上一次绘制完成后，才能使用新数据绘制相同的图表

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();
}

函数init（）{
var getData=true；
var chart=new google.visualization.LineChart（document.getElementById（'visualization'）；
google.visualization.events.addListener（图表'ready'，函数（）{
getData=true；
});
变量选项={
标题：“，
宽度：960，
身高：460，
条：{groupWidth:“40%”，
图例：{位置：“底部”}，
动画：{“启动”：true}，
curveType:'函数'，
线宽：3，
背景颜色：“#f9f9f9”，
颜色：[“红色”]，
工具提示：{
文本样式：{
颜色：“红色”，
斜体：对
},
showColorCode：true
},
动画：{
是的，
放松：'无生气'，
//持续时间：500
},
言辞：{
标题：“”，
网格线：{
计数：8，
颜色：“#999”
}
/*最小值：1.3，
最大值：1.4*/
},
哈克斯：{
标题：“时间戳”
},
};
//如果需要以前绘制的数据，请在此处声明。。。
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Time'）；
data.addColumn（'number'，'Value'）；
//或者看下面。。。
//msg=具有parseData中的数组的对象
功能可视化（msg）{
//如果**不**需要以前绘制的数据，请在此处声明。。。
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Time'）；
data.addColumn（'number'，'Value'）；
// ---<
对于（变量i=0；i