Flex : lineChart Effect 效果。。。。

转载

mob604756fb8908 2009-10-20 22:25:00

文章标签 xml ide 数据 elastic 编程 文章分类 代码人生

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comp="com.*" creationComplete="loadData()" >
 <mx:Script>
 <![CDATA[
 import mx.charts.CategoryAxis;
 import mx.charts.chartClasses.IAxis;
 import mx.collections.ArrayCollection;
 import mx.charts.series.items.PieSeriesItem;
 import mx.charts.HitData;
 import custer.MyLabel;
 import mx.effects.easing.*;
 import mx.controls.Alert;
 import mx.charts.series.LineSeries;
 import mx.charts.chartClasses.DataTransform;
 import mx.charts.chartClasses.CartesianTransform;
 import mx.charts.series.items.LineSeriesItem;
 import mx.skins.halo.HaloFocusRect;
 import mx.charts.renderers.*;
import mx.effects.easing.Elastic;
 import mx.rpc.events.ResultEvent;
 private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
 return currFormatter.format(item);
 }

 var myURL:String="";
 var parametersID:String="";

 private function loadData():void
 {
 Button1.label = "ss外部传递的uid:"+mx.core.Application.application.parameters.Vid;

 myURL="XMLFile.xml";
 Button1.label = "ss外部传递的uid:"+ this.parameters.Vid;
 //myURL += "?Vid="+22;

 var service:HTTPService = new HTTPService();
 service.url = "XMLFile.xml?Vid=" + this.parameters.Vid;
 service.useProxy = false;
 service.resultFormat="xml";
 service.addEventListener(ResultEvent.RESULT,resultUsers);
 service.send();

 // for(var k:int=0; k<31; k++)
 // service.addItem(expensesAC[k]);
 // this.myHTTPData.send();
 }

 private function init(evt:Event):void {
 // Third series uses CrossItemRenderer.
 // series3.setStyle("itemRenderer", new ClassFactory(mx.charts.renderers.CircleItemRenderer));
 series3.setStyle("lineStroke", new Stroke(0x0000FF, 2, 0.4));
 series3.setStyle("fill", 0xFF0000);

 series3.setStyle("radius", 5);
 series3.setStyle("adjustedRadius", 2);
 series3.setStyle("itemRenderer", new ClassFactory(ShadowBoxItemRenderer));


 parametersID=this.parameters.Vid;
 myURL += "?Vid="+parametersID;

 //Button1.label = "000外部传递的uid:"+ parametersID;

 Button1.label = "00000";
 //for(var k:int=0; k<31; k++)
 // myHTTPData.(expensesAC[k]);

 // var chart:CustomLineChart = evt.currentTarget as CustomLineChart;
 //seriesFilterArr = chart.seriesFilters;
 // var len:uint = linechart.seriesFilters.length;
 // if (len > 0) {
 // linechart.seriesFilters = [];
 // } else {
 linechart.seriesFilters = seriesFilterArr;
 // }
 }
 function CustomLineChart_dataTipFunction(item:HitData):String {
 var LCI:LineSeries = item.chartItem as LineSeries;
 //return "高度/时间 时间：" + LCI.item.time + " 高度："+LCI.item.height+"米";
 // tit.label = "高度/时间 时间我们的";

 //Button1.label = "外部传递的uid:" +this.parameters.Vid;
 //var lineSeries:LineSeries=LineSeries(hitData.chartItem.element);
 //var str:String="" + lineSeries.displayName + "\n";
 //var xml:XML=HitData..item as XML;
 //str+="日期：" + showTime(xml.time) + "\n";
 //str+="次数：" + xml.child(lineSeries.yField);


 var dt:String = "";
 var this_series:LineSeries = LineSeries(item.element);
 var dataTransform:DataTransform = this_series.dataTransform;
 var vertical_axis:LinearAxis = LinearAxis(dataTransform.getAxis(CartesianTransform.VERTICAL_AXIS));
 var horizontal_axis:CategoryAxis = CategoryAxis(dataTransform.getAxis(CartesianTransform.HORIZONTAL_AXIS));

 var actionItemID:String = this_series.xField;
 var xValue:Object = horizontal_axis.formatForScreen(LineSeriesItem(item.chartItem).xValue);
 var yValue:Object = vertical_axis.formatForScreen(LineSeriesItem(item.chartItem).yValue);
 var n:String = this_series.displayName;
 var xml:XML=item.chartItem as XML;

 var dds:String = item.chartItem.item["Dat"+actionItemID].toString();



 // var tDate:String = item.chartItem.item["content"+actionItemID].toString();
 if (n && n != "")
 dt += "" + n + " ------------------\n价格：" + yValue + "(元) " + "日期：" + xValue + " ** " + dds ;


 return dt;
 }

 [Bindable]
 private var showData:ArrayCollection = new ArrayCollection();//定义要显示的临时数据

 [Bindable]
 private var expensesAC:ArrayCollection = new ArrayCollection( [
 { Month: "17", Profit: 2000, Expenses: 1500, Amount: 450 },
 { Month: "18", Profit: 800, Expenses: 200, Amount: 600 },
 { Month: "19", Profit: 1500, Expenses: 500, Amount: 300 },
 { Month: "20", Profit: 1800, Expenses: 1200, Amount: 900 },
 { Month: "21", Profit: 2400, Expenses: 575, Amount: 500 },
 { Month: "22", Profit: 720, Expenses: 575, Amount: 500 },
 { Month: "23", Profit: 1800, Expenses: 1200, Amount: 900 },
 { Month: "24", Profit: 2400, Expenses: 575, Amount: 500 },
 { Month: "25", Profit: 1400, Expenses: 575, Amount: 500 },
 { Month: "26", Profit: 2000, Expenses: 1500, Amount: 450 },
 { Month: "27", Profit: 1000, Expenses: 200, Amount: 600 },
 { Month: "28", Profit: 1500, Expenses: 500, Amount: 300 },
 { Month: "29", Profit: 1800, Expenses: 1200, Amount: 900 },
 { Month: "30", Profit: 2400, Expenses: 575, Amount: 500 },
 { Month: "31", Profit: 3400, Expenses: 575, Amount: 500 },
 { Month: "1", Profit: 1700, Expenses: 1200, Amount: 900 },
 { Month: "2", Profit: 2400, Expenses: 575, Amount: 500 },
 { Month: "3", Profit: 480, Expenses: 575, Amount: 500 },
 { Month: "4", Profit: 2400, Expenses: 575, Amount: 500 },
 { Month: "5", Profit: 1480, Expenses: 575, Amount: 500 },
 { Month: "6", Profit: 570, Expenses: 575, Amount: 500 },
 { Month: "7", Profit: 1970, Expenses: 575, Amount: 500 },
 { Month: "8", Profit: 1600, Expenses: 575, Amount: 500 },
 { Month: "9", Profit: 720, Expenses: 575, Amount: 500 },
 { Month: "10", Profit: 2100, Expenses: 575, Amount: 500 },
 { Month: "11", Profit: 780, Expenses: 575, Amount: 500 },
 { Month: "12", Profit: 1900, Expenses: 575, Amount: 500 },
 { Month: "13", Profit: 1480, Expenses: 575, Amount: 500 },
 { Month: "14", Profit: 1100, Expenses: 575, Amount: 500 },
 { Month: "15", Profit: 2480, Expenses: 575, Amount: 500 },
 { Month: "16", Profit: 700, Expenses: 575, Amount: 500 },
 { Month: "17", Profit: 1400, Expenses: 575, Amount: 500 } ]);

 private function linechart_mouseMove(evt:MouseEvent):void {
 // tit.label = evt.stageY.toString() + " - " + evt.localY+ " - " + this.mouseY;

 }

 [Bindable]
 private var guest:XML;

 private function resultUsers(event:ResultEvent):void{//处理结果

 guest = XML(event.result);
 linechart.dataProvider=guest.children();//XMLList


 }

 ]]>
 </mx:Script>
 <mx:SeriesInterpolate id="interp"
 elementOffset="1000"
 duration="60000"
 minimumElementDuration="1000"
 offset="500"
 />
 <mx:Sequence id="itemsChangeEffect1">
 <mx:Blur blurYTo="12" blurXTo="12" duration="300" perElementOffset="150" filter="removeItem"/>

 
 <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>
