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