Question

我正在制作一个网站，用于显示Morris图表中MySQL数据库的数据。基本上我有一个每分钟都能获得新测量数据的数据库，而且我试图在不重新加载整个页面的情况下实时显示这些更改。我缩短了这个问题的代码，但这基本上就是我所拥有的：

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＆＃34; graph＆＃34;的div中。所以问题是更新功能没有用新数据更新图表，因为$ data没有更新。我听说我可以以某种方式创建一个PHP函数并使用Ajax连续运行它并让它更新我的$ data变量，但我不知道该怎么做。

为了更新图形，我必须重新加载整个页面，这可以使用每隔60秒刷新一次页面的元标记，但这似乎是一个糟糕的解决方案。

我还试图将代码放在一个单独的PHP文件中并使用以下代码运行它：

var auto_updater = setInterval(
    (function () {
        $("#graph").load("data.php");
    }), 60000);

这也可以正常工作，但问题是它会重绘整个图形并导致我网站上的滚动条变得疯狂。我想要的是更新Morris.Bar中的数据变量，而不是整个过程。任何帮助将不胜感激。

Answer 1

编辑：因为你只需要一个值，你的json只会是那个值。虽然从技术上讲，它不能生成有效的json（顶层应该有一个对象）但它可以正常使用jquery。

PHP：（data.php）

<?php
  $data = // obtain current value of data from somewhere
  echo $data; // should be an integer
?>

<强> JS：

$(document).ready( function () {
  var data = []; // data is empty
  var graph = Morris.Bar({
    element: 'graph',
    data: data
    labels: ['random label']
  });

  function update () {
    $.getJSON( "data.php", function (newv) {
      data.push( { x: newv, y: "Today" } ); // store new value
      graph.setData( data );                // update the graph
    });
  }

  update();
  setInterval( update, 1000 );
});

这就是它的一切！

不可能“让PHP在后台运行”或类似的东西，你的尝试是正确的。但是，您应该加载纯数据（例如作为JSON文档），然后通过JS将数据推送到现有数据集中，而不是加载新的HTML。使用JS从服务器获取更新的数据是通过AJAX完成的。

例如，您可以使用$.getJSON

修改完整的JS看起来像这样：

var initial_data = <?php echo $data; ?> // or leave this out and replace with another $.getJSON for clean code! $(document).ready( function () { var graph = Morris.Bar( ... ); setInterval( function () { $.getJSON( "data.php", function (data) { graph.setData( data ); }); }, 1000 ); });

并且PHP的响应看起来像这样：

[ { "x": 10, "y": 20 }, { "x": 3, "y": 12 }, { "x": 8, "y": 19 } ]

因此PHP可能看起来像这样：

[ <?php // first one seperately because it can't have a leading comma - JSON is strict $measurement = mysqli_fetch_array($result) echo '{ "x": ' . $result["data"]["x"] . ', "y": ' . $result["data"]["x"] . ' }'; while($measurement = mysqli_fetch_array($result)) { // no idea what data looks like, I'm assuming it has x and y properties echo ', { "x": ' . $result["data"]["x"] . ', "y": ' . $result["data"]["x"] . ' }'; } ?> ]

Answer 2

尝试将所有PHP放在一个单独的脚本中并让它返回PHP数组中的表（使用json_encode（））

这样，您可以使用javascript重绘表格，如下所示：

var getTableData = function(){
  $.getJSON("data.php").done(function(data){

    // code to generate html from JSON data

    $("#graph").html(tableHTML) // puts the html table into the document

    setTimeout(getTableData, 2000); // interval
  });
};
setTimeout(getTableData, 0);

我不确定您的数据是如何格式化的，因此您需要自己创建html！

Answer 3

您必须使用某种ajax调用来更新服务器上的值。此外，在更新值之后，您必须将其保存在某个位置，例如在DB或缓存中，因为当PHP运行结束时，进程将终止，并且您在PHP运行时中创建的所有数据都将丢失

如何在不刷新页面的情况下不断更新PHP变量？

3 个答案: