Question

我正在使用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>

Answer 1

我已经在使用jQuery了，让我们混合一些Ajax，使用jQuery轻松管理。
首先将你的函数act()放在一个单独的php文件中，让我们说act.php在同一目录上，并使其echo $contents而不是返回它：

<强> act.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对act.php执行jQuery ajax调用，并将其值设置为变量“val”。

您也可以（我建议您）定义函数，即：函数fetchAct(){....}，其中包含所有$.get....部分并稍后调用它：setInterval(fetchAct, 60000);

请注意将时间间隔分配给变量var myInterval = setInterval(...)，这样您就可以随时使用clearInterval(myInterval);

停止它

简而言之：

每分钟获取PHP变量

1 个答案: