flex 倒柱状图

wzj_119

于 2010-09-01 09:57:00 发布

阅读量2k

点赞数

文章标签： flex function string object service library

<?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%3A%2F%2Flocalhost%3A8100%2Frrams%2Fbaseinfo.do%3Fmethod%3DgetData_Flood_List%26floodseason%3D1%26name_id%3D402880fa28d8e8590128d916bb6a0013"));
 }
 }
 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 = "时间:"+cSI1.xValue.toString()+ " ";
 str += curSeries.displayName+":"+(0-(cSI1.yValue as Number)).toString();
 str+="";
 }else{
 var cSI:LineSeriesItem = item.chartItem as LineSeriesItem;
 str = "时间:"+cSI.xValue.toString()+ " ";
 str += curSeries.displayName+":"+cSI.yValue.toString();
 str+="";
 }
 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>

-----------------------------------------------上为实例、下为动态传入JSON数据---------------------------------------------------------------

<?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.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 MinValL:Number = 0;
 [Bindable]
 private var MaxValL:Number = 0;
 [Bindable]
 private var MinValR:Number = 0;
 [Bindable]
 private var MaxValR:Number = 0;
 private var count:Number = 0;
 private var num:Number = 0;
 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:9000/jsontest/Testjson";
 //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%3A%2F%2Flocalhost%3A8100%2Frrams%2Fbaseinfo.do%3Fmethod%3DgetData_Flood_List%26floodseason%3D1%26name_id%3D402880fa28d8e8590128d916bb6a0013"));
 //}
 }
 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);
 trace("totalProperty="+totalProperty);
 var chartP:Array = JSON.decode(rawData).chart;
 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;
 }
 trace("this.num="+this.num);
 this.MinValR = chartP[0].MinValR;
 this.MinValL = chartP[0].MinValL;
 this.MaxValR = chartP[0].MaxValR;
 this.MaxValL = chartP[0].MaxValL;

 trace("this.MaxValL"+this.MaxValL);
 trace("this.MaxValR"+this.MaxValR);
 trace("this.MinValL"+this.MinValL);
 trace("this.MinValR"+this.MinValR);

 this.chardata = new ArrayCollection(arr);
 for(var i:int=0;i<this.chardata.length;i++){
 this.chardata.getItemAt(i).column = 0-Number(this.chardata.getItemAt(i).column);
 trace(this.chardata.getItemAt(i).column);
 }
 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 = "时间:"+cSI1.xValue.toString()+ " ";
 str += curSeries.displayName+":"+(0-Number(cSI1.yValue)).toString();
 str+="";
 }else{
 var cSI:LineSeriesItem = item.chartItem as LineSeriesItem;
 str = "时间:"+cSI.xValue.toString()+ " ";
 str += curSeries.displayName+":"+cSI.yValue.toString();
 str+="";
 }
 return str;
 }
 private function chariniApp(){
 char_date.filters = [];
 }
 public function CategoryFunction(axis:LinearAxis,item:Object):Object {
 return(item.Country.State);
 }
 function tiaodianlabelFunction(axisRenderer:IAxisRenderer,label:String):String {
 count ++;
 if((count % this.num) == 0 || count==1){
 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.chardata}" 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"
 categoryField="colX"
 />
 </mx:horizontalAxis>
 
 <mx:horizontalAxisRenderers>
 <mx:AxisRenderer labelFunction="tiaodianlabelFunction" 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 yField="column" xField="colX" displayName="降雨量(mm)">
 <mx:verticalAxis>
 <mx:LinearAxis title="降雨量(mm)" minimum="{-Number(this.MaxValL)}" maximum="{-Number(this.MinValL)}" id="axis2" labelFunction="labelFunction3" />
 </mx:verticalAxis>
 </mx:ColumnSeries>

 <mx:LineSeries yField="line1" xField="colX" form="curve" displayName="流量m²/s">
 <mx:verticalAxis>
 <mx:LinearAxis id="axis3" maximum="{this.MaxValR}" minimum="{this.MinValR}" title="流量m²/s"/>
 </mx:verticalAxis>
 </mx:LineSeries>
 <mx:LineSeries yField="line2" xField="colX" form="curve" displayName="预报流量m²/s">
 <mx:verticalAxis>
 <mx:LinearAxis id="axis4" maximum="{this.MaxValR}" minimum="{this.MinValR}" title="预报流量m²/s"/>
 </mx:verticalAxis>
 </mx:LineSeries>
 </mx:series>
 </mx:CartesianChart>
 <mx:VBox id="legendbox">
 <mx:Legend styleName="mystyle" dataProvider="{linechart1}" id="legend" direction="vertical" />
 </mx:VBox>
</mx:HBox>
</s:Application>