我正在使用 flot 实时图表，但在刷新图表上的值时遇到问题。我有一个 PHP 代码来获取值并将其存储到变量中，但是当我在浏览器上显示 pnage 之前学习 PHP 代码 rus，并且只有在刷新页面时它才会再次运行。有没有办法让PHP代码每分钟从文件中获取值并绘制它？
这是我的代码：
<?php
function act(){
$filename = "(...)/CS.txt";
$handle = fopen($filename, "r");
$contents = fread($handle, filesize($filename));
fclose($handle);
return $contents;
};
?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="http://static.pureexample.com/js/flot/jquery.flot.time.js"></script>
<script type="text/javascript" src="http://static.pureexample.com/js/flot/jquery.flot.axislabels.js"></script>
<!-- CSS -->
<style type="text/css">
#flotcontainer {
width: 95%;
height: 95%;
text-align: center;
margin: 0 auto;
}
</style>
<!-- Javascript -->
<script>
function cs() {
var val = <?php echo act(); ?>;
return val;
};
var data = [];
var dataset;
var totalPoints = 50;
var updateInterval = 1000;
var now = new Date().getTime();
function GetData() {
data.shift();
while (data.length < totalPoints) {
var y = cs();
var temp = [now += updateInterval, y];
data.push(temp);
}
}
var options = {
series: {
lines: {
show: true,
lineWidth: 1.2,
fill: true
}
},
xaxis: {
mode: "time",
tickSize: [2, "second"],
tickFormatter: function (v, axis) {
var date = new Date(v);
if (date.getSeconds() % 20 == 0) {
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return hours + ":" + minutes + ":" + seconds;
} else {
return "";
}
},
axisLabel: "Horas",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
},
yaxis: {
min: 0,
max: 300,
tickSize: 5,
tickFormatter: function (v, axis) {
if (v % 10 == 0) {
return v + "";
} else {
return "";
}
},
axisLabel: "Número de CS's",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 6
},
legend: {
labelBoxBorderColor: "#fff"
}
};
$(document).ready(function () {
GetData();
dataset = [
{ label: "CS's", data: data }
];
$.plot($("#flotcontainer"), dataset, options);
function update() {
GetData();
$.plot($("#flotcontainer"), dataset, options)
setTimeout(update, updateInterval);
}
update();
});
</script>
<!-- HTML -->
<div id="flotcontainer"></div>
正如我所看到的，你已经在使用jQuery了，让我们混合一些Ajax，用jQuery轻松管理。
首先把你的函数act()放在一个单独的 php 文件中，假设act.php在同一个目录中，让它echo $contents而不是返回它：
行动.php：
function act(){
$filename = "(...)/CS.txt";
$handle = fopen($filename, "r");
$contents = fread($handle, filesize($filename));
fclose($handle);
echo $contents;
};
然后在 Javascript 全局作用域上：
var val; //setting the val into global scope
//this will get the value echoed in act.php every 60000 miliseconds (1 minute) and set it on val variable;
var myInterval = setInterval(function(){ $.get('act.php' function(data){ val = data}}, 60000);
从代码中更改此部分：
while (data.length < totalPoints) {
var y = cs();
而是使用 var y = val ;我们每分钟都在将值设置为全局变量"val"。
每当您想停止页面获取 act.php 的输出时，只需使用 clearInterval(myInterval)
解释
- 这是一个未经测试的代码，因为我没有 flot 并且从未使用它，所以把它当作伪代码，也许你需要修复一些错误。
基本上，我们使用setInterval()每 60 秒调用一次匿名函数，该函数通过 get 执行 jQuery ajax 调用.php并将其值设置为变量 "val"。
你也可以（我建议你）定义函数，即：函数fetchAct(){....}，其中包含所有$.get....部分，稍后调用它：setInterval(fetchAct, 60000);
请注意将间隔分配给变量var myInterval = setInterval(...)以便您可以随时停止它clearInterval(myInterval);
简而言之：
- 了解
setInterval()和相关计时器功能... - 了解 （jQuery） ajax Calls。
- （可选）：了解 jQuery 的 ajax 速记方法