Google图表加载消息 [英] Google chart loading message
问题描述
我有下面的脚本可以工作，但有一个恼人的问题：
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>
问题是，有时图表会因各种原因需要很长时间才能显示。发生这种情况时，会加载标题，然后是图表，然后是页脚。这看起来很糟糕IMO。国际海事组织，整个页面应加载，包括页脚，并应显示一个平坦的加载..消息，直到图表准备好显示自己，或动画gif，直到图表准备好。
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.
如何让整个页面加载并显示加载消息，直到图表准备就绪，而不是缺少页脚，然后在图表加载完成后突然出现页脚？
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?
推荐答案
将脚本放在HTML文件的底部。这不会执行加载屏幕，但这会阻止浏览器在加载图表时阻塞。
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.
要获得加载效果，Google的图表将覆盖你指定的 div ，所以你可以在那里保存一个加载消息（以你想要的任何格式），并且当图表加载时它会被覆盖。
To get a loading effect, Google's Charts will overwrite the innerHTML of the div you'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图表加载消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
