Question

我有以下脚本可行，但有一个恼人的问题：

<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直到图表准备就绪。

如何在整个图表准备好之前加载并显示加载消息，而不是让页脚丢失，那么一旦图表加载完毕，页脚会突然出现？

Answer 1

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

要获得加载效果，Google的图表会覆盖您指向它的div的innerHTML，因此您可以在其中保留加载消息（以您想要的任何格式）并且它将被覆盖当图表加载时。

Answer 2

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

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

如果这不起作用，也许您可以在页脚div中添加一个加载处理程序。

Answer 3

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">&nbsp;</div></div>

如果它没有清除预加载器，你应该在图表加载上添加一个回调来清除它。

Answer 4

您还可以利用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 */
        });

谷歌图表加载消息

4 个答案: