如何使用 Highcharts 显示数据库中的历史数据和实时数据
Posted
技术标签:
【中文标题】如何使用 Highcharts 显示数据库中的历史数据和实时数据【英文标题】：How to display historical data and live data from database using Highcharts 【发布时间】：2018-09-12 02:54:19 【问题描述】：我很难弄清楚如何使用 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 分钟动态更新一次新数据点。
【问题讨论】：
要刷新数据，您需要定期重新运行 ajax 调用并将图表数据替换为结果。我相信通过高图表您可以获得新的数据点，即。将最高时间值传递给脚本，它只返回该时间之后的数据，然后将数据添加到图表中。 另一件事，您可能应该将选择限制在要显示的时间范围内，这样您就不会得到很多不会在图表中显示的数据。 你的问题是我不能让它与历史数据一起工作关于如何去做的任何建议？ 我不太明白这里有什么问题。你能从数据库中获取历史数据吗？ 你说“你的问题是我不能让它与历史数据一起工作”但你的图表似乎正在显示数据。你的意思是你不能让它工作？？？编辑您的问题并显示表架构。 【参考方案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
);
现在我的数据库中有历史数据，每当数据库中有新条目时它都会添加新数据点，而无需刷新页面。
这是我的 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>
【讨论】：
以上是关于如何使用 Highcharts 显示数据库中的历史数据和实时数据的主要内容，如果未能解决你的问题，请参考以下文章