参考原文

 

 

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}"/>