Сообщение о загрузке диаграммы Google - PullRequest
Новая
       5

Сообщение о загрузке диаграммы Google

5 голосов
/ 01 ноября 2010

У меня есть следующий скрипт, который работает, но имеет одну раздражающую проблему: 

<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, должна загружаться вся страница, включая нижний колонтитул, и плоское сообщение «загрузка ...» должно отображаться до тех пор, пока диаграмма не будет готова к отображению, или анимированный GIF, пока диаграмма не будет готова.

Как заставить всю страницу загружаться и отображать сообщение о загрузке до тех пор, пока диаграмма не будет готова, вместо отсутствия нижнего колонтитула, когда внезапно нижний колонтитул закончится после загрузки диаграммы?

Ответы [ 4 ]

18 голосов
/ 03 ноября 2010

Поместите скрипт в конец HTML-файла.Это не приведет к загрузке экрана, но это предотвратит блокировку браузера во время загрузки диаграммы.

Чтобы получить эффект загрузки, диаграммы Google перезапишут внутренний HTML-код div, на который вы его указываете.в, так что вы можете хранить там загрузочное сообщение (в любом формате), и оно будет перезаписано при загрузке диаграммы.

6 голосов
/ 03 ноября 2010

Я бы использовал обработчик onload для вызова функций диаграммы. Следует дождаться загрузки страницы, затем добавить диаграмму. 

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

Если это не сработает, возможно, вы могли бы добавить обработчик загрузки в div нижнего колонтитула.

4 голосов
/ 03 ноября 2010

Удаляет ли Google Charts график деления при загрузке? 

/* 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>

Если он не очищаетpreloader, вы должны добавить обратный вызов при загрузке диаграммы, чтобы очистить его.

3 голосов
/ 13 октября 2014

Вы также можете воспользоваться событиями 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 */
        });
...