如何使用 php 和 AJAX 绘制实时图形？
Posted
技术标签:
【中文标题】如何使用 php 和 AJAX 绘制实时图形？【英文标题】：How to plot real time graph using php and AJAX? 【发布时间】：2013-01-05 17:14:23 【问题描述】：我是网络开发的新手。我刚开始用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 的图。你知道哪里出了问题吗？
【问题讨论】：
【参考方案1】：看看High Charts Dynamic Update ;-)
【讨论】：
感谢电子学习者。我去看看。【参考方案2】：首先，您需要正确输出。在我看来，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 来获取请求。我使用 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);
【讨论】：
谢谢蒂姆。我要试试这个。看来它解决了我的问题。我会告诉你我的进展。 嗨@Tim，抱歉耽搁了。我正忙于其他任务。根据你的建议，我也设置了我的 php.ini 文件。我写了一个查询并从数据库中获取了我的数据。它运作良好。现在，我想从 php 接收我的数据并使用 javascript 绘制它。这是挑战。目前，我没有向我的 php 发送任何输入，希望保持简单。我的挑战在于 requestCallback 函数。我无法将数据拿出来使用它。我将添加我的代码。 @Chris 这一切都取决于您的 PHP 文件的输出。尝试在 requestCallback 函数中使用console.log(data);。它将完全在控制台中向您显示响应。如果响应为空，请尝试检查 AJAX 响应。在 Google Chrome 的开发者工具上，它位于“网络”标签上，而在 Firebug 上，您可以在“控制台”标签上看到它。您也可以发布您的 PHP 文件的输出；）
查看我的 php 文件的输出。我正在尝试获取数据。
我已经编辑了我的答案并添加了修改后的requestCallback ;)【参考方案3】：
这些是我在谷歌上找到的 -
http://www.makeuseof.com/tag/add-graphs-php-web-app-pchart/ http://www.ebrueggeman.com/phpgraphlib您可以创建动态图表并使用 AJAX 无限调用。
【讨论】：
谢谢！我去看看。以上是关于如何使用 php 和 AJAX 绘制实时图形？的主要内容，如果未能解决你的问题，请参考以下文章
实时求和每次更改以及如何使用 ajax php mysql 处理它