如何解决自动更新Highchart折线图
我正在尝试制作一个高线图折线图，该折线图显示最近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}",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秒更新一次。
感谢帮助。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。