我很难弄清楚如何使用 Highcharts 从数据库中获取新的(实时)数据。
我已经测试了例子 here效果很好。
我每 1 分钟就会将新数据写入数据库。问题是我只能让它从数据库中获取新插入的数据并每 1 分钟更新一次图表，使用新插入的数据作为新数据点。我无法让它显示数据库中的历史数据。
Here is an example of what I'm trying to do.
这是我目前使用的代码。
<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() {
var options = {
chart: {
renderTo: 'container',
type: 'area',
zoomType: 'x'
},
title: {
},
xAxis: {
type: 'datetime'
},
yAxis: {
},
series: [{
name: 'Download',
data: []
}, {
name: 'Upload',
data: []
}]
};
$.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.stockChart(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
$dbhost = 'localhost';
$dbname = 'highchart';
$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 trafico");
$stmt->execute();
$json = [];
while($row=$stmt->fetch(PDO::FETCH_ASSOC)){
extract($row);
$json[]= [strtotime($time_1m)*1000, (int)$Tx, (int)$Rx];
}
echo json_encode($json);
?>
这是我从 data.php 获得的输出。
[[1521071984000,1255,91],[1521072190000,1212,92],[1521072241000,1220,93],[ ... ]]
这是我得到的图表 
基本上我不知道如何让上面的代码(这张图)每 1 分钟动态更新一次新数据点。
最佳答案
问题解决了。
这是我添加的代码:
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
});
}
}
现在我有来 self 的数据库的历史数据，并且每次在 de DB 中有一个新条目时它都会添加新的数据点，而无需刷新页面。
这是我的 live.php 代码:
<?Php
header("Content-type: text/json");
$dbhost = 'localhost';
$dbname = 'highchart';
$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 trafico");
$stmt->execute();
$json = [];
while($row=$stmt->fetch(PDO::FETCH_ASSOC)){
extract($row);
}
$json[]= [strtotime($time_1m)*1000, (int)$Tx];
$json[]= [strtotime($time_1m)*1000, (int)$Rx];
echo json_encode($json);
?>
这是 live.php 的输出:
[[1522869181000,872],[1522869181000,54]]
这就是代码现在的样子
<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: 'area',
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
});
}
}
},
title: {
},
xAxis: {
type: 'datetime'
},
yAxis: {
},
series: [{
name: 'Download',
data: []
}, {
name: 'Upload',
data: []
}]
};
$.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.stockChart(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>
关于php - 如何使用 Highcharts 显示数据库中的历史数据和实时数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49618912/