Question

我正在尝试使用Google可视化学习Google Gauges，我想在Gauge上显示每秒更改的数据并使用PHP命令加载变量，该命令使用shell_exec函数将变量指定为秒值，PFB my code

setInterval(function() {
var memory = parseFloat(<?php echo json_encode(shell_exec("date +%S")); ?>);
data.setValue(0, 1, memory);
chart.draw(data, options);
    }, 1000);

在1秒后调用函数后，memory的值未被刷新并取自parseFloat(<?php echo json_encode(shell_exec("date +%S")); ?>);

请让我知道每次在1秒后调用函数时如何重新加载memory变量

提前致谢

Answer 1

目前的问题是您的PHP代码只执行一次，因此值不会更新：<?php echo json_encode(shell_exec("date +%S")); ?>返回单个值，该值不会从您的前端定期更新。

我建议您使用Javascript＆＃39; Date代替：

var seconds = new Date() / 1000;

Answer 2

我使用两个单独的文件，一个PHP文件从数据库中获取数据（在我的情况下）和一个javascript文件，使用PHP文件和Ajax从数据库获取响应。

您必须将Ajax添加到index.html文件中<：p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Javascript代码：

var mysqlData; // Global variable in witch the data will be stored
setInterval(function() {
    $.ajax({
        url: "php/getdata.php", // file name or path to PHP file
        dataType: "JSON",
        data:{},
        success: function(x){
            mysqlData = x;  // Assign the response to global variable mysqlData
        }
    });
}, 2000); // Run every 2 seconds

然后在Google Gauge函数中执行以下操作：

function SOC() {
    // Normal google chart code goes here 
    setInterval(function() {
        data.setValue(0, 1, mysqlData["SOC"] ); // In my case mysqlData is an object which contains the key "SOC"
        formatter.format(data, 1); // Only needs to be done if google.visualization.NumberFormat have been used
        chart.draw(data, options); // To redraw the gauge with new data
    }, 2000);
}

在PHP文件中：

<?php
/* Get your data */
echo json_encode($table);
?>

希望它有所帮助！

使用setinterval函数

2 个答案: