【发布时间】：2013-09-16 19:38:18
【问题描述】：
我从这里阅读了很多示例，但由于某种原因，我无法让它们发挥作用。
我从这里拿了这个例子：
PHP MySQL Google Chart JSON - Complete Example
并且正在使用 PHP-MySQLi-JSON-Google 图表示例
由于某种原因，没有使用 foreach 方法从 mysql 数据库中提取数据。我现在使用 fetch_assoc 将其更改为 while 循环，它已提取数据并创建了正确的 json 格式。
当我加载页面时，虽然我只是得到一个空白页面。
我现在不知道为什么它不起作用。
这里有一些信息可能会有所帮助： php 5.3.17 OpenSuse 12.3
我检查了 apache 日志，没有错误。有什么想法我还能做些什么来解决这个问题？
jsonTable:
{
"cols":[
{"label":"Weekly Task","type":"string"},
{"label":"Percentage","type":"number"}
],
"rows":[
{"c":[{"v":"running"},{"v":30}]},
{"c":[{"v":"jorunning"},{"v":30}]},
{"c":[{"v":"job"},{"v":20}]},
{"c":[{"v":"sleeping"},{"v":40}]},
{"c":[{"v":"exercise"},{"v":50}]},
{"c":[{"v":"resting"},{"v":30}]}
]
}
这是我的代码：
<?php
$DB_NAME = 'chart';
$DB_HOST = 'localhost';
$DB_USER = 'test';
$DB_PASS = '123456';
$mysqli = new mysqli($DB_HOST, $DB_USER, $DB_PASS, $DB_NAME);
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
$query = "select * from googlechart";
if ($result = $mysqli->query($query)) {
{
$rows = array();
$table = array();
$table['cols'] = array(
array('label' => 'Weekly Task', 'type' => 'string'),
array('label' => 'Percentage', 'type' => 'number')
);
while ($row = $result->fetch_assoc()) {
$temp = array();
$temp[] = array('v' => (string) $row['weekly_activity']);
$temp[] = array('v' => (int) $row['percentage']);
$rows[] = array('c' => $temp);
}
}
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
?>
<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: 'My Weekly Plan',
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>
<?php echo $jsonTable; ?>
</body>
</html>
这是加载页面的源代码：
<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">
// 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: 'My Weekly Plan',
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.LineChart(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>
【问题讨论】：
-
完全确定不是复制/粘贴错误
<?=$jsonTable?>而应该是<?echo $jsonTable;?>?? -
在浏览器中打开页面，查看源代码，然后发布。
-
@davidkonrad - 不，试过了。没用。来源已添加。
标签： php json google-visualization