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

参考原文 http://blog.sina.com.cn/s/blog_71251e0f0100v72w.html

 

 

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

属性：  innerRadius=".3"  表示环形中心孔的大小 

 

 

 

     // 大饼标签显示（百分比）
             private  function displayGold(data: Object, field: String, index: Number, percentValue: Number): String { 
                 var temp: String= ("" + percentValue);
                temp=temp.substr(0,6);
                 //     temp=temp.substring(0,7);                 
                 return data.classs + ": " +  '\n' + temp + "%"; 
            }
             // 大饼点击事件
             private  function regionChange(item: Object):void 
            { 
                 // Alert.show(item.classs.toString());  
                 var index:int = -1; 
                 for ( var i:int=0; i <piechart1.dataProvider.length && index == -1; i++) 
                { 
                     if (piechart1.dataProvider[i].classs == item.classs) 
                        index = i; 
                } 
                
                 var explodeData:Array = []; 
                explodeData[index] = 0.1; 
                 // PerWedgeExplodeRadius:数组规定出每一块的分离值。
                piechart1.series[0].perWedgeExplodeRadius = explodeData; 
            } 

 

 

 

<mx:PieChart id="piechart1" x="246" y="28" width="427" height="315"  itemClick="regionChange(event.hitData.item)" >
        <mx:series>
            <!--    <mx:PieSeries displayName="Series 1" field=""/>-->             
            <mx:PieSeries nameField="classs" labelPosition="callout"  field="num" perWedgeExplodeRadius="0.1"   
                          labelFunction="displayGold" >  
                <mx:showDataEffect>  
                    <!--效果-->
                    <mx:SeriesInterpolate duration="1500" easingFunction="{Elastic.easeOut}" />   
                </mx:showDataEffect>
                <!-- 饼图上颜色块的渐变效果，用到RadialGradient标签 -->
                <mx:fills>    
                        <mx:RadialGradient>  
                            <mx:entries>   
                                    <mx:GradientEntry color="#EF7651" ratio="0"/>  
                                    <mx:GradientEntry color="#994C34" ratio="1"/>                                   
                            </mx:entries>  
                        </mx:RadialGradient>  
                        <mx:RadialGradient>  
                            <mx:entries>   
                                    <mx:GradientEntry color="#E9C836" ratio="0"/>  
                                    <mx:GradientEntry color="#AA9127" ratio="1"/>    
                            </mx:entries>  
                        </mx:RadialGradient>  
                        <mx:RadialGradient>  
                            <mx:entries>    
                                    <mx:GradientEntry color="#6FB35F" ratio="0"/>  
                                    <mx:GradientEntry color="#497B54" ratio="1"/>   
                            </mx:entries>  
                        </mx:RadialGradient>  
                        <mx:RadialGradient>  
                            <mx:entries>   
                                    <mx:GradientEntry color="#A1AECF" ratio="0"/>  
                                    <mx:GradientEntry color="#47447A" ratio="1"/>   
                            </mx:entries>  
                        </mx:RadialGradient>  
                        <mx:RadialGradient>  
                            <mx:entries>   
                                    <mx:GradientEntry color="#BA9886" ratio="0"/>  
                                    <mx:GradientEntry color="#AE775B" ratio="1"/>   
                            </mx:entries>  
                        </mx:RadialGradient>   
                </mx:fills>  
            </mx:PieSeries>   
        </mx:series>
        <mx:dataProvider>
            <fx: Object classs="60分以下" num="5"/>
            <fx: Object classs="60~70分" num="4"/>
            <fx: Object classs="70~80分"  num="15"/>
            <fx: Object classs="80~90分"  num="24"/>
            <fx: Object classs="90分以上"  num="10"/>  
        </mx:dataProvider>
    </mx:PieChart>
    <mx:Legend x="680" y="33" height="94" dataProvider="{piechart1}"/>