JSON到使用Ajax的Google Charts - JSON to Google Charts using Ajax

JSON to Google Charts using Ajax

本文关键字：Google Charts Ajax JSON | 更新日期: 2023-09-27

任何关于这个问题的帮助将不胜感激！我正在尝试使用 ajax 响应表单 PHP 文件构建谷歌图表。以下是我的gettabledata.php文件及其输出：

 $data= array(
             'cols' => array(
                          array('id' => 'Area','label' => 'Area', 'type' => 'string'),
                          array('id' => 'Condition','label' => 'Condition', 'type' => 'string')),
          'rows' => array());
while($row = mysql_fetch_array($result)){
  array_push($data['rows'], array('c' => array(
  array('v' => $row['Area']),
  array('v' => $row['Condition']))));
  } 
$jsonData = json_encode($data);  
echo $jsonData;

输出为：

   {"cols":[{"id":"Area","label":"Area","type":"string"}, {"id":"Condition","label":"Condition","type":"string"}],"rows":[{"c":[{"v":"Sk"},{"v":"Healthy"}]},{"c":[{"v":"Sk"},{"v":"Healthy"}]},{"c":[{"v":"Sk"},{"v":"Healthy"}]}]}

当我使用以下代码构造图形时，出现错误：未捕获的引用错误：未定义$jsonTableData

这是我的 php 文件：

 function drawItems(num) {
    //alert(num);
  var jsonTableData = $.ajax({
  url: "gettabledata.php",
  data: "q="+num,
  dataType:"json",
  async: false
}).responseText;
var tabledata = new google.visualization.DataTable($jsonTableData);
var table = new google.visualization.Table(document.getElementById('table_div'));
    table.draw(tabledata);
}

最后，经过几个小时的谷歌搜索，我找到了解决方案:)

答案如下：

function drawItems(num) {
  var jsonTableData = $.parseJSON($.ajax({
  url: "gettabledata.php",
  data: "q="+num,
  dataType:"json",
  async: false
}).responseText);

var tabledata = new google.visualization.DataTable(jsonTableData);
var table = new google.visualization.Table(document.getElementById('table_div'));
    table.draw(tabledata);

}