5

我是网络开发的新手。我刚开始用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。你看到出了什么问题吗？

4

3 回答 3

5

查看高图表动态更新;-)

于 2013-01-22T13:04:34.980 回答
4

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

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

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

你怎么知道要寄什么？你要打时间戳吗？身份证？一切皆有可能。因为 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 来获取请求。我正在使用jQuery 库来处理我的 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);
}
于 2013-01-22T13:26:27.737 回答
1

这些是我在谷歌找到的 -

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

于 2013-01-22T13:06:43.430 回答