当前位置:首页 > PHP教程 > php高级应用 > 列表

PHP和mxml 实现FLASH 曲线图

发布:smiling 来源: PHP粉丝网  添加日期:2014-08-20 16:11:20 浏览: 评论:0 

MXML是一个可以让你在Adobe Flex中布局用户界面组件的一种XML语言,你也可以使用MXML声明来定义程序中的非可视化组件,安装好FLEX Development 后,你就可以轻松的结合PHP完成一个FLASH曲线图.

先从PHP入手:

FLEX 和PHP的交互最常用的就是和XML的交互,就是用PHP生成XML,然后用FLEX去读取并且显示,我们以XML的形式先写一个帐目详单的数据,代码如下:

  1. header("Content-Type: text/xml"); 
  2. $arr = array
  3.      array('day'=>'01','sum'=>'153.1'), 
  4.       array('day'=>'02','sum'=>'882.86'), 
  5.       array('day'=>'03','sum'=>'456.9'), 
  6.       array('day'=>'04','sum'=>'717.7'), 
  7.        array('day'=>'05','sum'=>'255.1'), 
  8.        array('day'=>'06','sum'=>'533.1'
  9. ); 
  10. $xml_return  .= "<bills>"
  11. foreach ( $arr as $use){ 
  12.        $xml_return .="<bill><sum>{$use['sum']}</sum><name>{$use['day']}</name></bill> "
  13. }//开源代码phpfensi.com 
  14. $xml_return.= "</bills>"
  15. echo $xml_return

显示6个月的消费记录,$arr也可以是从数据库读出来的数据,这里只是作为一个例子,所以直接给一个数组赋值.

  1. <bills> 
  2. <bill> 
  3. <sum>153.1</sum> 
  4. <name>01</name> 
  5. </bill> 
  6.  
  7. <bill> 
  8. <sum>882.86</sum> 
  9. <name>02</name> 
  10. </bill> 
  11.  
  12. <bill> 
  13. <sum>456.9</sum> 
  14. <name>03</name> 
  15. </bill> 
  16.  
  17. <bill> 
  18. <sum>717.7</sum> 
  19. <name>04</name> 
  20. </bill> 
  21.  
  22. <bill> 
  23. <sum>255.1</sum> 
  24. <name>05</name> 
  25. </bill> 
  26.  
  27. <bill> 
  28. <sum>533.1</sum> 
  29. <name>06</name> 
  30. </bill> 
  31.  
  32. </bills> 

Php部分就完成了,接下来是写MXML,实例代码如下:

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <?xml version="1.0" encoding="utf-8"?> 
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  creationComplete="getaccount()"> 
  4.    <mx:HTTPService id="listRequest" url="" useProxy="false" method="POST"> 
  5.    <mx:request xmlns=""> </mx:request> 
  6.    </mx:HTTPService> 
  7.     
  8.    <mx:Script><![CDATA[ 
  9.     import mx.rpc.events.ResultEvent;//引用ResultEvent类 
  10.     public function getaccount():void{ 
  11.   listRequest.url='http://localhost/arr.php'; 
  12.      listRequest.send(); 
  13. } 
  14.   ]]></mx:Script> 
  15.    <mx:LineChart showDataTips="true" clipContent="false" x="126" y="10" id="tongjitu"  dataProvider="{listRequest.lastResult.bills.bill}" width="678"> 
  16.    <mx:horizontalAxis>       
  17.     <mx:CategoryAxis dataProvider="{listRequest.lastResult.bills.bill}"  categoryField="name" title="(日)" /> 
  18.    </mx:horizontalAxis>   
  19.       <mx:series> 
  20.          <mx:LineSeries displayName="每日消费" yField="sum" xField="name"/> 
  21.     </mx:series> 
  22.    </mx:LineChart> 
  23. </mx:Application> 

逐一解释一下:

  1. Application //MXML应用程序开头 
  2. creationComplete="getaccount()" //代表页面加载完成后 执行 getaccount函数 
  3. 〈mx:HTTPService id="listRequest" url="" useProxy="false" method="POST"〉 
  4.    〈mx:request xmlns=""〉 〈/mx:request〉 
  5.    〈/mx:HTTPService〉 
  6. //则是一个HTTP的请求,发送POST到一个PHP文件 去获取数据 
  7. mx:Script //MXML里面的脚本 都用 <mx:Script>包含进去 

下面分析下getaccount函数:

  1. public function getaccount():void{ 
  2.        listRequest.url='http://localhost/arr.php'
  3.         listRequest.send(); 
  4.     } 
  5. //列出了 HTTPService 请求地址是  http://localhost/arr.php 
  6. //你同样也可以写成相对路径 比如 listRequest.url='./arr.php'; 
  7.  
  8. mx:LineChart  //是一个 曲线 组件,我们可以直接拿来使用 
  9.  
  10. dataProvider :数据源:listRequest.lastResult.bills.bill 
  11. bills.bill 是XML里面的标签 
  12.  
  13. mx:LineSeries displayName="每日消费" yField="sum" xField="name"   
  14. //则定义了 横纵坐标的值。     
  15. //Sum  name  就是XML里面的数据的标签 

Tags: PHP mxml FLASH 曲线图

分享到: