Flex 產生動態折線圖(續)

<?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 flash.events.TimerEvent;
			import flash.utils.Timer;
			
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.rpc.Fault;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			import mx.rpc.http.mxml.HTTPService;
			import mx.controls.Alert;
			import mx.core.FlexGlobals;

			//定義一個XML類實例
			[Bindable]
			public var xml:XML;  
			[Bindable]
			private var expensesAC:ArrayCollection ;
			
			
			
			public static var viewXMLList:XMLList=new XMLList();
			
			// 用於鏈接後臺servlet
			private var httpService : HTTPService;
			
			//private var externalVar : ExternalInterface;
			//本函數用於構建與後臺jsp鏈接的方式和url
			private function setHttpService(e:Event):void{
//獲取頁面的參數值:serverIp
 var serverIp : Object = FlexGlobals.topLevelApplication.parameters.serverIp;
				httpService = new HTTPService();
				httpService.method = "GET";
				//Alert.show(serverIp.toString());
				httpService.url = "http://" +  serverIp.toString() + ":8080/ALEConsole/CreateLineChartServlet";
				//Alert.show( "http://" + serverIp.toString() + ":8080/ALEConsole/CreateLineChartServlet");
				httpService.addEventListener(ResultEvent.RESULT,resultHandler);
				httpService.send();
				
			}
			
			//結果處理
			private function resultHandler(event:ResultEvent):void{
				expensesAC = event.result.datas.data;
				
				
			}
			
			//應用程序初始化處理函數 
			public function initApp():void  
				
			{     
				//啓動時執行請求
				//setHttpService();
				//這裏用的Timer定時
				
				var timer: Timer = new Timer(1000);
				
				timer.addEventListener(TimerEvent.TIMER, setHttpService);
				
				timer.start();
				
				
				
			}
		]]>
	</fx:Script>
	
	
	<fx:Declarations>
		<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軸-->
			<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中的數據動態生成的-->
				<mx:LineSeries  yField="num" form="curve"  lineStroke="{s1}" />
				
			</mx:series>
		</mx:LineChart>
		
		<!--添加圖例,也就是說明圖形的某個線條的顏色和做用的實例,相似於地圖的實例-->
		<mx:Legend dataProvider="{linechart}" height="57"/>
		
	</mx:Panel>
</s:Application>

個人flex工程名:LineChart,所以在本段代碼構建完成後,會產生一個LineChart.html.將bin-Debug中的全部文件拷貝到
web 的相應目錄下。修改Linechart.html爲jsp。在該文件中:
 <script type="text/javascript">
            <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. --> 
            var swfVersionStr = "10.0.0";
            <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
            var xiSwfUrlStr = "playerProductInstall.swf";
            var flashvars = {"serverIp":"${pageContext.request.serverName}"};
            var params = {};
            params.quality = "high";
            params.bgcolor = "#ffffff";
            params.allowscriptaccess = "sameDomain";
            params.allowfullscreen = "true";
            var attributes = {};
            attributes.id = "LineChart";
            attributes.name = "LineChart";
            attributes.align = "middle";
            swfobject.embedSWF(
                "LineChart.swf", "flashContent", 
                "100%", "100%", 
                swfVersionStr, xiSwfUrlStr, 
                flashvars, params, attributes);
			<!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. -->
			swfobject.createCSS("#flashContent", "display:block;text-align:left;");
        </script>
在該段javascript代碼中:
var flashvars = {"serverIp":"${pageContext.request.serverName}"};
這段代碼是咱們向flex傳輸參數的位置,其爲鍵值對的方式存在。
/獲取頁面的參數值:serverIp
 var serverIp : Object = FlexGlobals.topLevelApplication.parameters.serverIp;
 相應的使用上面那句獲取傳輸進來的參數
相關文章
相關標籤/搜索