zoukankan      html  css  js  c++  java
  • Flex : lineChart Effect 效果。。。。

    <?xml version="1.0"?>
    <!-- Simple example to demonstrate the GridLines class. -->
    <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 "<b>高度/时间</b><br />时间:" + LCI.item.time + "<br/>高度:"+LCI.item.height+"米";
          //  tit.label = "<b>高度/时间</b><br />时间我们的";
          
          //Button1.label = "外部传递的uid:" +this.parameters.Vid;
          //var lineSeries:LineSeries=LineSeries(hitData.chartItem.element);
        //var str:String="<b>" + lineSeries.displayName + "</b>\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 += "<font size='14' COLOR='#FF0000'><b>" + n + "</b></FONT><BR/>------------------\n<font size='14' >价格:" + yValue  + "(元)<BR/>"  + "日期:" + 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"/>

                  
    <!-- Define the effects -->
              
    <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>
  • 相关阅读:
    on、where、having的区别和关系
    Java知识点补缺
    Hive部署到IDEA报错 Hive Schema version 2.1.0 does not match metastore's schema version 1.2.0 Metastore is not upgraded or corrupt 解决方案
    Hive知识点总结
    区分同步与异步、阻塞与非阻塞
    Hive查询分区元数据,PARTITIONED BY
    单例模式总结
    Sql语句执行顺序
    收藏大数据相关面试题比较好的链接
    实习技能
  • 原文地址:https://www.cnblogs.com/Fooo/p/1587164.html
Copyright © 2011-2022 走看看