我正在创建我的第一个仪表板站点，以向各种用户动态显示 MySQL 数据。在某些情况下，我正在使用 Webmatrix PHP 入门站点，并且无法弄清楚如何将数据查询为 .json 格式以供 Google Charts API 读取。我已经成功地硬编码了一个数组以使用 .ajax 传递给 Google Chart，但是在从 SQL 查询构建数组时遇到了麻烦。
我整周都在寻找解决方案，但还没有找到。
我当前的代码如下并返回“表没有列”错误。
-查询并解析为.json（未解决）
<?php
// -----> Query MySQL and parse into JSON below. <------
// write your SQL query here (you may use parameters from $_GET or $_POST if you need them)
require_once ("Includes/session.php");
require_once ("Includes/simplecms-config.php");
require_once ("Includes/connectDB.php");
include("Includes/header.php");
$recId = null;
$projid = null;
$hours = null;
$recId = $_GET['id'];
$projid = $_GET['projid'];
$hours = $_GET['hours'];
$query = "SELECT projid, hours FROM hours WHERE id = ?";
$statement = $databaseConnection->prepare($query);
$statement->bind_param('d', $recId);
$statement->execute();
$statement->store_result();
$rows = array();
$table = array();
$table['cols'] = array(
array('label' => 'projid', 'type' => 'string'),
array('label' => 'hours', '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['projid']);
// Values of the each slice
$temp[] = array('v' => (int) $r['hours']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
// convert data into JSON format
$jsonTable = json_encode($table);
//echo $jsonTable;
?>
-加载 .ajax 并绘制图表（已解决）
<?php
include("Includes/header.php");
include("Includes/charts/piecharthours.php");
include("Includes/charts/linechart.php");
?>
<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() {
var jsonData = $.ajax({
url: "getDatahours.php",
dataType: "json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, { width: 400, height: 240 });
setInterval(drawChart, 500);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div" style="width: 500px; height: 500px;"></div>
</body>
</html>
-控制台输出
Uncaught Error: Invalid JSON string: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Dashboard</title>
<link href="/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="/Styles/Sitemenu.css" rel="stylesheet" type="text/css" />
<link href="/Styles/site2.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<div class="outer-wrapper">
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
<a href="/index.php" class="uclogo">UC Logo</a>
<a href="/index.php">UC</a></p>
</div>
<div class="float-right">
<section id="login">
<ul id="login">
<li><a href="/logoff.php">Sign out</a></li>
<li><a href="/addpage.php">Add</a></li>
<li><a href="/selectpagetoedit.php">Edit</a></li>
<li><a href="/deletepage.php">Delete</a></li>
</ul>
<div class="welcomeMessage">Welcome, <strong>ID</strong></div>
</section>
</div>
<div class="clear-fix"></div>
</div>
<section class="navigation" data-role="navbar">
<nav>
<ul id="menu">
<li><a href="/index.php">Dashboard</a></li>
<li><a href="/projects.php">Projects</a>
<ul>
<li><a href="/page.php?pageid=1">P4</a></li>
<li><a href="/page.php?pageid=2">P1</a></li>
<li><a href="/page.php?pageid=3">P2</a></li>
<li><a href="/page.php?pageid=4">P3</a></li>
</ul>
<li><a href="/resources.php">Resources</a></li>
<li><a href="/reporting.php">Reporting</a></li>
<li><a href="/help.php">Help</a></li>
</ul>
</nav>
</section>
</header> format+en,default,corechart.I.js:60
Uncaught Error: Container is not defined example.php:6
Uncaught Error: Invalid JSON string: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Dashboard</title>
<link href="/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="/Styles/Sitemenu.css" rel="stylesheet" type="text/css" />
<link href="/Styles/site2.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<div class="outer-wrapper">
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
<a href="/index.php" class="uclogo">UC Logo</a>
<a href="/index.php">UC</a></p>
</div>
<div class="float-right">
<section id="login">
<ul id="login">
<li><a href="/logoff.php">Sign out</a></li>
<li><a href="/addpage.php">Add</a></li>
<li><a href="/selectpagetoedit.php">Edit</a></li>
<li><a href="/deletepage.php">Delete</a></li>
</ul>
<div class="welcomeMessage">Welcome, <strong>ID</strong></div>
</section>
</div>
<div class="clear-fix"></div>
</div>
<section class="navigation" data-role="navbar">
<nav>
<ul id="menu">
<li><a href="/index.php">Dashboard</a></li>
<li><a href="/projects.php">Projects</a>
<ul>
<li><a href="/page.php?pageid=1">P4</a></li>
<li><a href="/page.php?pageid=2">P1</a></li>
<li><a href="/page.php?pageid=3">P2</a></li>
<li><a href="/page.php?pageid=4">P3</a></li>
</ul>
<li><a href="/resources.php">Resources</a></li>
<li><a href="/reporting.php">Reporting</a></li>
<li><a href="/help.php">Help</a></li>
</ul>
</nav>
</section>
</header>