PHP和mxml 实现FLASH 曲线图

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

先从PHP入手:

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

header("Content-Type: text/xml"); 
$arr = array( 
    array('day'=>'01','sum'=>'153.1'), 
    array('day'=>'02','sum'=>'882.86'), 
    array('day'=>'03','sum'=>'456.9'), 
    array('day'=>'04','sum'=>'717.7'), 
    array('day'=>'05','sum'=>'255.1'), 
    array('day'=>'06','sum'=>'533.1') 
); 
$xml_return  .= "<bills>"; 
foreach ( $arr as $use){ 
       $xml_return .="<bill><sum>{$use[&#39;sum&#39;]}</sum><name>{$use[&#39;day&#39;]}</name></bill> "; 
}
$xml_return.= "</bills>"; 
echo $xml_return;

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

- <bills> 
- <bill> 
<sum>153.1</sum> 
<name>01</name> 
</bill> 
 
- <bill> 
<sum>882.86</sum> 
<name>02</name> 
</bill> 
 
- <bill> 
<sum>456.9</sum> 
<name>03</name> 
</bill> 
 
- <bill> 
<sum>717.7</sum> 
<name>04</name> 
</bill> 
 
- <bill> 
<sum>255.1</sum> 
<name>05</name> 
</bill> 
 
- <bill> 
<sum>533.1</sum> 
<name>06</name> 
</bill> 
 
</bills>

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

<?xml version="1.0" encoding="utf-8" 
<?xml version="1.0" encoding="utf-8" 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  creationComplete="getaccount()"> 
   <mx:HTTPService id="listRequest" url="" useProxy="false" method="POST"> 
   <mx:request xmlns=""> </mx:request> 
   </mx:HTTPService> 
   <mx:Script><![CDATA[ 
    import mx.rpc.events.ResultEvent;//引用ResultEvent类 
    public function getaccount():void{ 
  listRequest.url=&#39;http://localhost/arr.php&#39;; 
     listRequest.send(); 
} 
  ]]></mx:Script> 
   <mx:LineChart showDataTips="true" clipContent="false" x="126" y="10" id="tongjitu"  dataProvider="{listRequest.lastResult.bills.bill}" width="678"> 
   <mx:horizontalAxis>       
    <mx:CategoryAxis dataProvider="{listRequest.lastResult.bills.bill}"  categoryField="name" title="(日)" /> 
   </mx:horizontalAxis>   
      <mx:series> 
         <mx:LineSeries displayName="每日消费" yField="sum" xField="name"/> 
    </mx:series> 
   </mx:LineChart> 
</mx:Application>

逐一解释一下:

Application //MXML应用程序开头 
creationComplete="getaccount()" //代表页面加载完成后 执行 getaccount函数 
〈mx:HTTPService id="listRequest" url="" useProxy="false" method="POST"〉 
   〈mx:request xmlns=""〉 〈/mx:request〉 
   〈/mx:HTTPService〉 
//则是一个HTTP的请求，发送POST到一个PHP文件 去获取数据 
mx:Script //MXML里面的脚本 都用 <mx:Script>包含进去 
下面分析下getaccount函数:
public function getaccount():void{ 
    listRequest.url=&#39;http://localhost/arr.php&#39;; 
    listRequest.send(); 
} 
//列出了 HTTPService 请求地址是  http://localhost/arr.php 
//你同样也可以写成相对路径 比如 listRequest.url=&#39;./arr.php&#39;; 
 
mx:LineChart  //是一个 曲线 组件，我们可以直接拿来使用 
 
dataProvider ：数据源：listRequest.lastResult.bills.bill 
bills.bill 是XML里面的标签 
 
mx:LineSeries displayName="每日消费" yField="sum" xField="name"   
//则定义了 横纵坐标的值。     
//Sum  name  就是XML里面的数据的标签

                           

文章地址:

转载随意^^请带上本文地址!