【发布时间】：2014-03-13 22:25:12
【问题描述】：
我正在尝试使用谷歌 api 创建谷歌图表，这很好用：
<?php
echo "hi";
$mysqli =mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: ".mysqli_connect_error();
}
$result = $mysqli->query('SELECT * FROM new_view');
$rows = array();
$table = array();
$table['cols'] = array(
array('label' => 'ind_type', 'type' => 'string'),
array('label' => 'Index_val', 'type' => 'number')
);
/* Extract the information from $result */
foreach($result as $r) {
$temp = array();
// The following line will be used to slice the Pie chart
$temp[] = array('v' => (string) $r['ind_type']);
// Values of the each slice
$temp[] = array('v' => (int) $r['Index_val']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
// convert data into JSON format
$jsonTable = json_encode($table);
//echo $jsonTable;
?>
<html>
<head>
<!--Load the Ajax API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
title: 'Index analysis',
is3D: 'true',
width: 800,
height: 600
};
// Instantiate and draw our chart, passing in some options.
// Do not forget to check your div ID
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--this is the div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
但现在我尝试将 html 部分放入另一个文件中，将数据库部分放入另一个文件中，如下所示：
ajax_form_temp.php
<html>
<head>
<!--Load the Ajax API-->
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<meta content="utf-8" http-equiv="encoding" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonTable = $.ajax({
url:"ajax_graph_temp.php",
dataType:"json",
async:true
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonTable);
var options = {
title: 'Index analysis',
is3D: 'true',
width: 800,
height: 600
};
// Instantiate and draw our chart, passing in some options.
// Do not forget to check your div ID
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--this is the div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
和 ajax_graph_temp.php
<?php
$mysqli =mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: ".mysqli_connect_error();
}
$result = $mysqli->query('SELECT * FROM new_view');
$rows = array();
$table = array();
$table['cols'] = array(
array('label' => 'ind_type', 'type' => 'string'),
array('label' => 'Index_val', 'type' => 'number')
);
/* Extract the information from $result */
foreach($result as $r) {
$temp = array();
// The following line will be used to slice the Pie chart
$temp[] = array('v' => (string) $r['ind_type']);
// Values of the each slice
$temp[] = array('v' => (int) $r['Index_val']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
// convert data into JSON format
$jsonTable = json_encode($table);
echo $jsonTable;
?>
代码相同。就在第二种方法中，使用 json 获取表数据。
但是在var data = new google.visualization.DataTable(jsonTable); 行，jsonTable 无法获取列，尽管它存在。
在浏览器中：Table has no column error 来了！列已声明$table['cols'] = array(
array('label' => 'ind_type', 'type' => 'string'),
array('label' => 'Index_val', 'type' => 'number')
问题出在哪里？
【问题讨论】：
-
请向我们展示您的最终 json 输出。也许你的结果中有一些非 utf8 字符，所以 json json_encode 返回 null。
-
这听起来像是对 Google 数据表的支持请求。请联系软件供应商以获取您的支持选项。顺便说一句，您在问题中发布的大部分代码似乎都不相关，如果您提出问题，请首先将代码减少到最低限度以显示您的问题。此外，这听起来像是对非常个别的代码行的调试请求。同样，在这里，降低复杂性，首先排除故障，以便将您的个人问题概括为编程问题。
-
@steven：感谢您的回复！最终输出是饼图。如果 utf8 字符有问题，那么它在第一种情况下也不应该工作！
-
我已经给出了以上所有需要的答案：[在此处输入链接描述][1] [1]：stackoverflow.com/questions/17680900/…
-
这是Solution 。我也遇到了同样的问题，并使用 ajax 来解决这个问题。
标签： php javascript ajax google-visualization