Question

我是网络开发的新手。我刚开始用php编程。我想开发一个连接到MySQL数据库（来自服务器）的动态页面，并实时显示结果（可能是散点图，直方图）。到目前为止，我设法从我的数据库中获取数据并显示图表。但是，我无法实时做到这一点。

我一直在寻找。我发现使用AJAX来做实时情节。好吧，我做了一些关于它的教程，并且能够运行这些示例。我的挑战是绘制图表。

如果有帮助，这正是我想要做的 http://jsxgraph.uni-bayreuth.de/wiki/index.php/Real-time_graphing

我试过运行此代码，但我无法执行此操作。

有人能告诉我如何从简单开始吗？如果我的问题不够明确，我会详细说明。提前谢谢！

@Tim，这是我试图做的。

我的php是

 <?php


   $con = mysql_connect("localhost","root","");
   if (!$con)
    {
    die('Could not connect: ' . mysql_error());
    }
    else
    //echo "Database Connected!";
   mysql_select_db("DB", $con);
   $sql=mysql_query("SELECT Def_ID, Def_BH FROM BBB WHERE Ln_Def < 1200");

   $Def_ID= array();  
   $Def_BH = array();

  while($rs = mysql_fetch_array($sql))
  {
    $Def_ID[] = $rs['Def_ID'];
    $Def_BH [] = $rs['Def_BH '];

  }

  mysql_close($con);

  $json = array(
  'Def_ID' => $Def_ID,
  'Def_BH' => $Def_BH
  );

  echo json_encode($json);
?>

输出

{"Df_ID":["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41"],"Df_BH":["1","1","1","5","5","2","1","1","1","1","2","1","1","1","1","1","1","1","1","1","1","1","2","1","1","2","1","3","10","1","2","1","1","1","2","2","2","1","1","1","1","1"]}

然后我的脚本跟着

   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Flot Example: Real-time updates</title>
        <link href="../examples.css" rel="stylesheet" type="text/css">
        <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
        <script language="javascript" type="text/javascript" src="../../jquery.js"></script>
        <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
         <script language = "javascript" type="text/javascript" src="Include/excanvas.js"></script>
        </head>
    <body>

        <div id="placeholder" style="width:600px;height:300px"></div>


    </body>

    <script type="text/javascript">
    function doRequest(e) {
    var url = 'fakesensor.php'; // the PHP file
    $.getJSON(url,data,requestCallback); // send request
}




function requestCallback(data, textStatus, xhr) {
  //       // you can do stuff with "value" here
   $.each(data, function(index, value) {
        console.log(value.Df_ID); 
        console.log(value.Df_BH); 
          });
  }

    </script>

    </html>

我想绘制Def_Id与Def_BH的关系。你看到出了什么问题吗？

Answer 1

查看High Charts Dynamic Update; - ）

Answer 2

首先，您需要正确输出。在我看来，JSON是使用异步请求在服务器和客户端之间传输数据的最佳格式。这是一种可以通过许多编程语言轻松解析的数据格式。

接下来，您需要弄清楚要转移的内容。您是要一次传输大量数据并使用javascript对其进行动画处理，还是计划按新位发送请求？

我的建议：尽可能少地提出请求数量。请求很慢。

你怎么知道送什么？你要去时间戳吗？一个ID？一切皆有可能。因为ID的自动增量，你也可以使用它。

首先，我要设置我的PHP：

// get user input
$lastID = intval($_GET['lastid']);

// --------------------------------
// FETCH RECORDS FROM DATABASE HERE
// --------------------------------
// $sql = "SELECT * FROM `graph` WHERE `id` > " . $lastID;

// CREATE DUMMY CONTENT
$data = array();

for($i = $lastID; $i < $lastID + 50; $i++) {
    array_push($data, array(
        'id'        => $i,
        'position'  => array(
            'x' => $i,
            'y' => mt_rand(0, 10) // random value between 0 and 10
        )
    ));
}
// END CREATING DUMMY CONTENT

// create response
$json = array(
    'lastID'    => $data[count($data) - 1]['id'],
    'data'      => $data
);

// display response
echo json_encode($json);

如您所见，我使用lastid作为输入获取了大量数据。这一输入很重要。

现在，我们将设置我们的javascript来获取请求。我正在使用the jQuery library来获取我的AJAX请求，因为我是一个jQuery粉丝！

var interval = setInterval(doRequest, 4000); // run "doRequest" every 4000ms
var lastID = 0; // set 0 as default to ensure we get the data from the start

function doRequest(e) {
    var url = 'my-file.php'; // the PHP file
    var data = {'lastid': lastID}; // input for the PHP file

    $.getJSON(url, data, requestCallback); // send request
}

// this function is run when $.getJSON() is completed
function requestCallback(data, textStatus, xhr) {
    lastID = data.lastID; // save lastID

    // loop through data
    $.each(data, function(index, value) {
        // you can do stuff with "value" here
        console.log(value.id); // display ID
        console.log(value.position.x); // display X
        console.log(value.position.y); // display Y
    });
}

剩下的就是将结果输出到图表中！

当你查看你的PHP响应时，你会看到有一个对象有两个包含数组的属性。

{
    "Df_ID": [1, 2, 3, ...],
    "Df_BH": [1, 2, 3, ...]
}

您可以通过以下方式访问这些属性：调用这些属性data.Df_ID，data.Df_BH

function requestCallback(data, textStatus, xhr) {
    console.log(data.Df_ID, data.Df_BH);
}

Answer 3

这些是我在google中找到的 -

您可以无限制地使用AJAX创建动态图形和调用。

如何使用PHP和AJAX绘制实时图形？

3 个答案: