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

时间:2012-08-30 08:29:50

标签: javascript ajax loading google-visualization

我的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并且它是空的时,我正在调用它。

1 个答案:

答案 0 :(得分:1)

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

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

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