Google Charts Ajax 전에 이미지로드

Google 차트 아약스가로드되는 동안로드하는 이미지를 넣으려고합니다.Google Charts Ajax 전에 이미지로드

AjaxStart()/AjaxStop() 또는 beforeSend를 사용하려고했지만 작동하지 않았습니다.

누구나 Google 차트로 어떻게 할 수 있는지 알고 있습니까? 로딩 이미지의

예 : 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>

당신이 ...
이를 추가해야 jQuery를 AJAX에서 색인 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

서버 또는 Google 차트 API의 데이터를 의미합니까? – juvian

미안하지만, 나는 그 질문을 이해하지 못했습니다. 하지만 단추를 클릭하고 차트가 나타날 때까지로드 이미지가 나타나길 원합니다. – user3697768

글쎄, 당신은'drawChart()'함수 앞에 이미지를 놓고,'var data = new google.visualization.DataTable (jsonData);'라인 바로 앞에서 ajax 다음에 그것을 제거 할 필요가있다. – juvian

전화 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

Google Charts Ajax 전에 이미지로드

답변

관련 문제