javascript 谷歌图表加载消息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4068010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google chart loading message
提问by oshirowanen
I have the following script which works, but has one annoying issue:
我有以下脚本可以工作，但有一个烦人的问题：
<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>
The problem is that sometimes the chart can take a long time to appear for various reasons. When this happens, the header loads, followed by the chart, followed by the footer. This looks awful IMO. IMO, the whole page should load, including the footer, and a flat "loading.." message should be displayed until the chart is ready to display itself, or an animated gif until the chart is ready.
问题是有时由于各种原因，图表可能需要很长时间才能出现。发生这种情况时，将加载页眉，然后是图表，然后是页脚。这看起来很糟糕 IMO。IMO，应该加载整个页面，包括页脚，并且在图表准备好显示之前应该显示平面“正在加载..”消息，或者在图表准备好之前显示动画 gif。
How can I get the whole page to load and display a loading message until the chart is ready, instead of having the footer missing, then the footer suddenly appears once the chart has finished loading?
如何在图表准备好之前加载整个页面并显示加载消息，而不是缺少页脚，然后在图表加载完成后突然出现页脚？
回答by Reese Moore
Put the script at the bottom of the HTML file. This won't do a loading screen, but this will prevent the browser from blocking while the chart loads.
将脚本放在 HTML 文件的底部。这不会做一个加载屏幕，但是这将防止浏览器在图表加载时阻塞。
To get a loading effect, Google's Charts will overwrite the innerHTML of the divyou're pointing it to, so you can keep a loading message in there (in whatever format you desire) and it will get overwritten when the chart loads.
为了获得加载效果，Google 的图表将覆盖div您指向它的innerHTML ，因此您可以在其中保留加载消息（以您想要的任何格式），并且在图表加载时它会被覆盖。
回答by bozdoz
I would use an onload handler to call the chart functions. It should wait for the page to load, then add the chart.
我会使用一个 onload 处理程序来调用图表函数。它应该等待页面加载，然后添加图表。
$(function(){
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChartAjax);
});
If this doesn't work, perhaps you could add a load handler to the footer div.
如果这不起作用，也许您可以向页脚 div 添加一个加载处理程序。
回答by Halil ?zgür
Does Google Charts clear the chart div on load?
Google Charts 是否在加载时清除图表 div？
/* style.css */
.preloader {
height:350px; background:url(../images/spinner.gif) center center no-repeat;
}
Set the height of the preloader equal to the resulting chart.
将预加载器的高度设置为等于结果图表。
<!-- HTML -->
<div id="chart_div"><div class="preloader"> </div></div>
If it doesn't clear the preloader, you should add a callback on chart load to clear it.
如果它没有清除预加载器，您应该在图表加载时添加回调以清除它。
回答by Anibe Agamah
You can also take advantage of Google Chart eventsto listen for when the chart has loaded and perform an action. It may require you to initially hide the chart container or overlay a loading icon. Example:
您还可以利用Google 图表事件来侦听图表何时加载并执行操作。它可能需要您最初隐藏图表容器或覆盖加载图标。例子：
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 */
});
