Question

我已经在互联网上搜索了几天，我认为这是一个相当常见的请求，即使用来自远程服务器的数据（JSON数据表）填充本地服务器上的Google可视化表。

我在谷歌代码游乐场（http://code.google.com/apis/ajax/playground/?type=visualization#json_data_table）上找到了一个帮助我入门的编码示例。此示例非常适合将表条目直接硬编码到html文件中。

我希望使用来自远程服务器的JSONP请求填充本地Google可视化表，而不是硬编码值。这是我的php文件的内容，它位于远程服务器上：

<?php
//connect to mysql database using authentication credentials 
require_once( "inc/<connection file>.inc" );

// Query table
$sql="select id, address from historical_sales order by id";

$result = mysqli_query($con,$sql); 

$table = array();

$table['cols'] = array(
    array(id => "id", label => "ID", type => "string"),
    array(id => "address", label => "Address", type => "string")
);

$rows = array();
while($r = mysqli_fetch_assoc($result)) {
    $temp = array();
    $temp[] = array("v" => $r["id"]);
    $temp[] = array("v" => $r["address"]); 

    $rows[] = array("c" => $temp);
}

// populate the table with rows of data
$table['rows'] = $rows;

// encode the table as JSON
$jsonTable = json_encode($table);

header('Content-type: application/json');

echo $_GET['callback'] . '(' . $jsonTable . ')'; 
?>

此文件的输出如下：

（{ “COLS”：[{ “ID”： “ID”， “标签”： “ID”， “类型”： “串”}，{ “ID”： “地址”， “标签”：”地址“，”输入“：”字符串“}”，“行”：[{“c”：[{“v”：“1”}，{“v”：“355 W Honeysuckle Dr}}}}，{ “c”：[{“v”：“2”}，{“v”：“1688 W Yosemite Pl”}}}，{“c”：[{“v”：“3”}，{“v” ：“3800 S Cantabria Cir A-1001”}]}，{“c”：[{“v”：“4”}，{“v”：“3560 S Hollyhock Pl”}}}，{“c”： [{“v”：“5”}，{“v”：“1645 W Lantana Ct”}}}}}）

我的HTML文件包含以下代码：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js" ></script>   
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">                                                               
    google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">
$(document).ready(function()
{
    function drawVisualization() {
    // Create and populate the data table.
    $.getJSON("http://mhsw.com/realestate/jsonp-xs.php?callback=?", {},function (jdata)
    {var JSONObject = jdata;
         document.getElementById("jid_label").innerHTML=JSONObject.cols[0].label;
         document.getElementById("jaddress_label").innerHTML=JSONObject.cols[1].label;
    });
var data = new google.visualization.DataTable(JSONObject, 0.6);
// Create and draw the visualization.
visualization = new google.visualization.Table(document.getElementById('table'));

visualization.draw(data, {'allowHtml': true});
                                                                          }                                                                          
google.setOnLoadCallback(drawVisualization);
});

</script><div id="table"></div>
<p>
ID: <span id="jid_label"></span><br />
Address: <span id="jaddress_label"></span><br />
</p>

我非常确定HTML文件中的回调函数正在接收JSON数据，因为我正在显示ID和地址标签，但是谷歌可视化表不会显示。任何有关此问题的帮助将不胜感激。

Answer 1

这是解决问题的新HTML文件：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js" ></script>   
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">                                                               
    google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">


$(document).ready(function()
{
    function drawVisualization() 
    {
        // Create and populate the data table.
        $.getJSON("http://mhsw.com/realestate/jsonp-xs.php?callback=?", {},function (jdata)
        {
            var JSONObject = jdata;
            document.getElementById("jid_label").innerHTML=JSONObject.cols[0].label;
            document.getElementById("jaddress_label").innerHTML=JSONObject.cols[1].label;
            var data = new google.visualization.DataTable(JSONObject, 0.6);

            // Create and draw the visualization.
            visualization = new google.visualization.Table(document.getElementById('table'));
            visualization.draw(data, {'allowHtml': true});
        });
    }
    google.setOnLoadCallback(drawVisualization);
});

</script><div id="table"></div>
<p>
ID: <span id="jid_label"></span><br />
Address: <span id="jaddress_label"></span><br />
</p>

Google可视化表未显示getJSON调用远程服务器

1 个答案: