在谷歌圖表之前加載圖片Ajax

我想加載一個加載圖片，同時谷歌圖表ajax正在加載。在谷歌圖表之前加載圖片Ajax

我試圖使用AjaxStart（）/ AjaxStop（）或beforeSend，但它沒有工作。

任何人都知道如何使用谷歌圖表完成？加載圖像的

例子：http://loadinggif.com/generated-image?imageId=32&bgColor=%23ffffff&fgColor=%23ff000a&transparentBg=1&download=0&random=0.9720576445106417

的index.php

<html> 
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" type="text/css" href="index.css" /> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type='text/javascript' src='jquery-1.11.1.min.js'></script> 
    <script type='text/javascript'> 


    // Load the Visualization API and the piechart package. 
    google.load('visualization', '1', {'packages':['table']}); 
    //google.setOnLoadCallback(drawChart); 

    function drawChart() { 
    var jsonData = $.ajax({ 
     url: "Index-ajax.php", 
     dataType:"json", 
     async: false 
     }).responseText; 

    // Create our data table out of JSON data loaded from server. 
    var data = new google.visualization.DataTable(jsonData); 

    // Instantiate and draw our chart, passing in some options. 
    var chart = new google.visualization.Table(document.getElementById('chart_div')); 

    chart.draw(data, {width: 1000, 'allowHtml': true}); 
    } 


    $(document).ready(function clicar_botão_buscar(){ 
     $("#button").click(function(){ 
      drawChart(); 
     }) 
    }) 

    </script> 

</head> 
<body> 


<input type='button' id='button_buscar' value="Buscar"> 


<div id="chart_div"></div> 

</body> 
</html>

指數-ajax.php

<?php 

///Criar a array para o Json 
$table = array(); 

//Inserir as colunas 
$table['cols'] = array(
    array('label' => 'Name', 'type' => 'string'), 
    array('label' => '#', 'type' => 'string'), 
    //array('label' => 'Selecionar', 'type' => 'string') 
); 

//Cria a array para as linhas 
$rows = array(); 


for ($i=0; $i < 2000; $i++) { 
    $temp = array(); 
    $temp[] = array('v' => 'Apple', 'p' => array('style' => 'text-align: center')); 
    $temp[] = array('v' => $i, 'p' => array('style' => 'text-align: center')); 

    $rows[] = array('c' => $temp); 

} 

$table['rows'] = $rows; 

$jsontable = json_encode($table); 

echo $jsontable; 

?>

來源

2014-10-07 user3697768

您的意思是從您的服務器或谷歌圖表API的數據？ – juvian 2014-10-07 16:08:50

對不起，我不明白這個問題。但是我希望點擊buttonn之後出現加載圖片，直到出現圖表。 – user3697768 2014-10-07 16:12:03

那麼你只需要在'drawChart（）'函數之前放置圖像，然後在ajax之後刪除它，就在你的'var data = new google.visualization.DataTable（jsonData）;'行 – juvian 2014-10-07 16:16:30

在jQuery的AJAX調用你需要添加這個...
beforeSend: function(){ $("#chart_div").html('<img src="/img/loading.gif">'); },

爲了清楚起見，此處是我爲我寫的全畫函數...

function drawChart2() { 
    $.ajax({ 
     url: '../ajax/gc_position_ret_min.php', 
     beforeSend: function(){ 
      $("#chart2").html('<img src="/img/loading.gif">'); 
     }, 
     type: 'post', 
     data: { 
      cat: cat, 
     }, 
     dataType: 'json' 
    }).done(function(data){ 
     console.log(data); 
     jsonData = data; 

     var data = new google.visualization.DataTable(jsonData); 
     var options = { 
      //none 
     }; 

     var chart = new google.charts.Bar(document.getElementById('chart2')); 
     chart.draw(data, options); 

    }).fail(function(){ 
     // 
    });//AJAX 
}

來源

2015-02-24 21:39:50 themrflibble

在谷歌圖表之前加載圖片Ajax

回答

相關問題