Question

我的HTML文件包含这样的javascript：

function drawCharts(){
  var graph; var data; var options;
  options = { title: 'Title1' };
  data = google.visualization.arrayToDataTable([['A','B'],['0',7.2],['2',7.2],['4',7.3],['6',6.4],['8',6.4],['10',6.3],['12',6.2],['14',6.2],['16',6],['18',6],['20',6.5],['22',7.2]]);
  graph = new google.visualization.LineChart(document.getElementById('chart_div1'));
  graph.draw(data, options);
  ...
  data = google.visualization.arrayToDataTable([['A','B'],['0',14.5],['2',14.5],['4',14.5],['6',13.2],['8',13.1],['10',12.9],['12',12.8],['14',12.7],['16',12.5],['18',12.4],['20',12.2],['22',14.5]]);
  graph = new google.visualization.LineChart(document.getElementById('chart_div50'));
  graph.draw(data, options);
}
google.setOnLoadCallback(drawCharts);

（此文件是先前生成的。）问题是，当加载50个图表时，需要相当长的时间。最好的是独立绘制图表，而不是等待其他人绘制 - 我想问你怎么做。

编辑：受到PhonicUK答案的启发，我发现了Element ‘in view’ plugin，当我正在查看某个div并且它是空的时，我正在调用它。

Answer 1

你可以在这里做一些不同的事情：

首先是50张图表，我假设并非所有图表都同时可见。因此，您可以捕获window.onscroll事件以了解用户何时滚动，并仅在可见区域底部下方创建图形时创建图形。这意味着只创建当前可见且即将可见的图形，其余图形在需要之前不存在。

第二种是生成图形服务器端并将它们作为图像发送。这也可以与上述相结合，以节省加载时间。

加载多个谷歌图表需要太长时间

1 个答案: