Question

我想在谷歌图表ajax加载时加载图片。

我尝试使用AjaxStart（）/ AjaxStop（）或者之前发送但它没有用。

任何人都知道如何使用谷歌图表？

加载图片的示例：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;

?>

Answer 1

在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
}

在Google Charts Ajax之前加载图片

1 个答案: