从服务器端json文件中使用谷歌图表制作图表


Making a chart with Google Charts from server side json file

我正试图从数据库列创建一个图表。列中的数据在数组中进行转换。数组被转换为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"}]}

有什么想法吗?感谢

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

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

此外,如果给google.visualization.DataTable数据参数,则必须以非常特定的方式对其进行格式化。由于这有点太复杂,无法从头开始,因此您必须向google.vision提供一个简单的数组,而不是像JSON.parse为您的示例JSON文件返回的那样的对象数组。为此,您可以修改生成json的php,以生成数组的json数组(请参阅其他问题)。

json文件变为:

[["A320",2703],["B738",2212],["A321",907],["A319",711],["A332",373],["B773",355],[

你可以使用绘制

    // 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:中的列名

[["名称","计数"],["A320",2703],["B738",2212],["A31",907],["A319",711],[(A332),373],[(B773),355],[[(A333),326],[

谷歌数据表可以更容易地制作:

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