谷歌图表没有显示 PHP 中的 Ajax 调用

google chart not showing with ajax call in php

本文关键字：PHP 中的 Ajax 调用 显示 谷歌      更新时间：2023-09-26

这是我的数组.php其中json数据来自数据库，我从下面的脚本中得到了一个完美的结果

$table = [];
  $table['cols'] = array(
      array('id' => '', 'label' => 'Topping', 'type' => 'string'),
      array('id' => '', 'label' => 'Slices', 'type' => 'number')
      );    
$tableName = array('1' => "tb", '2' => 'tb1');
foreach ($tableName as $key => $value) {
    $row = [];
    $qry = "SELECT topping, slices FROM $value";
    $result = mysqli_query($con,$qry);
     foreach ($result as $row) {
        $temp = [];
          $temp[] = array('v' => (string) $row['topping']);
      $temp[] = array('v' => (int) $row['slices']); 
      $rows[] = array('c' => $temp);        
     }
     $result->free();
             $table['rows'] = $rows;
}
mysqli_close($con);
$jsonTable = json_encode($table, true);
echo $jsonTable;

**阵列.php数据输出，例如：**

{"cols":[{"id":"","label":"Topping","type":"string"},{"id":"","label":"Slices","type":"number"}],"rows":[{"c":[{"v":"MAX"},{"v":150}]},{"c":[{"v":"MAX1"},{"v":59}]},{"c":[{"v":"MAX2"},{"v":15}]},{"c":[{"v":"MAX3"},{"v":153}]},{"c":[{"v":"MAX4"},{"v":8}]},{"c":[{"v":"MAX5"},{"v":25}]},{"c":[{"v":"MAX6"},{"v":65}]}]

}

这是我的 Ajax 函数，我在其中从数组中计算数据.php

var jsonData = $.ajax({
url: "array.php",
dataType:"json",
}).responseText;

var data = new google.visualization.DataTable（JSON.parse（jsonData））; 变量选项 = { 标题： "我的日常活动" };var chart = new google.visualization.PieChart（document.getElementById（'piechart'））;图表绘制（数据，选项）;

**

但我仍然收到错误，请帮助**

好的，我已经将您的json输出复制到php文件（jsondata.php）中，如下所示：

$out = '{"cols":[{"id":"","label":"Topping","type":"string"},{"id":"","label":"Slices","type":"number"}],"rows":[{"c":[{"v":"MAX"},{"v":150}]},{"c":[{"v":"MAX1"},{"v":59}]},{"c":[{"v":"MAX2"},{"v":15}]},{"c":[{"v":"MAX3"},{"v":153}]},{"c":[{"v":"MAX4"},{"v":8}]},{"c":[{"v":"MAX5"},{"v":25}]},{"c":[{"v":"MAX6"},{"v":65}]}]}';
echo $out;

使用它，我修改了一点你的javascript。

  var jsonData = $.ajax({
      url: "jsondata.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.PieChart(document.getElementById('piechart'));
  var options = { title: 'My Daily Activities' };
  chart.draw(data, options);

注意两件事：

  • Ajax 调用内部的async:false。这实际上违背了Ajax的本质，但这是谷歌展示示例的方式，也是解决问题的最简单方法。

  • var data = new google.visualization.DataTable(jsonData);

这对我有用，希望它能解决你的问题。

相关文章：