使用 ajax 实现 Google 可视化图表重新加载答案

【问题标题】：Achieving Google Visualization chart reloads using ajax使用 ajax 实现 Google 可视化图表重新加载
【发布时间】：2011-09-06 00:49:24
【问题描述】：

一直在网上四处寻找，但到目前为止还没有找到任何东西......有人可以帮忙吗？

我已创建一个简单的HTML页面，其中包含一个列表框，其中选择时调用单个PHP脚本以运行数据库查询并打印一个结构HTML页面。这是使用 ajax 调用实现的，当用户更改列表框中的值时，它会导致页面重新加载。

现在，我想从使用 html 标签和打印 statemetns 生成表格转移到更漂亮的东西，并发现了谷歌可视化 api。我已经准备好浏览该网站的许多页面并使用了代码游乐场，但无法找到信息来帮助我了解如何使用可视化 api 生成表格并将其传递回 div 标签中的主页，使用相同的 php 脚本。

过去有没有人有任何指示或经验？

谢谢。

【问题讨论】：

标签： php ajax charts google-visualization

【解决方案1】：

您可以使用 jQuery AJAX 和一些由您的 php.ini 生成的数组来实现这一点。这是一个非常基本但直接的方法 - 如果这被证明是不够的，您可能需要四处寻找 php 客户端库，这些库会在您的 php 中为您生成 gviz 代码。

这是一个工作示例：

HTML 文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("jquery", "1.6.1");
      google.load('visualization', '1', {packages: ['table']});
    </script>
    <script type="text/javascript">

    function drawVisualization(dataFromAjax) {
      var data = google.visualization.arrayToDataTable(dataFromAjax);
      visualization = new google.visualization.Table(document.getElementById('table'));
      visualization.draw(data);
    }

    function makeAjaxCall() {
      $.ajax({url:'test.php',
              data: {},
              success: function(responseData) {
                         // eval just for testing - make safer
                         var arrayForGviz = eval("(" + responseData + ")");
                         drawVisualization(arrayForGviz);
                       }
        });
    }
    </script>
  </head>
  <body>
    <input type="button" onclick="makeAjaxCall();return false;" value="Click to get data"></input>
    <div id="table"></div>
  </body>
</html>

PHP 文件

<?php
echo "[['Country','City','Value'],
       ['Ireland','Dublin','10'],
       ['France','Paris','15']]"
?>

显然我的 php 文件是静态的，但每次用户与页面交互并触发 makeAjaxCall() 时，您都可以发送不同的参数，并返回不同的数组响应。

【讨论】：

感谢 Oli - 非常感谢
感谢 Oli，这行代码为我省去了很多痛苦： var arrayForGviz = eval("(" + responseData + ")");
我非常感谢你！
非常感谢，这一行真的解决了我的问题 var arrayForGviz = eval("(" + result + ")");