Flex多样化饼图样式（颜色渐变，点击分离，环形）

转自http://xaajie.iteye.com/blog/399239

创建一个简单的环形饼图，通过PieChart的innerRadius属性进行设置实现环形效果：

Xml代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.        <mx:Script>  
4.         <![CDATA[ 
5.       import mx.collections.ArrayCollection;           
6.       import mx.charts.HitData; 
7.         [Bindable] 
8.         public var chengjiPie:ArrayCollection = new ArrayCollection( [ 
9.             { classs: "60分以下", num: 5 }, 
10.             { classs: "60~70分", num: 4 }, 
11.             { classs: "70~80分", num:5}, 
12.             { classs: "80~90分", num: 4}, 
13.             { classs: "90分以上", num: 3}]); 
14.              
15.         private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String { 
16.             var temp:String= (" " + percentValue).substr(0,6); 
17.             return data.classs + ": " +  '\n' + temp + "%"; 
18.         } 
19.          
20.         ]]>  
21.         
22.     </mx:Script>  
23.    
24.     <mx:SolidColor id="sc1" color="0xE46899" alpha=".6"/>  
25.     <mx:SolidColor id="sc2" color="0xAAD71A" alpha=".6"/>  
26.     <mx:SolidColor id="sc3" color="0xFFE30E" alpha=".6"/>  
27.     <mx:SolidColor id="sc4" color="0xFDB500" alpha=".6"/>  
28.     <mx:SolidColor id="sc5" color="0x4CD0EF" alpha=".6"/>  
29.   
30.   
31.     <mx:Stroke id="callouts" weight="2" color="0x999999" alpha=".8" caps="square"/>  
32.     <mx:Stroke id="radial" weight="1" color="0xFFFFCC" alpha=".3"/>  
33.     <mx:Stroke id="pieborder" color="0x000000" weight="2" alpha=".5"/>  
34.   
35.   
36.     <mx:Panel  height="100%" width="100%" layout="absolute" fontSize="12">  
37.         
38.       <mx:PieChart id="chart"  showDataTips="true" width="100%" height="100%"  
39.                  dataProvider="{chengjiPie}" innerRadius=".3" horizontalCenter="0" verticalCenter="0">  
40.   
41.                 <mx:series>  
42.                     <mx:Array>  
43.                         <mx:PieSeries nameField="classs" labelPosition="callout"  field="num"   
44.                                       labelFunction="displayGold" >  
45.                            
46.                         </mx:PieSeries>  
47.                     </mx:Array>  
48.                 </mx:series>  
49.   
50.             </mx:PieChart>   
51.         <mx:Legend dataProvider="{chart}" right="0" bottom="0"/>  
52.     </mx:Panel>  
53.   
54. </mx:Application>  

 

 在这个简单饼图的基础上进行一些改动：

1 添加饼图上颜色块的渐变效果，用到RadialGradient标签.

2 实现鼠标点击，该块分离的效果，对PieSeries进行相关属性设置，explodeRadius:分离程度。PerWedgeExplodeRadius:数组规定出每一块的分离值。

3 添加动态效果，点击时的弹动变化。showDataEffect标签处添加Elastic.easeOut震动效果。

 

