使用FLEX 第三方特效--DrillDownEffect

Flex 2009/06/26 08:51
1.下載套件範例
http://www.quietlyscheming.com/blog/2006/10/02/flex-charting-sample-animated-drilldown/

2.把qs的資料夾CO出來貼到你的專案的SRC資料夾中

3.插進這2行TAG

<effects:DrillDownEffect id="effD" duration="1500"  effectEnd="chart.mouseChildren = true;" />
 <effects:DrillUpEffect id="effU" duration="1500" effectEnd="chart.mouseChildren = true;" />

4.貼上4個FUNCTION
public function genDataFrom(node:XML):XMLList//依次產生一層
   {
    var count:Number = Math.round(Math.random()*2 +2);//產生的筆數
    var aCharCode:Number = ("A").charCodeAt(0);//每個子層級都從A開始命名
    var children:XMLList = rootNode.children();
    trace("children.length()"+children.length())
    if(children.length() == 0)
    {
     var rootLabel:String = node.@label;
     for(var i:int = 0;i < count;i++)
     {
      rootNode.appendChild( <node label={rootLabel + "." +  String.fromCharCode(aCharCode+i)}
       name={rootLabel + "." + String.fromCharCode(aCharCode+i)} Country={Math.random()*100} normal={Math.random()*100} errorD={Math.random()*100} value={Math.random()*100} /> );
     }
    }
    return node.children();
   }
   public function drillDown(e:ChartItemEvent):void//跳到下一層
   {
    chart.mouseChildren = false;
    effD.drillFromIndex = e.hitData.chartItem.index;
   
    series.setStyle("showDataEffect",effD);  
    series2.setStyle("showDataEffect",effD);
    rootNode = XML(e.hitData.chartItem.item);//CHRT ITEM的資料
   
    chart.dataProvider = genDataFrom(rootNode);    
    //crumbs.leaf = rootNode;
   }
   public function drillUp():void//跳到上一層
   {
    if (rootNode.parent() == null)
     return;
     
    drillUpTo(rootNode.parent());
   }
   public function drillUpTo(node:XML):void//往上跳到某一層
   {
    if(rootNode == node)
     return;
     
    while(rootNode.parent() != node)
     rootNode = rootNode.parent();
     
    chart.mouseChildren = false;
    series.setStyle("showDataEffect",effU);
    series2.setStyle("showDataEffect",effD);
    effU.drillToIndex = rootNode.childIndex();  
    rootNode = rootNode.parent();
    chart.dataProvider = genDataFrom(rootNode);    
    //crumbs.leaf = rootNode;
   }

5.貼上import mx.charts.chartClasses.Series;
   import mx.charts.chartClasses.ChartBase;
   import mx.charts.events.ChartItemEvent;
   import mx.charts.ChartItem;
   private var min:Number = 0;
   private var max:Number = 100;
   private var chart:ChartBase;
   private var series:Series;
   private var series2:Series;
   private var rootNode:XML = <root value='' name="root" />;

6.把series chart改成你要的rootNode設計成你要的就可以用了!
top
TAG

Trackback Address :: http://diary.tw/allenliao/trackback/789

Write a comment


PREV : [1] : ... [8] : [9] : [10] : [11] : [12] : [13] : [14] : [15] : [16] : ... [80] : NEXT