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>