代码如下:(代码中附加了注释,每一种方法对应的效果均有注释)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="init()">
<mx:Script>
<!--[CDATA[
import mx.graphics.IFill;
import mx.graphics.SolidColor;
import mx.charts.ChartItem;
import mx.charts.events.ChartItemEvent;
import mx.charts.series.items.PieSeriesItem;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.utils.StringUtil;
[Bindable]
var currentProvider:Array=dataProvider;
[Bindable]
var drillProvider:Array;
[Bindable]
var dataProvider:Array=pieProvider;
private function init():void
{
dataProvider=pieProvider;
currentProvider=dataProvider;
}
//按指定格式显示每一块的内容
private function pieSeries_labelFunc(item:Object, field:String, index:Number, percentValue:Number):String
{
return StringUtil.substitute("{0} ({1}%)", item.name, percentValue.toFixed(1));
}
//设置PieChart颜色渐变
private function pieSeries_fillFunc(item:ChartItem, index:Number):IFill
{
var curItem:PieSeriesItem=PieSeriesItem(item);
/* Convert to a number between 0 and 1. */
var pct:Number=curItem.percentValue / 100;
return new SolidColor(0xF8FF7F / pct, 1.0);
}
//显示选中对象的name属性值并弹出选中部分
private function showDetail(evt:ChartItemEvent):void
{
var psi:PieSeriesItem=evt.hitData.chartItem as PieSeriesItem;
/*设置选中的部分弹出显示*/
var arr:Array = [];
arr[evt.hitData.chartItem.index] = 0.2;
pieSeries.perWedgeExplodeRadius = arr;
//显示选中项的name属性值
Alert.show(psi.item.name);
}
//点击具体位置时进入下一层数据显示,若已经在具体数据状态下则切换回原始数据状态
private function drillIt(event:ChartItemEvent):void
{
if (currentProvider == dataProvider)
{
drillProvider=pieDetailProvider;
pieSeries.field="dData";
pieSeries.labelField="name";
pieSeries.nameField="name";
currentProvider=drillProvider;
}
else
{
pieSeries.field="data";
pieSeries.labelField="name";
pieSeries.nameField="name";
currentProvider=dataProvider;
}
}
]]-->
</mx:Script>
<mx:Array id="pieProvider">
<mx:Object name="Apple"
data="200"/>
<mx:Object name="Banana"
data="500"/>
<mx:Object name="Pear"
data="700"/>
<mx:Object name="Orange"
data="100"/>
</mx:Array>
<mx:Array id="pieDetailProvider">
<mx:Object name="East"
dData="22"/>
<mx:Object name="West"
dData="38"/>
<mx:Object name="South"
dData="30"/>
<mx:Object name="West"
dData="10"/>
</mx:Array>
<!-- 饼图数据源变化时的效果 -->
<mx:SeriesZoom id="zoomIn"
duration="500"
verticalFocus="bottom"/>
<mx:SeriesSlide id="zoomOut"
duration="500"
direction="left"/>
<mx:Panel styleName="opaquePanel"
width="100%"
height="100%">
<mx:PieChart id="pieChart"
dataProvider="{currentProvider}"
showDataTips="true"
height="100%"
width="100%"
itemClick="drillIt(event)"
innerRadius="0.2">
<mx:series>
<mx:PieSeries id="pieSeries"
field="data"
nameField="name"
labelPosition="callout"
labelFunction="pieSeries_labelFunc"
fillFunction="pieSeries_fillFunc"
showDataEffect="zoomIn"
hideDataEffect="zoomOut"
explodeRadius="0.05"/>
</mx:series>
</mx:PieChart>
<mx:ControlBar width="100%">
<mx:Legend dataProvider="{pieChart}"
direction="horizontal"
horizontalGap="100"
width="100%"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
演示效果:
数据钻探效果: