我正在制作一个网站,可以通过Morris图表显示MySQL数据库中的数据。基本上,我有一个数据库,每分钟都会得到新的测量值,并且我正在尝试在无需重新加载整个页面的情况下实时显示这些更改。我为了这个问题缩短了我的代码,但基本上我有以下内容:
PHP代码:
该图表随后显示在ID为“graph”的div中。问题在于更新函数不会使用新数据更新图表,因为$data没有更新。我听说可以通过某种方式创建一个PHP函数并使用Ajax持续运行它,然后让它更新我的$data变量,但我不知道如何做。
为了更新图表,我必须重新加载整个页面,使用一个meta标签每60秒刷新页面可以正常工作,但这似乎是一个糟糕的解决方案。
我还尝试将代码放在一个单独的PHP文件中,并使用以下代码运行:
这也可以正常工作,但问题是它重新绘制了整个图表,导致我的网站滚动条疯狂跳动。我想要的是更新Morris.Bar中的数据变量,而不是整个图表。任何帮助都将不胜感激。
PHP代码:
<?php
while($measurement = mysqli_fetch_array($result)){
$data += $measurement['data'];
}
?>
而且脚本:
function data() {
var ret = [];
ret.push({
y: 'Today',
a: <?php echo $data; ?>
});
return ret;
}
var graph = Morris.Bar({
element: 'graph',
data: data(),
xkey: 'y',
ykeys: ['a'],
labels: ['random label']
});
function update() {
graph.setData(data());
}
setInterval(update, 60000);
该图表随后显示在ID为“graph”的div中。问题在于更新函数不会使用新数据更新图表,因为$data没有更新。我听说可以通过某种方式创建一个PHP函数并使用Ajax持续运行它,然后让它更新我的$data变量,但我不知道如何做。
为了更新图表,我必须重新加载整个页面,使用一个meta标签每60秒刷新页面可以正常工作,但这似乎是一个糟糕的解决方案。
我还尝试将代码放在一个单独的PHP文件中,并使用以下代码运行:
var auto_updater = setInterval(
(function () {
$("#graph").load("data.php");
}), 60000);
这也可以正常工作,但问题是它重新绘制了整个图表,导致我的网站滚动条疯狂跳动。我想要的是更新Morris.Bar中的数据变量,而不是整个图表。任何帮助都将不胜感激。
data.php
的文件,该文件获取数据并按照我在第二个代码块中展示的格式进行echo
(不要返回任何 HTML,只返回 JSON 部分)。 - s-oly
值,而x
则随时间步进。我会很快草拟出一个解决方案。 - s-ol