0
我正在寫一個網頁，以顯示使用AmCharts存儲在MySQL數據庫中的數據圖形，但是在從中加載數據時遇到問題。我將AmCharts圖表製造商的'time series，seconds'模板（包括使用dataProvider顯示的提供的數據）中的代碼複製到我的頁面中。正如所料，這項工作完全正常。AmCharts dataLoader不加載數據，但粘貼數據並使用dataProvider工作正常
然後我使用AmCharts網站上的dataLoader教程來嘗試從我的數據庫加載數據。我編輯我的當前代碼（從上面提到的圖表製造者複製）通過去除dataProvider部分和下"type": "serial",線以下加入：
"dataLoader": {
"url": "getdata.php"
},
最後，我在圖形部改變了categoryField和兩個valueField屬性所以他們匹配我的數據。該getdata.php文件在同一目錄中，我要顯示在圖形頁面，包含下面的代碼：
<?php
$host = "*";
$username = "*";
$password = "*";
$database = "*";
$connection = mysqli_connect($host, $username,
$password, $database) or die("response[0]");
// Query the database to get latest weather report
$reportQuery = "SELECT * FROM stationdata WHERE timestamp BETWEEN '2016-09-20 18:00:00' AND '2016-09-20 22:30:00'";
$executeReport = mysqli_query($connection, $reportQuery);
$data = array();
while ($row = $executeReport->fetch_assoc()) {
$data[] = $row;
}
echo json_encode($data);
?>
然而，加載圖表頁面時，我得到的是一個空的圖表與標題，圖例和AmCharts水印，沒有數據顯示。我知道訪問getdata.php文件是正確的，因爲我在瀏覽器中運行它，並得到了以下的輸出：
[{"reportid":"00000001","timestamp":"2016-09-20 18:53:00","shieldedtemp":"16.25","exposedtemp":"16.31","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"},{"reportid":"00000002","timestamp":"2016-09-20 18:54:00","shieldedtemp":"16.25","exposedtemp":"16.31","soil10temp":"16.94","soil30temp":"15.56","soil100temp":"15.63"},{"reportid":"00000003","timestamp":"2016-09-20 18:55:00","shieldedtemp":"16.31","exposedtemp":"16.38","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"},{"reportid":"00000004","timestamp":"2016-09-20 18:56:00","shieldedtemp":"16.31","exposedtemp":"16.31","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"},{"reportid":"00000005","timestamp":"2016-09-20 18:57:00","shieldedtemp":"16.25","exposedtemp":"16.25","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"},{"reportid":"00000006","timestamp":"2016-09-20 18:58:00","shieldedtemp":"16.25","exposedtemp":"16.19","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"},{"reportid":"00000007","timestamp":"2016-09-20 18:59:00","shieldedtemp":"16.25","exposedtemp":"16.19","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"},{"reportid":"00000008","timestamp":"2016-09-20 19:00:00","shieldedtemp":"16.19","exposedtemp":"16.13","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"}]
而且，當我刪除dataLoader屬性並粘貼上述JSON成dataProvider屬性，一切工作正常並顯示數據。
主圖表頁面的代碼如下： 「; $用戶名= 」「; $密碼=」 「; 的$ database =」「;
$connection = mysqli_connect($host, $username,
$password, $database) or die("response[0]");
// Query the database to get latest weather report
$reportQuery = "SELECT * FROM stationdata WHERE timestamp BETWEEN '2016-09-20 18:00:00' AND '2016-09-20 19:00:00'";
//$executeReport = mysqli_query($connection, $reportQuery);
//$data = array();
//while ($row = $executeReport->fetch_assoc()) {
// $data[] = $row;
//}
//echo json_encode($data);
?>
<html>
<head>
<title>Remote Latest Data Warwick</title>
<style>
* {
font-family: "Segoe UI", "-apple-system", "Helvetica Neue";
}
.headerContainer {
width: 100%;
height: 88;
top: 0;
position: fixed;
background: black;
}
.headerRight {
width: 560;
height: 78;
float: right;
}
.textMo {
margin-top: 16;
margin-left: 25;
float: left;
font-size: 38;
color: white;
}
.textRld {
margin-top: 8;
margin-right: 15;
float: right;
font-size: 40;
color: white;
}
.textLoc {
margin-right: 70;
float: right;
font-size: 13;
color: white;
}
.greenBar {
width: 100%;
height: 7;
top: 78;
position: fixed;
background: #cbff31;
}
.footerContainer {
width: 100%;
height: 39;
margin-bottom: 0 auto;
bottom: 0;
position: fixed;
background: black;
}
.footerFieldContainer {
max-width: 1216;
height: 39;
margin: 0 auto;
padding-top: 2;
padding-right: 10;
padding-left: 10;
position: center;
}
.footerFieldLabel {
margin-top: 0;
padding-top: 7;
margin-right: 10;
float: left;
color: #cbff31;
font-size: 15;
box-sizing: border-box;
}
.footerFieldBorder {
width: 91;
height: 31;
margin-top: 2;
padding-top: 2;
float: left;
background: black;
color: black;
border: 2 solid #575757;
border-radius: 5;
box-sizing: border-box;
}
.footerFieldText {
width: 100%;
float: right;
color: white;
text-align: center;
font-size: 19;
}
</style>
<script>
function onLoad() {
startTime();
}
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
function startTime() {
var today = new Date();
var dd = checkTime(today.getDate());
var yyyy = today.getFullYear();
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May",
"Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var MM = monthNames[today.getMonth()];
var hh = today.getHours();
var mm = checkTime(today.getMinutes());
var ss = checkTime(today.getSeconds());
var formatted = dd + " of " + MM + " " + yyyy + " at " + hh + ":" + mm + ":" + ss;
document.getElementById('currentTime').innerHTML = formatted;
timer = setTimeout(function() { startTime() }, 500);
}
</script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript">
AmCharts.makeChart("temperatures",
{
"type": "serial",
"dataLoader": {
"url": "getdata.php"
},
"categoryField": "timestamp",
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"theme": "default",
"categoryAxis": {
"minPeriod": "ss",
"parseDates": true
},
"chartCursor": {
"enabled": true,
"categoryBalloonDateFormat": "JJ:NN:SS"
},
"chartScrollbar": {
"enabled": true
},
"trendLines": [],
"graphs": [
{
"bullet": "round",
"id": "AmGraph-1",
"title": "graph 1",
"valueField": "shieldedtemp"
},
{
"bullet": "square",
"id": "AmGraph-2",
"title": "graph 2",
"valueField": "exposedtemp"
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"title": "Axis title"
}
],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"useGraphSettings": true
},
"titles": [
{
"id": "Title-1",
"size": 15,
"text": "Chart Title"
}
]
}
);
</script>
</head>
<body onload="onLoad()" style="margin: 0">
<!-- MAIN: Page header -->
<div class="headerContainer">
<p class="textMo">Weather Station</p>
<div class="headerRight">
<b class="textRld">Remote Latest Data Warwick</b>
<i class="textLoc">Latitude: 52.279998, Longitude -1.561793</i>
</div>
<div class="greenBar"></div>
</div>
<!-- MAIN: Data fields -->
<div class="mainContainer" style="background: red">
<div class="actionBar">
<a style="float: right" href>View Live Data</a>
</div>
<div id="temperatures" style="width: 100%; height: 400; background: #ffffff"></div>
</div>
<!-- MAIN: Page footer -->
<div class="footerContainer">
<div class="footerFieldContainer">
<p class="footerFieldLabel">Current Time:</p>
<div class="footerFieldBorder" style="width: 273">
<b class="footerFieldText" id="currentTime">16 of Sep 2016 at 12:02:35</b>
</div>
<p class="footerFieldLabel" style="margin-left: 15">Time of Data:</p>
<div class="footerFieldBorder" style="width: 70">
<b class="footerFieldText">
<?php
$date = date("H:i", strtotime($reportArray[1]));
echo $date;
?>
</b>
</div>
<div style="float: right">
<p class="footerFieldLabel">Approximate Number of Seconds to Update:</p>
<div class="footerFieldBorder" style="width: 40">
<b class="footerFieldText">59</b>
</div>
</div>
</div>
</div>
</body>
</html>
好像圖表和數據之間存在某種中斷的關係，但圖表和數據本身都很好，爲什麼它不起作用，我怎麼才能使它起作用？
完美！顯然在將圖表製作者代碼與教程混合時錯過了這一點。謝謝 – HenryHunt