我正在做一个项目,我正在使用Google Charting API,我想使用json填充图表来构建数据表。
作为一项测试,我试图在尝试使用数据库中的动态数据之前构建一个简单的数组,但我在获取正确格式的json时遇到了问题。
在谷歌文档中,它说json内容应该如下:
{
"cols": [
{"id":"","label":"Topping","pattern":"","type":"string"},
{"id":"","label":"Slices","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
{"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
]
}
我正在调用一个返回json代码的函数。
以下是如何将该函数称为
print json_encode(test());
测试功能为
function test()
{
$array = array();
$array['cols'][] = "20-01-13";
$array['cols'][] = "21-01-13";
$array['cols'][] = "22-01-13";
$array['rows'][] = 22;
$array['rows'][] = 26;
$array['rows'][] = 12;
return $array;
}
生成图表的javascript如下
<script>
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: "loadGraph.php",
dataType:"json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('lineGraph'));
chart.draw(data, {width: 400, height: 240});
}
</script>
当我回显json时,它以以下格式返回
{"cols":["20-01-13","21-01-13","22-01-13"],"rows":[22,26,12]}
如果我尝试将其用于谷歌图表的数据集,我会得到以下消息
Cannot read property of '1' of undefined
我只是在构建一个简单的折线图,它只包含x轴上的一个日期,以及y轴上该日期发生的次数。
我需要如何构建数组,以使其具有谷歌api图表的正确格式。
感谢您提供的任何帮助。
您需要为列指定参数类型。参考Google图表JSON格式
您的PHP代码应该类似于:
function test()
{
$array['cols'][] = array('type' => 'string');
$array['cols'][] = array('type' => 'string');
$array['cols'][] = array('type' => 'string');
$array['rows'][] = array('c' => array( array('v'=>'20-01-13'), array('v'=>22)) );
$array['rows'][] = array('c' => array( array('v'=>'21-01-13'), array('v'=>26)));
$array['rows'][] = array('c' => array( array('v'=>'22-01-13'), array('v'=>12)));
return $array;
}
print json_encode(test());
您的json代码看起来更像:
{
"cols": [
{"type": "string"},
{"type": "string"},
{"type": "string"}
],
"rows": [
{"c":[{"v":"20-01-13"}, {"v":22} ]},
{"c":[{"v":"21-01-13"}, {"v":26} ]},
{"c":[{"v":"22-01-13"}, {"v":12} ]}
]
}
这可能会来得有点晚,但无论如何,以下是对我有效的方法(需要创建一个barchart)。
-
获取服务器代码以返回表示数组的json字符串,例如:
[{ "score": 12, "subject": "Computer Graphics" }, { "score": 65, "subject": "Entreprenuership" }, { "score": 82, "subject": "C++Programming" }]
-
使用
eval()
或JSON.parse()
解析字符串以获得JavaScript对象。var chartData = JSON.parse(jsonStringFromServer);
-
创建这样一个DataTable对象:
var dTable = new google.visualization.DataTable();
-
将列添加到数据表:
dTable.addColumn('string','Subject'); dTable.addColumn('number','Score'); //more columns if needed...
-
循环遍历javascript数组(
chartData
),对于数组中的每个对象,在dataTable
:中添加一个新行for(i=0;i<chartData.length;i++){ var currentObj = chartData[i]; dTable.addRow([currentObj.subject,currentObj.score]); } //set options for the chart e.g title, width etc // create the chart ...
它应该像:
array(10) {
[0]=>
array(2) {
[0]=>
string(2) "en"
[1]=>
int(104)
}
[1]=>
array(2) {
[0]=>
string(0) ""
[1]=>
int(70)
}
[2]=>
array(2) {
[0]=>
string(2) "zh"
[1]=>
int(13)
}
[3]=>
array(2) {
[0]=>
string(2) "ru"
[1]=>
int(10)
}
...
然后
var data = google.visualization.arrayToDataTable(<?php echo json_encode($our_array); ?>);
var chart = new google.visualization.PieChart(document.getElementById('someId'));
chart.draw(data, options);