使用Google圖表從服務器端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"}]}
有任何想法嗎？ 謝謝
1 個解決方案
解決方案1
0 已采納 2015-03-20 22:50:59
您沒有解析json。 您可以使用普通的javascript JSON.parse ：
// Create our data table out of JSON data loaded from server.
var tableData = JSON.parse(jsonData);
此外，如果您提供google.visualization.DataTable的data參數，則必須以非常特定的方式設置其格式。 由於從頭開始制作起來有點太復雜，因此您必須使用簡單的數組數組而不是像JSON.parse返回的示例json文件那樣的對象數組來為google.visualization提供數據。 為此，您可以修改生成json的php以生成array的json數組（ 請參閱此其他問題 ）。
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中的列名：
[[“名稱”，“計數”]，[“ 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);
PHP使用Google圖表制作圖表
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.