Xml代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.        <mx:Script>  
4.         <![CDATA[ 
5.       import mx.collections.ArrayCollection;           
6.       import mx.charts.HitData; 
7.       import mx.effects.easing.*;  
8.         [Bindable] 
9.         public var chengjiPie:ArrayCollection = new ArrayCollection( [ 
10.             { classs: "60分以下", num: 5 }, 
11.             { classs: "60~70分", num: 4 }, 
12.             { classs: "70~80分", num:5}, 
13.             { classs: "80~90分", num: 4}, 
14.             { classs: "90分以上", num: 3}]); 
15.              
16.         private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String { 
17.             var temp:String= (" " + percentValue).substr(0,6); 
18.             return data.classs + ": " +  '\n' + temp + "%"; 
19.         } 
20.          
21.         private var _selectedRegion:Object; 
22.          
23.         public function get selectedRegion():Object 
24.         { 
25.             return _selectedRegion; 
26.         } 
27.          
28.         public function set selectedRegion(item:Object):void 
29.         { 
30.             _selectedRegion = item; 
31.  
32.             var index:int = -1; 
33.             for (var i:int=0; i < chengjiPie.length && index == -1; i++) 
34.             { 
35.                 if (chengjiPie[i].classs == item.classs) 
36.                     index = i; 
37.             } 
38.             
39.             var explodeData:Array = []; 
40.             explodeData[index] = 0.15; 
41.             chart.series[0].perWedgeExplodeRadius = explodeData; 
42.         } 
43.          
44.         private function regionChange(item:Object):void 
45.         { 
46.             selectedRegion = item; 
47.             dispatchEvent(new Event("regionChange")); 
48.         } 
49.  
50.        private function formatDataTip(hitData:HitData):String 
51.         { 
52.             var classs:String = hitData.item.classs; 
53.             var num:Number = hitData.item.num; 
54.             return classs; 
55.         } 
56.  
57.         ]]>  
58.         
59.     </mx:Script>  
60.    
61.     <mx:SolidColor id="sc1" color="0xE46899" alpha=".6"/>  
62.     <mx:SolidColor id="sc2" color="0xAAD71A" alpha=".6"/>  
63.     <mx:SolidColor id="sc3" color="0xFFE30E" alpha=".6"/>  
64.     <mx:SolidColor id="sc4" color="0xFDB500" alpha=".6"/>  
65.     <mx:SolidColor id="sc5" color="0x4CD0EF" alpha=".6"/>  
66.   
67.   
68.     <mx:Stroke id="callouts" weight="2" color="0x999999" alpha=".8" caps="square"/>  
69.     <mx:Stroke id="radial" weight="1" color="0xFFFFCC" alpha=".3"/>  
70.     <mx:Stroke id="pieborder" color="0x000000" weight="2" alpha=".5"/>  
71.   
72.   
73.     <mx:Panel  height="100%" width="100%" layout="absolute" fontSize="12">  
74.         
75.       <mx:PieChart id="chart"  showDataTips="true" width="100%" height="100%"  
76.                 itemClick="regionChange(event.hitData.item)"  dataProvider="{chengjiPie}"  horizontalCenter="0" verticalCenter="0">  
77.   
78.                 <mx:series>  
79.                     <mx:Array>  
80.                         <mx:PieSeries nameField="classs" labelPosition="callout"  field="num"   
81.                                       labelFunction="displayGold" >  
82.                               <mx:showDataEffect>   
83.                                <mx:SeriesInterpolate duration="1500" easingFunction="{Elastic.easeOut}" />   
84.                               </mx:showDataEffect>   
85.   
86.                          <mx:fills>  
87.                             <mx:Array>  
88.                                 <mx:RadialGradient>  
89.                                     <mx:entries>  
90.                                         <mx:Array>  
91.                                             <mx:GradientEntry color="#EF7651" ratio="0"/>  
92.                                             <mx:GradientEntry color="#994C34" ratio="1"/>  
93.                                         </mx:Array>  
94.                                     </mx:entries>  
95.                                 </mx:RadialGradient>  
96.                                 <mx:RadialGradient>  
97.                                     <mx:entries>  
98.                                         <mx:Array>  
99.                                             <mx:GradientEntry color="#E9C836" ratio="0"/>  
100.                                             <mx:GradientEntry color="#AA9127" ratio="1"/>  
101.                                         </mx:Array>  
102.                                     </mx:entries>  
103.                                 </mx:RadialGradient>  
104.                                 <mx:RadialGradient>  
105.                                     <mx:entries>  
106.                                         <mx:Array>  
107.                                             <mx:GradientEntry color="#6FB35F" ratio="0"/>  
108.                                             <mx:GradientEntry color="#497B54" ratio="1"/>  
109.                                         </mx:Array>  
110.                                     </mx:entries>  
111.                                 </mx:RadialGradient>  
112.                                 <mx:RadialGradient>  
113.                                     <mx:entries>  
114.                                         <mx:Array>  
115.                                             <mx:GradientEntry color="#A1AECF" ratio="0"/>  
116.                                             <mx:GradientEntry color="#47447A" ratio="1"/>  
117.                                         </mx:Array>  
118.                                     </mx:entries>  
119.                                 </mx:RadialGradient>  
120.                                 <mx:RadialGradient>  
121.                                     <mx:entries>  
122.                                         <mx:Array>  
123.                                             <mx:GradientEntry color="#BA9886" ratio="0"/>  
124.                                             <mx:GradientEntry color="#AE775B" ratio="1"/>  
125.                                         </mx:Array>  
126.                                     </mx:entries>  
127.                                 </mx:RadialGradient>  
128.                             </mx:Array>  
129.                         </mx:fills>  
130.                         </mx:PieSeries>  
131.                     </mx:Array>  
132.                 </mx:series>  
133.   
134.             </mx:PieChart>   
135.         <mx:Legend dataProvider="{chart}" right="0" bottom="0"/>  
136.     </mx:Panel>  
137.   
138. </mx:Application>  

 

 除此之外，http://demo.quietlyscheming.com/variablePieCharts/SizedPieCharts.html上通过继承对ChartPie组件的相关属性进行重新定义，使得每个扇形的半径根据数据的大小进行变化。实现如下效果：

 
 

• swf.rar (1.1 MB)
• 下载次数: 768