转自http://xaajie.iteye.com/blog/399239
创建一个简单的环形饼图，通过PieChart的innerRadius属性进行设置实现环形效果：
- <?xml?version="1.0"?encoding="utf-8"?>??
- <mx:Application?xmlns:mx="http://www.adobe.com/2006/mxml"?layout="absolute">??
- ???????mx:Script ????????<![CDATA[?
- ??????import?mx.collections.ArrayCollection;???????????
- ??????import?mx.charts.HitData;?
- ????????[Bindable]?
- ????????public?var?chengjiPie:ArrayCollection?=?new?ArrayCollection(?[?
- ????????????{?classs:?"60分以下",?num:?5?},?
- ????????????{?classs:?"60~70分",?num:?4?},147)">????????????{?classs:?"70~80分",?num:5},147)">????????????{?classs:?"80~90分",?num:?4},147)">????????????{?classs:?"90分以上",?num:?3}]);?
- ?????????????
- ????????private?function?displayGold(data:Object,?field:String,?index:Number,?percentValue:Number):String?{?
- ????????????var?temp:String=?("?"?+?percentValue).substr(0,6);?
- ????????????return?data.classs?+?":?"?+??'n'?+?temp?+?"%";?
- ????????}?
- ?????????
- ????????]]>??
- ????????
- ????</ ???
- mx:SolidColor?id="sc1"?color="0xE46899"?alpha=".6"/>??
- mx:SolidColor?id="sc2"?color="0xAAD71A"?alpha=".6"mx:SolidColor?id="sc3"?color="0xFFE30E"?alpha=".6"mx:SolidColor?id="sc4"?color="0xFDB500"?alpha=".6"mx:SolidColor?id="sc5"?color="0x4CD0EF"?alpha=".6" ??
- mx:Stroke?id="callouts"?weight="2"?color="0x999999"?alpha=".8"?caps="square"mx:Stroke?id="radial"?weight="1"?color="0xFFFFCC"?alpha=".3"mx:Stroke?id="pieborder"?color="0x000000"?weight="2"?alpha=".5"mx:Panel??height="100%"?width="100%"?layout="absolute"?fontSize="12" ??????mx:PieChart?id="chart"??showDataTips="true"?width="100%"?height="100%"??
- ?????????????????dataProvider="{chengjiPie}"?innerRadius=".3"?horizontalCenter="0"?verticalCenter="0" ????????????????mx:series ????????????????????mx:Array ????????????????????????mx:PieSeries?nameField="classs"?labelPosition="callout"??field="num"???
- ??????????????????????????????????????labelFunction="displayGold"? ???????????????????????????
- mx:PieSeries ????????????mx:PieChart>???
- ????????mx:Legend?dataProvider="{chart}"?right="0"?bottom="0"mx:Panelmx:Application>??
?
?在这个简单饼图的基础上进行一些改动：
1?添加饼图上颜色块的渐变效果，用到RadialGradient标签.
2?实现鼠标点击，该块分离的效果，对PieSeries进行相关属性设置，explodeRadius:分离程度。PerWedgeExplodeRadius:数组规定出每一块的分离值。
3?添加动态效果，点击时的弹动变化。showDataEffect标签处添加Elastic.eaSEOut震动效果。
?
??????import?mx.effects.easing.*;??
????????private?var?_selectedRegion:Object;?
????????public?function?get?selectedRegion():Object?
????????{?
????????????return?_selectedRegion;?
????????public?function?set?selectedRegion(item:Object):void?
????????????_selectedRegion?=?item;?
?
????????????var?index:int?=?-1;?
????????????for?(var?i:int=0;?i?<?chengjiPie.length?&&?index?==?-1;?i++)?
????????????{?
????????????????if?(chengjiPie[i].classs?==?item.classs)?
????????????????????index?=?i;?
????????????}?
????????????
????????????var?explodeData:Array?=?[];?
????????????explodeData[index]?=?0.15;?
????????????chart.series[0].perWedgeExplodeRadius?=?explodeData;?
????????private?function?regionChange(item:Object):void?
????????????selectedRegion?=?item;?
????????????dispatchEvent(new?Event("regionChange"));?
???????private?function?formatDataTip(hitData:HitData):String?
????????????var?classs:String?=?hitData.item.classs;?
????????????var?num:Number?=?hitData.item.num;?
????????????return?classs;?
????????????????itemClick="regionChange(event.hitData.item)"??dataProvider="{chengjiPie}"??horizontalCenter="0"?verticalCenter="0" ??????????????????????????????mx:showDataEffect ???????????????????????????????mx:SeriesInterpolate?duration="1500"?easingFunction="{Elastic.eaSEOut}"?/>???
?????????????????????????mx:fills ???????????????????????????? ????????????????????????????????mx:RadialGradient ????????????????????????????????????mx:entries ???????????????????????????????????????? ????????????????????????????????????????????mx:GradientEntry?color="#EF7651"?ratio="0"mx:GradientEntry?color="#994C34"?ratio="1"mx:GradientEntry?color="#E9C836"?ratio="0"mx:GradientEntry?color="#AA9127"?ratio="1"mx:GradientEntry?color="#6FB35F"?ratio="0"mx:GradientEntry?color="#497B54"?ratio="1"mx:GradientEntry?color="#A1AECF"?ratio="0"mx:GradientEntry?color="#47447A"?ratio="1"mx:GradientEntry?color="#BA9886"?ratio="0"mx:GradientEntry?color="#AE775B"?ratio="1">??
?
?除此之外，http://demo.quietlyscheming.com/variablePieCharts/SizedPieCharts.html上通过继承对ChartPie组件的相关属性进行重新定义，使得每个扇形的半径根据数据的大小进行变化。实现如下效果：
?
?
