用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['sum']}</sum><name>{$use['day']}</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='http://localhost/arr.php';
     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='http://localhost/arr.php';
        listRequest.send();
    }
//列出了 HTTPService 請求地址是  http://localhost/arr.php
//你同樣也可以寫成相對路徑 比如 listRequest.url='./arr.php';

 
代碼:
mx:LineChart  //是一個 曲線 組件，我們可以直接拿來使用

 
代碼:
dataProvider ：資料來源：listRequest.lastResult.bills.bill
       bills.bill 是XML裡面的標籤

 
代碼:
  mx:LineSeries displayName="每日消費" yField="sum" xField="name" 
//則定義了 橫縱座標的值。   
//Sum  name  就是XML裡面的資料的標籤