从服务器端 json 文件使用 Google Charts 制作图表答案

【问题标题】：Making a chart with Google Charts from server side json file从服务器端 json 文件使用 Google Charts 制作图表
【发布时间】：2015-03-20 21:24:16
【问题描述】：

我正在尝试从数据库列创建图表。列中的数据转换为数组。数组转换为 json 格式，但 json 文件有问题。显示图表的文件仅显示错误： "表没有列"

这是统计页面：

<style type="text/css"></style>  <!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">

// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

function drawChart() {
  var jsonData = $.ajax({
      url: "getData.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('chart_div'));
  chart.draw(data, {width: 400, height: 240});
}

</script>    </head> <body><div id="chart_div"></div> </div> </body> </html>

getData.php 文件

 <?php  $string = file_get_contents("result.json"); echo $string; ?>

将数组转换为json格式文件的文件：

> <?php  require('required/settings.php');
> include('required/config.php');
> $query = mysql_query("SELECT DISTINCT ModelCode, COUNT(ModelCode) as
> count from flights GROUP BY ModelCode ORDER BY count DESC LIMIT 0,
> 10;");
> $response = array(); $posts = array();
> while($row=mysql_fetch_array($query))  {  $name=$row['ModelCode']; 
> $count=$row['count']; 
> $posts[] = array('name'=> $name, 'count'=> $count);
> } 
> $response['posts'] = $posts;
> $fp = fopen('result.json', 'w'); fwrite($fp, json_encode($response));
> fclose($fp);
> ?>

并创建了 json 文件：

{"posts":[{"name":"A320","count":"2703"},{"name":"B738","count":"2212"},{"name":"A321","count":"907"},{"name":"A319","count":"711"},{"name":"A332","count":"373"},{"name":"B773","count":"355"},{"name":"A333","count":"326"},{"name":"A388","count":"299"},{"name":"B737","count":"258"},{"name":"B744","count":"177"}]}

有什么想法吗？谢谢

【问题讨论】：

//ajax.googleapis.com 应该是http://ajax.googleapis.com

标签： php

【解决方案1】：

您没有解析 json。你可以使用纯 javascript JSON.parse:

    // Create our data table out of JSON data loaded from server.
    var tableData = JSON.parse(jsonData);

此外，如果您提供google.visualization.DataTable 的data 参数，则它必须采用very specific way 的格式。由于这有点太复杂，无法从头开始，您必须为 google.visualization 提供一个简单的数组数组，而不是像 JSON.parse 为您的示例 json 返回的对象数组文件。为此，您可以修改生成 json 的 php 以生成数组的 json 数组 (see this other question)。

json文件变成：

[["A320",2703],["B738",2212],["A321",907],["A319",711],["A332",373],["B773",355 ],["A333",326],["A388",299],["B737",258],["B744",177]]

您可以使用以下方法绘制它：

    // Create our data table out of JSON data loaded from server.
    var tableData = JSON.parse(jsonData);
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'name');
    data.addColumn('number', 'count');
    data.addRows(tableData);

    // Instantiate and draw our chart, passing in some options.
    chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 400, height: 240});

}

另外，如果你的第一行包含 json 中的列名：

[["name","count"],["A320",2703],["B738",2212],["A321",907],["A319",711],["A332" ,373],["B773",355],["A333",326],["A388",299],["B737",258],["B744",177]]

google DataTable 可以更轻松地制作：

    var tableData = JSON.parse(jsonData);
    var data = new google.visualization.arrayToDataTable(tableData);

【讨论】：

你能告诉我更多细节吗？我对JQuery一点也不熟悉
不幸的是，我仍然在统计页面上收到“表没有列”错误
你能检查一下新版本的答案是否解决了你的问题吗？