</mx:Sequence>

 <mx:Parallel id="hideEffects">
 <mx:Fade alphaFrom="1" alphaTo="0" duration="2500"/>
 <mx:WipeLeft duration="3000"/>
 <mx:Blur startDelay="410" blurXFrom="18" blurYFrom="18" blurXTo="0" blurYTo="0" duration="300" filter="addItem"/>
 </mx:Parallel>
 <mx:CurrencyFormatter id="currFormatter" precision="0" />
 <mx:Stroke id = "s1" color="#2E95BF" weight="1"/>
 <mx:Stroke id = "s2" color="#62C426" weight="1"/>
 <mx:Stroke id = "s3" color="#FF8C31" weight="1.5"/>
 <mx:Stroke id="vSolid" weight=".002" color="#333333" alpha=".04" />
 <mx:Stroke id="hSolid" weight=".03" color="#ff0000" alpha=".1" />
<mx:Stroke id="axisStroke2" color="#6B90DA" weight="2" alpha=".25" caps="square"/>
<mx:SolidColor id="vFill" color="#D6DECE" alpha=".3" />
<mx:SolidColor id="hFill" color="#F9E0E0" alpha=".03" />
<mx:SolidColor id="tFill" color="#ffffff" alpha=".3" />
 <mx:Array id="seriesFilterArr" />

 <mx:HTTPService url="{myURL}" id="myHTTPData" method="GET" resultFormat="xml" result="resultUsers(event)">
 <mx:request>
 <Vid>{parametersID}</Vid>
