谷歌图表加载消息
[英]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>
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。 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，整个页面应该加载，包括页脚，并且应该显示平坦的“loading ..”消息，直到图表准备好显示自己，或者动画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? 如何在整个页面加载并显示加载消息，直到图表准备好，而不是丢失页脚，然后在图表加载完成后页脚突然出现？
4 个解决方案
解决方案1
18 已采纳 2010-11-03 12:23:09
Put the script at the bottom of the HTML file. 将脚本放在HTML文件的底部。 This won't do a loading screen, but this will prevent the browser from blocking while the chart loads. 这不会执行加载屏幕，但这会阻止浏览器在图表加载时阻塞。
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的图表将覆盖您指向它的div的innerHTML，因此您可以在其中保留加载消息（以您希望的任何格式），并且在图表加载时它将被覆盖。
解决方案2
6 2010-11-03 12:24:21
I would use an onload handler to call the chart functions. 我会使用onload处理程序来调用图表函数。 It should wait for the page to load, then add the chart. 它应该等待页面加载，然后添加图表。
$(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中添加一个加载处理程序。
解决方案3
4 2010-11-03 12:19:26
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. 如果它没有清除预加载器，则应在图表加载上添加回调以清除它。
解决方案4
3 2014-10-13 14:04:26
You can also take advantage of Google Chart events to listen for when the chart has loaded and perform an action. 您还可以利用Google Chart事件监听图表加载并执行操作的时间。 It may require you to initially hide the chart container or overlay a loading icon. 可能需要您最初隐藏图表容器或覆盖加载图标。 Example: 例：
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 */
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.