Flex 產生動態折線圖

使用Flex接收從servlet發送來的xml數據，並進行解析，繪圖。HttpService處的地址要與發佈到服務器時的地址一致。而且，按照8080以前的地址訪問服務器。在使用flash builder 發佈時，要取消網絡監視器。

<?xml version="1.0"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="initApp()">
	
	
	
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.rpc.Fault;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			//定義一個XML類實例
			[Bindable]
			public var xml:XML;  
			[Bindable]
			private var expensesAC:ArrayCollection ;
				
			public static var viewXMLList:XMLList=new XMLList();
			
			private var timer:Timer;
			
			//用於鏈接servlet
			private function getConn(e:Event):void{
				//向將要通訊的servlet發送通訊請求
				CreateLineChartServlet.send();
			}
			
			//結果處理，處理返回的結果，返回的結果是xml的形式，下面的語句能夠自動處理
			private function resultHandler(event:ResultEvent):void{
				    expensesAC = event.result.datas.data;		
			}
			
			//應用程序初始化處理函數 
			public function initApp():void  
				
			{     
				
				//啓動時執行請求
				getConn(null);
				
				//這裏用的Timer定時，沒通過一秒鏈接一次
				
				timer = new Timer(1000);
				
				timer.addEventListener(TimerEvent.TIMER, getConn);
				
				timer.start();
				
				
				
			}
		]]>
	</fx:Script>
	
	
	<fx:Declarations>
 <s:HTTPService id="CreateLineChartServlet" method="get" useProxy="false"  url="http://10.5.82.217:8080/ALEConsole/CreateLineChartServlet"
					   result="resultHandler(event)"
					   showBusyCursor="true"/>
		<mx:SolidColorStroke id = "s1" color="red" weight="1"/>
		
	</fx:Declarations> 
	
	
	<mx:Panel title="系統吞吐量" 
			  height="100%" width="100%" layout="horizontal" maxHeight="300" maxWidth="800" paddingLeft="10">
		
		
		<mx:LineChart id="linechart" height="100%" width="100%" 
					  
					  
					  showDataTips="true" dataProvider="{expensesAC}" paddingLeft="10">
			
			
			
			<!--用來定義x軸 ，date是來自xml中的數據-->
			<mx:horizontalAxis>
				
				<mx:CategoryAxis id="hAxis" categoryField="date" title="讀取時間" />
			</mx:horizontalAxis>
			
			<!--定義一組渲染X軸的特效-->
			<mx:horizontalAxisRenderers>
				
				<mx:AxisRenderer axis="{hAxis}" placement="bottom" />
				
			</mx:horizontalAxisRenderers>
			
			<!--Y軸，同x軸-->
			<mx:verticalAxis>
				
				<mx:LinearAxis id="vAxis" baseAtZero="false"  interval="1" title="識讀器實時數量" />
				
			</mx:verticalAxis>
			
			<mx:verticalAxisRenderers>
				
				<mx:AxisRenderer axis="{vAxis}" styleName="linedNumericAxis" x="10"/>
				
			</mx:verticalAxisRenderers>
			
			<mx:series>
				<!--其縱座標的數據是根據yFiled中的數據動態生成的，num是xml中的一個數據節點-->
				<mx:LineSeries  yField="num" form="curve"  lineStroke="{s1}" />
				
			</mx:series>
		</mx:LineChart>
		
		<!--添加圖例，也就是說明圖形的某個線條的顏色和做用的實例，相似於地圖的實例-->
		<mx:Legend dataProvider="{linechart}"/>
		
	</mx:Panel>
</s:Application>