創(chuàng)建一個(gè)簡(jiǎn)單的環(huán)形餅圖，通過(guò)PieChart的innerRadius屬性進(jìn)行設(shè)置實(shí)現(xiàn)環(huán)形效果：
<?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 },
{ classs: "70~80分", num:5},
{ classs: "80~90分", num: 4},
{ 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:Script>
<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:Array>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{chart}" right="0" bottom="0"/>
</mx:Panel>
</mx:Application>
?
?在這個(gè)簡(jiǎn)單餅圖的基礎(chǔ)上進(jìn)行一些改動(dòng)：
1
添加餅圖上顏色塊的漸變效果，用到RadialGradient標(biāo)簽.
2
實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊，該塊分離的效果，對(duì)PieSeries進(jìn)行相關(guān)屬性設(shè)置，explodeRadius:分離程度。PerWedgeExplodeRadius:數(shù)組規(guī)定出每一塊的分離值。
3
添加動(dòng)態(tài)效果，點(diǎn)擊時(shí)的彈動(dòng)變化。showDataEffect標(biāo)簽處添加Elastic.easeOut震動(dòng)效果。
?
<?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;
import mx.effects.easing.*;
[Bindable]
public var chengjiPie:ArrayCollection = new ArrayCollection( [
{ classs: "60分以下", num: 5 },
{ classs: "60~70分", num: 4 },
{ classs: "70~80分", num:5},
{ classs: "80~90分", num: 4},
{ 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 + "%";
}
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;
}
]]>
</mx:Script>
<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%"
itemClick="regionChange(event.hitData.item)" dataProvider="{chengjiPie}" horizontalCenter="0" verticalCenter="0">
<mx:series>
<mx:Array>
<mx:PieSeries nameField="classs" labelPosition="callout" field="num"
labelFunction="displayGold" >
<mx:showDataEffect>
<mx:SeriesInterpolate duration="1500" easingFunction="{Elastic.easeOut}" />
</mx:showDataEffect>
<mx:fills>
<mx:Array>
<mx:RadialGradient>
<mx:entries>
<mx:Array>
<mx:GradientEntry color="#EF7651" ratio="0"/>
<mx:GradientEntry color="#994C34" ratio="1"/>
</mx:Array>
</mx:entries>
</mx:RadialGradient>
<mx:RadialGradient>
<mx:entries>
<mx:Array>
<mx:GradientEntry color="#E9C836" ratio="0"/>
<mx:GradientEntry color="#AA9127" ratio="1"/>
</mx:Array>
</mx:entries>
</mx:RadialGradient>
<mx:RadialGradient>
<mx:entries>
<mx:Array>
<mx:GradientEntry color="#6FB35F" ratio="0"/>
<mx:GradientEntry color="#497B54" ratio="1"/>
</mx:Array>
</mx:entries>
</mx:RadialGradient>
<mx:RadialGradient>
<mx:entries>
<mx:Array>
<mx:GradientEntry color="#A1AECF" ratio="0"/>
<mx:GradientEntry color="#47447A" ratio="1"/>
</mx:Array>
</mx:entries>
</mx:RadialGradient>
<mx:RadialGradient>
<mx:entries>
<mx:Array>
<mx:GradientEntry color="#BA9886" ratio="0"/>
<mx:GradientEntry color="#AE775B" ratio="1"/>
</mx:Array>
</mx:entries>
</mx:RadialGradient>
</mx:Array>
</mx:fills>
</mx:PieSeries>
</mx:Array>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{chart}" right="0" bottom="0"/>
</mx:Panel>
</mx:Application>
?
?除此之外，
http://demo.quietlyscheming.com/variablePieCharts/SizedPieCharts.html
上通過(guò)繼承對(duì)ChartPie組件的相關(guān)屬性進(jìn)行重新定義，使得每個(gè)扇形的半徑根據(jù)數(shù)據(jù)的大小進(jìn)行變化。實(shí)現(xiàn)如下效果：
?
?
Flex多樣化餅圖樣式（顏色漸變，點(diǎn)擊分離，環(huán)形）