Question

我每秒都会根据新数据重新绘制图表，它的工作效果看起来很棒，但我注意到它每秒增加1 MB的内存。有任何解决这个问题的方法吗？我注意到如果我只有静态图表，那么内存稳定，但是一旦我添加了不断的重绘（为了更新数据），内存使用量永远不会停止。

起初我以为是因为我每次都在创建一个新的图表实例，所以我改变了代码，因此每次只重绘相同的实例，但这根本没有多大帮助。

任何人都知道如何修复它？我是否需要先以某种方式转储旧图表？

google.setOnLoadCallback(test);

var chart;
var chartOptions;
var chartCreate;

function test() {
    chart = new google.visualization.DataTable();
    chart.addColumn('string', 'Lorem');
    chart.addColumn('number', 'Ipsum');
    chart.addRows([
            ['', 0]
    ]);
    chartOptions = {};
    chartCreate = new google.visualization.LineChart(document.getElementById('chartDiv'));
          chartCreate.draw(chart, chartOptions);
    ]);
}

function test2() {
    chart.removeRows(0, 5);
    for (var i = 0; i < dataSpaceArray.length; ++i) {
        chart.addRow([dataTimeArray[i], dataSpaceArray[i], dataSpeedArray[i]]);
    }
        chartCreate.draw(chart, chartOptions);
}

setTimeout(test2,1000)

Answer 1

我通过全局存储图表解决了这个问题。在绘制图表之前，您需要检查图表是否已实例化。如果没有，请创建新的图表对象，然后在绘制之前调用clearChart（）方法。像这样：

//Store all chart objects in a global array to avoid memory leak
var charts = [];

function drawChart(chartName, element, data, chartOptions) {
   if (charts[chartName] === undefined || charts[chartName] === null) {
          charts[chartName] = new google.visualization.LineChart(group);
   } else {
          charts[chartName].clearChart();
   }
   charts[chartName].draw(dataTable, chartOptions);
}

Answer 2

有同样的问题，能够通过向Google的clearChart（）函数添加几行来修复它。

W.clearChart = function() {

    //this fixes the leak
    hv = {};
    iv = {};
    jv = {};

    ...
};

更多详情：

以下是我更改为的Google文件：

https://www.google.com/uds/api/visualization/1.0/4086f2e8fc632adc52e6d6795a5637a4/format+en,default,corechart.I.js

下载此文件，进行上述更改。在您的代码中，添加一个脚本标记以从您的网络服务器加载上述文件并注释掉以下行：

// google.load（'visualization'，'1'，{packages：['corechart']}）;
记忆力会上升但几分钟后会自行恢复。
我正在使用clearChart（）但是如果你不想清除图表，那么创建你自己的函数（例如memoryLeakFix（））并定期调用它。
这是一个测试页面（1.js是步骤1中的修改文件）。它基本上每100毫秒创建一个新图表和重绘。您将看到内存上升，但点击“停止”链接以停止重绘并等待几分钟，内存将会关闭。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"      type="text/javascript"></script>
  <script src="https://www.google.com/jsapi"                                          type="text/javascript"></script>

  <script src="1.js"                                          type="text/javascript"></script>


  <script type="text/javascript">

      //init google charts
//        google.load('visualization', '1', { packages: ['corechart'] });
      google.load('visualization', '1', { packages: ['table'] });

  </script>


</head>
<body>

<a href='#' onclick='stop()'>Stop</a>
  <div class='chart'></div>

  <script>

      var chart; var table;

      function createChart(container)
      {
          if(chart != undefined)
              chart.clearChart();

          //init chart
          chart = new google.visualization.LineChart(container[0]);

          //init chart data
          if(table == undefined)
          {
              table = new google.visualization.DataTable();

              table.addColumn('datetime', 'Time');
              table.addColumn('number', 'Value');

              var count = 0;

              //periodically add rows
              setInterval(function()
              {
                  //add row
                  table.addRows([ [new Date(), count++]]);    
              }, 1000);


          }
      }


      //start redrawing
      var id = setInterval(function()
      {
          createChart($('.chart'));

          drawChart();
      }, 100);

      //stop redrawing
      function stop()
      {
          clearInterval(id);
      }

      //draw chart
      function drawChart()
      {
          chart.draw(table, { curveType: "function",

              width:      250, 
              height:     250,
              pointSize:  1,
              legend:     { position: 'none' },
              chartArea: { 'width': '90%', left: 50 },
          });
      }

  </script>   
</body>
</html>

谷歌图表不断重绘内存增加

2 个答案: