Flex PieChart 圓餅圖 突出特效


<?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"
>
<fx:Script>
<![CDATA[
import mx.charts.events.ChartItemEvent;
import mx.charts.series.items.PieSeriesItem;
import mx.collections.ArrayCollection;
import mx.effects.easing.Elastic;
import mx.events.FlexEvent;

protected function itemClick(event:ChartItemEvent):void
{
//取得被點擊的切片項目
var item:PieSeriesItem = event.hitData.chartItem as PieSeriesItem;

//讓餅圖突出的效果
var arr:Array = [];
arr[item.index] = 0.2;
pieSeries.perWedgeExplodeRadius = arr;
}

]]>
</fx:Script>
<fx:Declarations>
<s:XMLListCollection id="provider">
<s:source>
<fx:XMLList xmlns="">
<product label="Product 1" data="3" />
<product label="Product 2" data="1" />
<product label="Product 3" data="4" />
<product label="Product 4" data="1" />
<product label="Product 5" data="5" />
<product label="Product 6" data="9" />
</fx:XMLList>
</s:source>
</s:XMLListCollection>
</fx:Declarations>
<mx:PieChart id="pieChart" dataProvider="{provider}" showDataTips="true"
itemClick="itemClick(event);" width="400" height="400"
>
<mx:series>
<mx:PieSeries id="pieSeries" field="@data" nameField="@label" labelPosition="none" reserveExplodeRadius="0.2">
<mx:showDataEffect>
<mx:SeriesInterpolate duration="1500" easingFunction="{Elastic.easeOut}" />
</mx:showDataEffect>
<mx:filters>
<mx:DropShadowFilter />
</mx:filters>
</mx:PieSeries>
</mx:series>
</mx:PieChart>
</s:Application>


要注意的是：
PieSeries的reserveExplodeRadius數值要與arr[item.index] = 0.2; 的數值相同，不相同時餅圖被click時會看見整體的PieChart縮小。