我正在尝试对数据库中的某些数据进行简单的可视化,这是通过简单的Web服务从JSON获得的。一切都在localhost上完成。问题似乎是DataTable构造函数的JSON格式。我已经阅读了文档,我认为我已经创建了精确的json格式,但由于某种原因,当我将数据传递给DataTable构造函数时,它不会创建数据表,并且图表不是初始化它只是给出了一个错误:表没有列。我从数据库获得的数据很好。该图表使用以文字形式给出的示例数据,因此它不是javascript。
以下是json生成的代码(注意,我也尝试用相反的顺序制作带有“”和“'的标记的json,意思是'cols':[{id:'ID',类型: 'string'},它也不起作用):
$niz = array();
while ($red = $db->getResult()->fetch_object())
{
$niz[] = $red;
}
$jsonResponse = '{
"cols": [{id: "ID", type: "string"},
{id: "Poles", type: "number"},
{id: "Victories", type: "number"},
{id: "Team", type: "string"}
],
"rows": [';
$i = 0;
foreach ($niz as $line) {
$i = $i+1;
$addOn = '{"c":[{"v": "'.$line->name.'"}, {"v": '.$line->poles.'}, {"v": '.$line->victories.'}, {"v": "'.$line->teamName.'"}]}';
if($i == count($niz))
{
$addOn.='] }';
}
else
{
$addOn.=',';
}
$jsonResponse.=$addOn;
}
echo json_encode($jsonResponse);
});
以下是图表客户端的代码:
<html>
<head>
<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">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "http://127.0.0.1/VisualisationWS/poleVictoryRatio.json",
dataType:"json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var options = {
title: 'Correlation between pole positions and wins of drivers, taking in account the team they are currently in.',
hAxis: {title: 'Poles'},
vAxis: {title: 'Victories'},
bubble: {textStyle: {fontSize: 11}},
};
var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
答案 0 :(得分:1)
您的JSON无效。 JSON中的对象键必须使用双引号引用,例如:{id: "ID", type: "string"}
应为{"id":"ID","type":"string"}
。通过手动将数据编码为JSON,您可能会错失使用json_encode
函数的所有好处(它实际上在您当前的设置中几乎没有任何功能)。如果您在数组中构建数据,json_encode
将很乐意为您编写数据编码的繁琐部分:
$myData = array(
'cols' => array(
array('id' => 'ID', 'type' => 'string'),
array('id' => 'Poles', 'type' => 'number'),
array('id' => 'Victories', 'type' => 'number'),
array('id' => 'Team', 'type' => 'string')
),
'rows' => array();
);
while ($red = $db->getResult()->fetch_object()) {
$myData['rows'][] = array('c' => array(
array('v' => $red->name),
array('v' => $red->poles),
array('v' => $red->victories),
array('v' => $red->teamName)
));
}
echo json_encode($myData, JSON_NUMERIC_CHECK);
作为参考,PHP的关联数组被编码为javascript对象,非关联数组被编码为javascript数组。 JSON_NUMERIC_CHECK
扫描数据中的数字以确保它们被编码为数字而不是字符串(这有助于因为某些数据库将数字输出为字符串,MySQL是主要罪魁祸首)。