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の回答に触発されて、特定のdivが表示されていて、それが空のときに関数を呼び出す 「inview 」プラグインを見つけました。

4

1 に答える 1

1

ここでは、いくつかの異なることを行うことができます。

1つ目は、50のチャートで、すべてが同時に表示されるわけではないと想定していることです。したがって、window.onscrollイベントをトラップして、ユーザーがスクロールしていることを認識し、グラフが表示領域の下部のすぐ下にある場合にのみグラフを作成できます。これは、現在表示されているグラフと間もなく表示されるグラフのみが作成され、残りは必要になるまで存在しないことを意味します。

2つ目は、サーバー側のグラフを生成し、それらを画像として送信することです。これを上記と組み合わせて、ロード時間を節約することもできます。

于 2012-08-30T08:38:58.190 に答える