代码之家 › 专栏 › 技术社区 › oshirowanen

谷歌图表加载消息

google-visualization html jquery javascript

oshirowanen · 技术社区 · 14 年前

<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,应该加载整个页面,包括页脚,并且在图表准备好显示自己之前,应该显示一条平坦的“正在加载…”消息,或者在图表准备好之前显示一个动画gif。

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

4 回复 | 直到 14 年前

Reese Moore 14 年前

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

为了获得加载效果,Google的图表将覆盖 div 您将它指向,这样您就可以在其中保留一条加载消息(以您希望的任何格式),并且在加载图表时它将被覆盖。

bozdoz 14 年前

我将使用onload处理程序来调用图表函数。它应该等待页面加载,然后添加图表。

$(function(){
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChartAjax);
});

Halil Özgür 14 年前

Google Charts是否在加载时清除chart div?

/* style.css */
.preloader {
    height:350px; background:url(../images/spinner.gif) center center no-repeat;
}

将预紧器的高度设置为与结果图表相等。

<!-- HTML -->
<div id="chart_div"><div class="preloader">&nbsp;</div></div>

Anibe Agamah 10 年前

你也可以利用 Google Chart events 当图表加载并执行操作时监听。它可能要求您最初隐藏图表容器或覆盖加载图标。例子:

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 */
        });