加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

自定义flex图表toptip的提示

发布时间:2020-12-15 01:38:54 所属栏目:百科 来源:网络整理
导读:?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="

<?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","m3").replace("m2","m2");??????????this.unitYL = chartP[0].unitYL;?????this.unitYL =? this.unitYL.replace("m3","m2");?????this.unitYR = chartP[0].unitYR;?????this.unitYR =? this.unitYR.replace("m3","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="流量m2/s">?????<mx:verticalAxis>??????<mx:LinearAxis id="axis3" minimum="0" maximum="1200" title="流量m2/s"/>?????</mx:verticalAxis>????</mx:LineSeries>????<mx:LineSeries yField="Expenses2" xField="Month"? form="curve" displayName="预报流量m2/s">?????<mx:verticalAxis>??????<mx:LinearAxis id="axis4" title="预报流量m2/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>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读