我正在尝试制作一个高线图折线图，该折线图显示最近24小时内的数据，并显示每10秒从传感器添加到数据库中的新数据。到目前为止，我已经能够绘制一个图表，该图表从data.php获取数据，并制作了应提供实时数据的live.php文件，而chart向该图表添加了新的点。 这是我到目前为止的代码：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var chart;
$(document).ready(function() {
Highcharts.setOptions({
time: {
//timezoneOffset: 3 * 60
}
});
var options = {
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'x',
events: {
load: function requestData() {
$.ajax({
url: 'live.php',
success: function(points) {
var series = chart.series,
shift;
$.each(series, function(i, s) {
shift = s.data.length > 1;
s.addPoint(points[i], true, true);
});
setTimeout(requestData, 1000);
chart.redraw();
},
cache: false
});
}
}
},
tooltip: {
crosshairs: [true],
shared: true
},
title: {
},
xAxis: {
type: 'datetime'
},
yAxis: [
{
title: {
//Flow Rate
text: '',
style: {
color: '#7cb5ec'
}
},
labels: {
style: {
color: '#7cb5ec'
}
}
},
{
title: {
//Product Purity
text: ''
},
opposite:true
}
],
series: [{
name: 'Flow Rate',
data: []
}, {
name: 'Product Purity',
data: [],
yAxis: 1
}]
};
$.getJSON('data.php', function(json) {
data1 = [];
data2 = [];
$.each(json, function(key,value) {
data1.push([value[0], value[1]]);
data2.push([value[0], value[2]]);
});
options.series[0].data = data1;
options.series[1].data = data2;
chart = new Highcharts.Chart(options);
});
});
</script>
<body>
<div id="container" style="min-width: 400px; height: 800px; margin: 0 auto"></div>
</body>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
这是data.php
<?php
// php code to Insert data into mysql database from input text
// $hostname = "localhost";
//$username = "********";
// $password = "********";
// $databaseName = "********";
?>
<?php
$dbhost = 'localhost';
$dbname = '*******';
$dbuser = '*******';
$dbpass = '*******';
try{
$dbcon = new PDO("mysql:host={$dbhost};dbname={$dbname}",$dbuser,$dbpass);
$dbcon->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}catch(PDOException $ex){
die($ex->getMessage());
}
$stmt=$dbcon->prepare("SELECT * FROM FlowRate WHERE timeStamp BETWEEN DATE_SUB(DATE_ADD(NOW(),INTERVAL 2 HOUR), INTERVAL 1 DAY) AND DATE_ADD(NOW(),INTERVAL 2 HOUR) ORDER BY timeStamp ASC");
$stmt->execute();
$json = [];
while($row=$stmt->fetch(PDO::FETCH_ASSOC)){
extract($row);
$json[]= [strtotime($timeStamp)*1000, (double)$flow, (double)$ProductPurity];
}
echo json_encode($json);
?>
这是我的live.php文件：
<?php
// php code to Insert data into mysql database from input text
// $hostname = "localhost";
//$username = "********";
// $password = "********";
// $databaseName = "********";
?>
<?Php
header("Content-type: text/json");
$dbhost = 'localhost';
$dbname = '*********';
$dbuser = '*********';
$dbpass = '*********';
try{
$dbcon = new PDO("mysql:host={$dbhost};dbname={$dbname}",$dbuser,$dbpass);
$dbcon->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}catch(PDOException $ex){
die($ex->getMessage());
}
$stmt=$dbcon->prepare("SELECT * FROM FlowRate");
$stmt->execute();
$json = [];
while($row=$stmt->fetch(PDO::FETCH_ASSOC)){
extract($row);
}
$json[]= [strtotime($timeStamp)*1000, (float)$flow];
$json[]= [strtotime($timeStamp)*1000, (float)$ProductPurity];
echo json_encode($json);
?>
现在绘制了图表，但是当将新数据添加到数据库中的表中时，它并不会每10秒更新一次。
感谢帮助。