0

ページにテーブルを作成するために Google Visualization API を使用しています。これらのテーブルは、多くの時間がかかるクエリからデータを取得します。Google ビジュアライゼーションのデフォルトの動作は、API を呼び出してヘッダーにグラフを描画することであるため、ページの読み込み時間が遅くなります。

一時的な「読み込み中」の画像でページを読み込み、ページが完全に読み込まれた後にスクリプトを実行して、ページの応答性を高めたいと考えています。これを行う方法はありますか？

使用してみましjQuery(window).loadたが、うまくいきませんでした。

**UPDATE: テーブルのページングは​​、この問題に対する一時的な解決策のように見えます (例: table.draw(data, {page: 'enable' ,pageSize: 100}))。この問題はテーブルでは解決されますが、グラフでは解決されないため、更新を続けます

4

2 に答える 2

0

<div>チャートが表示されている上に「読み込み中」の画像を含む要素を作成します<div>。これは、ページの読み込み時に表示されます (ページの起動時にデフォルトで「読み込み中」と表示されます)。

readyテーブル チャートのイベントを使用して、テーブルが使用可能になったときにトリガーされるリスナーを作成します。その場合、CSS を使用して「読み込み中」の画像を非表示にする関数を作成し、<div>表示されないようにします。

ここで例を参照してください。次のようにコードします。

google.load('visualization', '1', {packages: ['table']});
google.setOnLoadCallback(drawVisualization);

function drawVisualization() {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('string', 'Label');
    dataTable.addColumn('number', 'foo');
    dataTable.addColumn('number', 'bar');
    dataTable.addColumn('number', 'caz');
    dataTable.addColumn('number', 'cad');
    for (var i = 0; i < 500; ++i) {
        dataTable.addRow(['Label ' + i, Math.random()*100, Math.random()*100, Math.random()*100, Math.random()*100])
    }

    var table1 = new google.visualization.Table(document.getElementById('table'));

    google.visualization.events.addListener(table1, 'ready', function() {
        document.getElementById('loading').style.display='none';
        alert("Chart is Ready!");
    });

    table1.draw(dataTable, null);


}
于 2013-02-20T04:47:25.280 に答える