Google图表加载消息(Google chart loading message)

其他开发 IT屋
百度翻译此文   有道翻译此文
问 题

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.

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?

解决方案

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.

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.

本文地址:IT屋 » 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);

函数drawChartAjax(){
$ .ajax({
url:'chart_json.aspx',
type:'POST',
dataType: 'json',
success:function(data){
drawChart(data);
}
});
}

函数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 j 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”>标题转到ehre< / div>
< div id =“chart_div”>< / div>
< div id =“footer”> footer go here< / div>
< / body>
< / html>


问题是,有时图表会因各种原因需要很长时间才能显示。发生这种情况时,会加载标题,然后是图表,然后是页脚。这看起来很糟糕IMO。国际海事组织,整个页面应加载,包括页脚,并应显示一个平坦的“加载..”消息,直到图表准备好显示自己,或动画gif,直到图表准备好。



如何让整个页面加载并显示加载消息,直到图表准备就绪,而不是缺少页脚,然后在图表加载完成后突然出现页脚?


解决方案

将脚本放在HTML文件的底部。这不会执行加载屏幕,但这会阻止浏览器在加载图表时阻塞。



要获得加载效果,Google的图表将覆盖你指定的 div ,所以你可以在那里保存一个加载消息(以你想要的任何格式),并且当图表加载时它会被覆盖。


本文地址:IT屋 » Google图表加载消息

官方微信
扫一扫关注IT屋
微信公众号搜索 “ IT屋 ” ,选择关注
与百万开发者在一起