[英]Google chart loading message
我有以下脚本可行,但有一个恼人的问题:
<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,整个页面应该加载,包括页脚,并且应该显示平坦的“loading ..”消息,直到图表准备好显示自己,或者动画gif直到图表准备好。
如何在整个页面加载并显示加载消息,直到图表准备好,而不是丢失页脚,然后在图表加载完成后页脚突然出现?
将脚本放在HTML文件的底部。 这不会执行加载屏幕,但这会阻止浏览器在图表加载时阻塞。
要获得加载效果,Google的图表将覆盖您指向它的div
的innerHTML,因此您可以在其中保留加载消息(以您希望的任何格式),并且在图表加载时它将被覆盖。
我会使用onload处理程序来调用图表函数。 它应该等待页面加载,然后添加图表。
$(function(){
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChartAjax);
});
如果这不起作用,也许你可以在页脚div中添加一个加载处理程序。
Google Charts是否会在加载时清除图表div?
/* style.css */
.preloader {
height:350px; background:url(../images/spinner.gif) center center no-repeat;
}
将预加载器的高度设置为等于结果图表。
<!-- HTML -->
<div id="chart_div"><div class="preloader"> </div></div>
如果它没有清除预加载器,则应在图表加载上添加回调以清除它。
您还可以利用Google Chart事件监听图表加载并执行操作的时间。 可能需要您最初隐藏图表容器或覆盖加载图标。 例:
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.