谷歌图表加载消息

我有以下脚本的工作，但有一个恼人的问题：谷歌图表加载消息

<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

谷歌图表加载消息

回答

相关问题