1

我有一个带有这样的 javascript 的 HTML 文件：

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' 插件，当正在查看某个div 并且它是空的时，我正在使用它调用一个函数。

4

1 回答 1

1

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

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

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

于 2012-08-30T08:38:58.190 回答