Php 在Google图表Ajax之前加载图像_Php_Jquery_Ajax_Google Visualization

Php 在Google图表Ajax之前加载图像

php jquery ajax google-visualization

Php 在Google图表Ajax之前加载图像,php,jquery,ajax,google-visualization,Php,Jquery,Ajax,Google Visualization,我想在GoogleChartAjax加载时放置一个加载图像我尝试使用AjaxStart（）/AjaxStop（）或beforeSend，但没有成功有人知道谷歌图表是怎么做到的吗加载图像的示例： Index.php <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="index.css" /> <script typ

我想在GoogleChartAjax加载时放置一个加载图像

我尝试使用AjaxStart（）/AjaxStop（）或beforeSend，但没有成功

有人知道谷歌图表是怎么做到的吗

加载图像的示例：

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>


//加载可视化API和piechart包。
load（'visualization'，'1'，{'packages'：['table']}）；
//setOnLoadCallback（drawChart）；
函数绘图图（）{
var jsonData=$.ajax({
url:“Index ajax.php”，
数据类型：“json”，
异步：false
}).responseText；
//使用从服务器加载的JSON数据创建我们的数据表。
var data=新的google.visualization.DataTable（jsonData）；
//实例化并绘制图表，传入一些选项。
var chart=new google.visualization.Table（document.getElementById（'chart_div'））；
draw（数据，{width:1000，'allowtml'：true}）；
}
$（文档）.ready（函数clicar_botão_buscar（）{
$（“#按钮”）。单击（函数（）{
图纸（）；
})
})

Index-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;

?>

在jQuery AJAX调用中，您需要添加以下内容

发送前：函数（）{
$（“#chart_div”）.html（“”）；
}，

为了清楚起见，这里是我为自己编写的完整绘图函数…

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
}

函数drawChart2（）{
$.ajax({
url:“../ajax/gc_position_ret_min.php”，
beforeSend:function（）{
$（“#图表2”）.html（“”）；
},
键入：“post”，
数据：{
猫：猫，
},
数据类型：“json”
}).完成（功能（数据）{
控制台日志（数据）；
jsonData=数据；
var data=新的google.visualization.DataTable（jsonData）；
变量选项={
//没有
};
var chart=new google.charts.Bar（document.getElementById（'chart2'）；
图表绘制（数据、选项）；
}).fail（函数（）{
//
})；//AJAX
}

您是指来自您的服务器或谷歌图表api的数据？对不起，我不明白这个问题。但是我希望加载的图像在单击按钮后出现，直到图表出现。那么，您只需要将图像放在

drawChart（）

函数之前，并在ajax之后删除它，就在

var data=new google.visualization.DataTable（jsonData）之前行我试图添加$（'#chart_div'）.html（“”）在绘制图表之前，但什么都没有发生。如果可以，请尝试设置宽度和高度