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;

 相应的使用上面那句获取传输进来的参数


转载于:https://my.oschina.net/u/1011659/blog/164287