</mx:request>
</mx:HTTPService>
 <mx:Panel id="pan" title="海口-重庆航线订单趋势图" height="100%" width="100%" fontSize="14" fontWeight="normal">
 <mx:Button id="Button1" width="558" color="#FA7A09" labelPlacement="left"/>
 <comp:CustomLineChart id="linechart" height="100%" width="100%"
 paddingLeft="5" paddingRight="5"
 showDataTips="true" dataTipFunction="CustomLineChart_dataTipFunction" mouseMove="" creationComplete="init(event);" addedEffect="{itemsChangeEffect1}">

 <comp:verticalAxis>
 <mx:LinearAxis baseAtZero="false" title="Price" labelFunction="linearAxis_labelFunc" minimum="0"
 />
 </comp:verticalAxis>
 <comp:horizontalAxis>
 <mx:CategoryAxis categoryField="Name" />
 </comp:horizontalAxis>
 <comp:horizontalAxisRenderer>
 <mx:AxisRenderer canStagger="false" fontSize="10" >
 <mx:axisStroke>{axisStroke2}</mx:axisStroke>
 </mx:AxisRenderer>
 </comp:horizontalAxisRenderer>
 <comp:verticalAxisRenderer>
 <mx:AxisRenderer >
 <mx:axisStroke>{axisStroke2}</mx:axisStroke>
 </mx:AxisRenderer>
 </comp:verticalAxisRenderer>
 <comp:backgroundElements>
 <mx:GridLines id="GridLines1" focusBlendMode="HaloFocusRect" focusThickness="12" direction="both" horizontalTickAligned="true" verticalTickAligned="true"
 verticalStroke="{hSolid}" horizontalStroke="{vSolid}"
 verticalFill="{vFill}" horizontalFill="{hFill}"
 verticalAlternateFill="{tFill}" horizontalAlternateFill="{tFill}"
 mouseOver="linechart_mouseMove(event);" rollOver="true" />
 </comp:backgroundElements>
 <comp:series>
 <mx:LineSeries id="series3" yField="ID" form="segment" displayName="票点明细：" itemRenderer="custer.MyLabel" lineStroke="{s3}" showDataEffect="showEffects" >
 <mx:showEffect>
 <mx:Parallel id="sdddhowEffects">
 <mx:WipeRight duration="5000"/>
 <mx:Pause duration="1000" />

<mx:Dissolve id="dissfolveIn" duration="1000" alphaFrom="2.0" alphaTo="3.0"/>
 <mx:Blur startDelay="410" blurXFrom="18" blurYFrom="18" blurXTo="0" blurYTo="0" duration="300" filter="addItem"/>
<mx:Fade alphaFrom="10" alphaTo="10" duration="5000"/>
 </mx:Parallel>
 </mx:showEffect>
 <mx:stroke>
 <mx:Stroke color="0xFF9900" weight="5"/>

 </mx:stroke>
 </mx:LineSeries>
 </comp:series>
 </comp:CustomLineChart>

 </mx:Panel>

</mx:Application>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。