AmCharts dataLoader 不加载数据但粘贴数据并使用 dataProvider 工作正常
AmCharts dataLoader not loading data but pasting data in and using dataProvider works fine
我正在编写网页以使用 AmCharts 显示存储在 MySQL 数据库中的数据图表，但在从中获取数据时遇到问题。我将代码从 AmCharts 图表制作器的 'time series, seconds' 模板（包括使用 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 属性时，一切正常并显示数据。
主图表页面代码如下：
";
$用户名 = "";
$密码 = "";
$数据库 = "";
$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>
图表和数据之间似乎有某种损坏 link，但图表和数据本身都很好。为什么它不起作用，我怎样才能让它起作用？
AmCharts dataLoader 是一个外部插件，除了图表 JavaScript 文件外，还需要加载额外的 JavaScript 文件。在您的 amcharts 和 serial js 包含之后添加以下内容：
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>
我正在编写网页以使用 AmCharts 显示存储在 MySQL 数据库中的数据图表，但在从中获取数据时遇到问题。我将代码从 AmCharts 图表制作器的 'time series, seconds' 模板（包括使用 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 属性时，一切正常并显示数据。
主图表页面代码如下： "; $用户名 = ""; $密码 = ""; $数据库 = "";
$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>
图表和数据之间似乎有某种损坏 link，但图表和数据本身都很好。为什么它不起作用，我怎样才能让它起作用？
AmCharts dataLoader 是一个外部插件，除了图表 JavaScript 文件外，还需要加载额外的 JavaScript 文件。在您的 amcharts 和 serial js 包含之后添加以下内容：
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>