javascript - 浏览器中的 Google Chart 高 RAM

Question

我看到使用谷歌图表会占用大量内存。

我必须说我有一些使用 javascript 的代码，它让浏览器每 7 秒加载一个新图表，它确实为 Google Draw Chart 函数提供了来自新文件的新数据并绘制了图表，但这似乎创建了在我的 PC 上使用大量 RAM。有人知道如何避免这种情况的技巧吗？我认为也许浏览器正在将之前的所有数据保存在缓存中，如果不这样做，那么几分钟后 RAM 可能不会变得那么高？因为现在它确实在几分钟内变得越来越高，达到 100% 并且浏览器停止工作。

这是我当前的代码:

function drawVisualization() 
{

//-- From this textfile the chart gets info which is the new symbol chart
var Textinhalt = $.ajax({ url: "Chartsettings.txt", contentType:"application/json", dataType:"json", async: false }).responseText;
var Setting = JSON.parse(Textinhalt);

 Symbol=Setting.Selection[0].symbol;
 Timeframe=Setting.Selection[0].timeframe;
 Broker=Setting.Selection[0].broker;

//--Now the new data is been getting from php response file
var fileurl = "getData.php?symbol="+Symbol+"&timeframe="+Timeframe+"&broker="+Broker;

var jsonData = $.ajax({
    url: fileurl,
    contentType:"application/json",
    dataType:"json",
    async: false
    }).responseText;
var array=$.parseJSON(jsonData);

//--Now new data have been saved into array and will be draw
var data =google.visualization.arrayToDataTable(array,true);

var options = { 
    legend: 'none'
    };

    var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
     chart.draw(data, options);

}


//--If this function is clicked the google charts get refreshed every 7 seconds and i did see that my browser creates more and more RAM usuage till it goes over 100% and stops working
function PlayCharts()
{
 drawVisualization();  
 setTimeout(PlaySignals, 7000);
}

Answer 1

部分问题可能是您每次都在创建新图表
而不是用新数据绘制相同的图表

建议稍微改变范围，
将图表变量移到 drawVisualization
之外 但是你必须等到谷歌加载完才能创建
不确定你在加载功能上的页面是什么样的

此外，$.ajax 上的 async: false 已弃用

推荐类似下面的设置...

// move declarations outside of drawVisualization
var chart;
var options = {
  legend: 'none'
};

// load google charts
google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  // create chart
  chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));

  // move other on page load functions here
  // google.charts.load can be used instead of --> $(document).ready
});

function drawVisualization() {
  //-- From this textfile the chart gets info which is the new symbol chart
  var Textinhalt = $.ajax({ url: "Chartsettings.txt", contentType:"application/json", dataType:"json", async: false }).responseText;
  var Setting = JSON.parse(Textinhalt);

  Symbol=Setting.Selection[0].symbol;
  Timeframe=Setting.Selection[0].timeframe;
  Broker=Setting.Selection[0].broker;

  //--Now the new data is been getting from php response file
  var fileurl = "getData.php?symbol="+Symbol+"&timeframe="+Timeframe+"&broker="+Broker;

  $.ajax({
    url: fileurl,
    contentType: 'application/json',
    dataType: 'json'
  }).done(function (jsonData) {
    var array = $.parseJSON(jsonData);

    //--Now new data have been saved into array and will be draw
    var data = google.visualization.arrayToDataTable(array, true);

    // draw same chart
    chart.draw(data, options);
  });
}

function PlayCharts() {
  drawVisualization();
  setTimeout(PlaySignals, 7000);
}