谷歌泡泡图错误:表没有列

时间:2014-02-07 16:13:59

标签: jquery json google-visualization bubble-chart

我正在尝试对数据库中的某些数据进行简单的可视化,这是通过简单的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>

1 个答案:

答案 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是主要罪魁祸首)。