谷歌圖表加載消息

我有以下腳本的工作，但有一個惱人的問題：谷歌圖表加載消息

<html> 
<head> 
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChartAjax); 

    function drawChartAjax() { 
     $.ajax({ 
      url: 'chart_json.aspx', 
      type: 'POST', 
      dataType: 'json', 
      success: function(data) { 
       drawChart(data); 
      } 
     }); 
    } 

    function drawChart(json) { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'User'); 
     data.addColumn('number', 'v'); 
     data.addRows(json.length); 
     for(var j in json) { 
      for(var k in json[j]) { 
       data.setValue(parseInt(j), 0, k); 
       data.setValue(parseInt(j), 1, json[j][k].v); 
      } 
     } 
     var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
     chart.draw(data, {width: 500, height: 300, is3D: true, title: 'Titles goes here'}); 
    } 
</script> 
</head> 
    <body> 
    <div id="header">header goes ehre</div> 
    <div id="chart_div"></div> 
    <div id="footer">footer goes here</div> 
    </body> 
</html>

的問題是，有時候圖表可能需要很長的時間來出現的各種原因。發生這種情況時，會加載標題，然後是圖表，然後是頁腳。這看起來很糟糕IMO。 IMO，整個頁面應加載，包括頁腳和一個平的「裝載..」應當被顯示的消息，直到圖表即可顯示本身，或GIF動畫直到圖表已準備就緒。

我怎樣才能得到整個頁面加載和顯示加載信息，直到圖表，而不必頁腳缺少準備，那麼頁腳突然一旦圖表已完成加載出現？

來源

2010-11-01 oshirowanen

把腳本的HTML文件的底部。這不會執行加載屏幕，但這會防止瀏覽器在加載圖表時被阻塞。

爲了獲得加載效果，Google的圖表將覆蓋您指向的div的innerHTML，因此您可以在其中保存加載消息（以您想要的任何格式），並在圖表被覆蓋負載。

來源

2010-11-03 12:23:09

我不會爭辯是否是2003年，但這有點過於老派。即使腳本位於文件末尾，也不能假定DOM已準備就緒。 bozdoz已經給出了正確的答案。使用$（函數）可以在DOM準備就緒後運行代碼。 – naugtur 2010-11-09 11:42:22

感謝您的認可naugtur！ :) – bozdoz 2011-07-25 03:29:59

谷歌是否圖表清除圖表DIV負荷？

/* style.css */ 
.preloader { 
    height:350px; background:url(../images/spinner.gif) center center no-repeat; 
}

設置預加載器的高度等於結果圖表。

<!-- HTML --> 
<div id="chart_div"><div class="preloader">&nbsp;</div></div>

如果不清除預加載器，則應在圖表加載上添加一個回調來清除它。

來源

2010-11-03 12:19:26

我會用一個onload處理程序調用圖表功能。它應該等待頁面加載，然後添加圖表。

$(function(){ 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChartAjax); 
});

如果這不起作用，也許你可以添加一個負載處理到頁腳股利。

來源

2010-11-03 12:24:21 bozdoz

您也可以利用Google Chart events聽當圖表加載並執行的操作。它可能會要求您最初隱藏圖表容器或覆蓋加載圖標。例如：

google.visualization.events.addListener(chart, 'ready', function() { 
      // Do something like ... 
      /* $('#chart_div').css('visibility', 'visible'); // provided this was already hidden 
      $('.loading-icon').hide(); // if it exists in your HTML */ 
     });

來源

2014-10-13 14:04:26

谷歌圖表加載消息

回答

相關問題