<?xml version="1.0" encoding="utf-8"?><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" minWidth="955" minHeight="600" creationComplete="iniApp()" mouseOut="resize_handler(event)" mouseUp="resize_handler(event)" mouseMove="resize_handler(event)" viewSourceURL="srcview/index.html"> <!-- 水位库容关系曲线 --> <s:layout> <s:BasicLayout/> </s:layout> <fx:Style> .mystyle{ fontSize:14px; fontFamily:"Arial"; fontWeight:bold; } </fx:Style> <fx:Script> <![CDATA[ import com.adobe.serialization.json.JSON; import mx.charts.chartClasses.IAxis; import mx.charts.chartClasses.IAxisRenderer; import mx.charts.series.items.ColumnSeriesItem; import mx.charts.series.items.LineSeriesItem; import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.events.ResizeEvent; import mx.rpc.events.ResultEvent; [Bindable] private var chardata:ArrayCollection = new ArrayCollection(); [Bindable] private var clientHeight:Number ; [Bindable] private var clientWidth:Number ; [Bindable] private var title:String = ""; [Bindable] private var colX:String = ""; [Bindable] private var colYR:String = ""; [Bindable] private var colYL:String = ""; [Bindable] private var unitX:String = ""; [Bindable] private var unitYR:String = ""; [Bindable] private var unitYL:String = ""; [Bindable] private var MinVal:Number = 0; [Bindable] private var MaxVal:Number = 0; private var count:Number = 0; private var num:Number = 0; [Bindable] public var expenses:ArrayCollection = new ArrayCollection([ {Month:"Jan1", Expensesx:-100,Expenses1:100,Expenses2:120}, {Month:"Feb2", Expensesx:-200,Expenses1:200,Expenses2:220}, {Month:"Mar3", Expensesx:-300,Expenses1:300,Expenses2:320}, {Month:"Mar4", Expensesx:-400,Expenses1:400,Expenses2:420}, {Month:"Mar5", Expensesx:-500,Expenses1:500,Expenses2:520}, {Month:"Mar6", Expensesx:-600,Expenses1:600,Expenses2:620}, {Month:"Mar7", Expensesx:-700,Expenses1:700,Expenses2:720}, {Month:"Mar8", Expensesx:-800,Expenses1:800,Expenses2:820}, {Month:"Mar9", Expensesx:-900,Expenses1:900,Expenses2:920}, {Month:"Mar10", Expensesx:-1000,Expenses1:1000,Expenses2:1020} ]); private function resize_handler(event:Event):void{ clientHeight = ExternalInterface.call("function(){return document.body.clientHeight;}"); clientWidth = ExternalInterface.call("function(){return document.body.clientWidth;}"); } private function iniApp():void{ this.addEventListener(ResizeEvent.RESIZE,resize_handler); clientHeight = ExternalInterface.call("function(){return document.body.clientHeight;}"); clientWidth = ExternalInterface.call("function(){return document.body.clientWidth;}"); var element:Object = getParams(); if(typeof(element.url) != "undefined" && element.url != ""){ //service3.url = "http://localhost:9100/rrams/baseinfo.do?method=getData_Rzv_List"; service3.url = decodeURIComponent(element.url)+"&start=0&limit=10000";//"http://localhost:8100/rrams/baseinfo.do?method=getData_Flood_List&floodseason=1&name_id=402880fa28d8e8590128d916bb6a0013"; service3.send(); //Alert.show(decodeURIComponent("http://localhost:8100/rrams/baseinfo.do?method=getData_Flood_List&floodseason=1&name_id=402880fa28d8e8590128d916bb6a0013")); } } private function charDataLoad(event:ResultEvent):void{ var rawData:String = String(event.result); if(rawData != ""){ var arr:Array = (JSON.decode(rawData).root as Array); var totalProperty:Number = (JSON.decode(rawData).totalProperty as Number); var chartP:Array = JSON.decode(rawData).chart; this.colYL = chartP[0].colYL;//y属性名称 this.colYR = chartP[0].colYR;//y属性名称 this.colX = chartP[0].colX;//x属性名称 this.unitX = chartP[0].unitX;//单位 this.unitX = this.unitX.replace("m3","ｍ³").replace("m2","ｍ²"); this.unitYL = chartP[0].unitYL; this.unitYL = this.unitYL.replace("m3","ｍ³").replace("m2","ｍ²"); this.unitYR = chartP[0].unitYR; this.unitYR = this.unitYR.replace("m3","ｍ³").replace("m2","ｍ²"); if(totalProperty>50){ this.num = Math.floor(totalProperty/10); }else if(totalProperty>20){ this.num = Math.floor(totalProperty/5); }else if(totalProperty>10){ this.num = Math.floor(totalProperty/2); }else{ this.num = 1; } //这是取整数 if(typeof(chartP[0].MinVal) != "undefined"){ var min:Number = chartP[0].MinVal; this.MinVal = min - Math.floor(chartP[0].MinVal/10); } if(typeof(chartP[0].MaxVal) != "undefined"){ var max:Number =chartP[0].MaxVal; this.MaxVal = max + Math.floor(chartP[0].MaxVal/10); } this.chardata = new ArrayCollection(arr); this.chardata.refresh(); } } private function getParams():Object { var params:Object; params = {}; var query:String = ExternalInterface.call("window.location.search.substring", 1); if(query) { var pairs:Array = query.split("&"); for(var i:uint=0; i < pairs.length; i++) { var pos:int = pairs[i].indexOf("="); if(pos != -1) { var argname:String = pairs[i].substring(0, pos); var value:String = pairs[i].substring(pos+1); params[argname] = value; } } } return params; } private function dataTipFunc(item:Object):String { var curObj:Object = item.item; var curSeries:Object = Object(item.chartItem.element); var str:String = ""; if(curSeries.displayName == "降雨量(mm)"){ var cSI1:ColumnSeriesItem = item.chartItem as ColumnSeriesItem; str = "<font>时间:"+cSI1.xValue.toString()+ "<br>"; str += curSeries.displayName+":"+(0-(cSI1.yValue as Number)).toString(); str+="</font>"; }else{ var cSI:LineSeriesItem = item.chartItem as LineSeriesItem; str = "<font>时间:"+cSI.xValue.toString()+ "<br>"; str += curSeries.displayName+":"+cSI.yValue.toString(); str+="</font>"; } return str; } private function chariniApp(){ char_date.filters = []; } public function CategoryFunction(axis:LinearAxis,item:Object):Object { return(item.Country.State); } function ccclabelFunction(axisRenderer:IAxisRenderer,label:String):String { count ++; if((count % this.num) == 0){ return label; }else{ return ""; } } private function labelFunction3(value:Object, preValue:Object, axis:IAxis):String { var currentValue:Number = Number(value); return (-currentValue).toString(); } ]]> </fx:Script> <fx:Declarations> <mx:HTTPService id="service3" resultFormat="text" result="charDataLoad(event)"/> <mx:Parallel id="showEffects"> <mx:WipeRight duration="5000"/> <mx:Pause duration="1000" /> <mx:Blur startDelay="410" blurXFrom="18" blurYFrom="18" blurXTo="0" blurYTo="0" duration="300" filter="addItem"/> <mx:Dissolve id="dissolveIn" duration="1000" alphaFrom="2.0" alphaTo="3.0"/> <mx:Fade alphaFrom="10" alphaTo="10" duration="5000"/> </mx:Parallel> </fx:Declarations> <mx:HBox backgroundColor="White" id="char_date" width="100%" height="{this.clientHeight}" textAlign="center" initialize="chariniApp" > <mx:CartesianChart styleName="mystyle" id="linechart1" dataProvider="{this.expenses}" width="{this.clientWidth - this.legendbox.width-10}" height="{this.char_date.height}" seriesFilters="[]" dataTipFunction="dataTipFunc" showDataTips="true"> <!-- 背景 --> <mx:backgroundElements> <mx:GridLines horizontalChangeCount="1" > <mx:horizontalAlternateFill> <mx:SolidColor color="haloSilver" alpha="0.25" /> </mx:horizontalAlternateFill> <mx:verticalAlternateFill> <mx:SolidColor color="haloSilver" alpha="0.25" /> </mx:verticalAlternateFill> </mx:GridLines> </mx:backgroundElements> <!-- 横轴--> <mx:horizontalAxis> <mx:CategoryAxis id="axis1" dataProvider="{expenses}" categoryField="Month" /> </mx:horizontalAxis> <!-- 横轴渲染器 --> <mx:horizontalAxisRenderers> <mx:AxisRenderer id="horAxisRend" axis="{axis1}" placement="top" /> </mx:horizontalAxisRenderers> <!-- 纵轴渲染器 --> <mx:verticalAxisRenderers> <mx:AxisRenderer id="vertAxisRend" axis="{axis2}" verticalAxisTitleAlignment="vertical" placement="left" /> <mx:AxisRenderer id="vertAxisRend2" axis="{axis3}" placement="right"/> </mx:verticalAxisRenderers> <!-- 数据系列 --> <mx:series> <mx:ColumnSeries xField="Month" yField="Expensesx" displayName="降雨量(mm)"> <mx:verticalAxis> <mx:LinearAxis title="降雨量(mm)" id="axis2" labelFunction="labelFunction3"/> </mx:verticalAxis> </mx:ColumnSeries> <mx:LineSeries yField="Expenses1" xField="Month" form="curve" displayName="流量m²/s"> <mx:verticalAxis> <mx:LinearAxis id="axis3" minimum="0" maximum="1200" title="流量m²/s"/> </mx:verticalAxis> </mx:LineSeries> <mx:LineSeries yField="Expenses2" xField="Month" form="curve" displayName="预报流量m²/s"> <mx:verticalAxis> <mx:LinearAxis id="axis4" title="预报流量m²/s" minimum="0" maximum="1200"/> </mx:verticalAxis> </mx:LineSeries> </mx:series> </mx:CartesianChart> <mx:VBox id="legendbox" width="100"> <mx:Legend styleName="mystyle" dataProvider="{linechart1}" id="legend" direction="vertical" /> </mx:VBox> </mx:HBox></s:Application>
