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設計成你要的就可以用了!
Trackback Address :: http://diary.tw/allenliao/trackback/789
