Question

我正在尝试使用json中的数据制作Google ComboChart。我正在使用的查询在sql引擎中工作正常，但图表没有显示。

这是Google图表脚本：

<div id="ranking_panel">
            <script type="text/javascript" src="https://www.google.com/jsapi"></script>
            <script type="text/javascript">
              google.load('visualization', '1', {packages: ['corechart']});
            </script>
            <script type="text/javascript">
              function drawVisualization() {
                // Some raw data (not necessarily accurate)
                var json = $.ajax({
                            url: 'get_json_rank.php',
                            dataType: 'json',
                            async: false
                        }).responseText;
                var data = new google.visualization.DataTable(json);
                var options = {
                  title : 'Restaurant Ranking Stats',
                  vAxis: {title: "Business Growth"},
                  hAxis: {title: "Restaurants"},
                  seriesType: "bars",
                  series: {1: {type: "line"}}
                };

                var chart = new google.visualization.ComboChart(document.getElementById('rank_chart'));
                chart.draw(data, options);
              }
              google.setOnLoadCallback(drawVisualization);
            </script>
            <div id="rank_chart"></div>
        </div>

这是json代码

<?php
$con = mysql_connect('localhost', 'root', '') or die('Error connecting to server');
mysql_select_db('db_MarkitBerry', $con);

$query = mysql_query('SELECT r_name, priority FROM tbl_restro ORDER BY priority DESC');
$table = array();
$table['cols'] = array(
    array('label' => 'Priority', 'type' => 'string'),
    array('label' => 'Restaurants', 'type' => 'string')
);

$rows = array();
while($r = mysql_fetch_assoc($query)) {
    $temp = array();
    // each column needs to have data inserted via the $temp array
    $temp[] = array('v' => $r['priority']);
    $temp[] = array('v' => $r['r_name']);
    $temp[] = array('v' => $r['r_name']);  
    $rows[] = array('c' => $temp);
}    
$table['rows'] = $rows;    
$jsonTable = json_encode($table);    
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');    
echo $jsonTable;
?>

Answer 1

调试！

从php / json方面 - 使用'pre'标签和print_r函数来查看通过您的请求输出的内容。或者，在Firefox中安装Firebug扩展，转到网络选项卡并将其设置为记录每个请求 - 打开页面，它将发出ajax请求 - 向下滚动并查看响应是什么。

在调用Google API的Javascript部分中 - 使用console.log，并使用Firebug扩展来查看每个变量中存储的内容。

function drawVisualization() {
    // Some raw data (not necessarily accurate)
    var json = $.ajax({
                        url: 'get_json_rank.php',
                        dataType: 'json',
                        async: false
                    }).responseText;
    **console.log(json);**
    var data = new google.visualization.DataTable(json);
    **console.log(data);**
    var options = {
        title : 'Restaurant Ranking Stats',
        vAxis: {title: "Business Growth"},
        hAxis: {title: "Restaurants"},
        seriesType: "bars",
        series: {1: {type: "line"}}
    };              
    var chart = new google.visualization.ComboChart(document.getElementById('rank_chart'));
    chart.draw(data, options);
}

Answer 2

你有两个问题。首先，在DataTable中创建两列，但添加三列数据（尽管第三列是重复的，因此它可能只是一个复制错误）：

$temp[] = array('v' => $r['priority']);
$temp[] = array('v' => $r['r_name']);
$temp[] = array('v' => $r['r_name']); // <-- this is a duplicate, either add a third column or delete this line

您的第二个问题是您要将两种列类型都设置为'string'，并且大多数图表（包括您可以使用ComboChart构建的所有内容）都需要至少一个'number'列。通常，您可以使用第一个（域）列作为字符串类型构建图表，但所有其他列必须是数字类型。

使用json显示组合图表

2 个答案: