使用 json 显示组合图答案

【问题标题】：Show Combo chart using json使用 json 显示组合图
【发布时间】：2014-05-27 06:32:20
【问题描述】：

我正在尝试使用来自 json 的数据制作一个 google ComboChart。我正在使用的查询在 sql 引擎中运行良好，但图表未显示。

这是谷歌图表脚本：

<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;
?>

【问题讨论】：

调试你的代码。打开开发者工具并查看控制台，检查是否有任何 Javascript 错误。看看网络标签，你的ajax请求通过了吗？

标签： php mysql json google-visualization

【解决方案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);
}

【讨论】：

【解决方案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' 列。通常，您可以构建一个图表，其中第一列（域）为字符串类型，但所有其他列必须为数字类型。

【讨论】：