Flex 饼图PieChart

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   [Bindable]
   private var db:ArrayCollection = new ArrayCollection ([
    {country:"美国",gold:35,sliver:20,bronze:10},
    {country:"中国",gold:60,sliver:25,bronze:10},
    {country:"日本",gold:2,sliver:10,bronze:8}
   ]);
   
   private function showMoreInfo(data:Object, field:String, index:Number, percentValue:Number):String{
    //data表示传进来的整个对象，你可以访问他的各种属性了.field表示目前你用了哪个属性（这里是gold）.
    //index是顺序（也就是美国0，中国1,日本2）,percentValue是百分比(他的返回值很长，比如36.0815241424);
    var percent:String = percentValue.toString().substr(0,6);
    return data.country + "\n 金牌总数：" + data.gold + "\n 银牌总数：" + data.sliver + "\n 百分比：" + percent + "%";
   }
   
  ]]>
 </mx:Script>
 
 <mx:PieChart id="pie" dataProvider="{db}" width="100%" height="100%" showDataTips="true">
  <mx:series>
   <mx:PieSeries field="gold" labelPosition="callout" nameField="country" labelFunction="showMoreInfo">
    <!-- 清除掉投影-->
    <mx:filters><mx:Array/></mx:filters>
    
    <!-- 内部分割线条 -->
    <mx:radialStroke>
     <mx:Stroke weight="1" color="#ffffff" alpha="0.3" />
    </mx:radialStroke>
    
    <!-- 圆周边 边线 -->
    <mx:stroke>
     <mx:Stroke weight="2" color="#000000" alpha="0.5" />
    </mx:stroke>
    
    <!-- 提示信息的线 -->
    <mx:calloutStroke>
     <mx:Stroke weight="1" color="#000000" alpha="0.5" />
    </mx:calloutStroke>
   </mx:PieSeries>
  </mx:series>
  
 </mx:PieChart>
 <!-- 图例说明 -->
 <mx:Legend dataProvider="{pie}" />
</mx:Application>

 

 

 

<?xml version="1.0" encoding="utf-8"?>  
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    
               xmlns:s="library://ns.adobe.com/flex/spark"   
               xmlns:mx="library://ns.adobe.com/flex/mx">  
    <s:layout>  
        <s:BasicLayout/>  
    </s:layout>  
      
    <fx:Script>  
        <![CDATA[ 
            import mx.collections.ArrayCollection; 
             
            import spark.events.IndexChangeEvent; 
             
            [Bindable]private var medalsAC:ArrayCollection = new ArrayCollection( [      
                { Country: "中国", Gold: 32, Silver:17, Bronze: 14 }, 
                { Country: "美国", Gold: 35, Silver:38, Bronze: 29 }, 
                { Country: "俄罗斯", Gold: 27, Silver:27, Bronze: 38 } ]); 
            [Bindable]private var brandAC:ArrayCollection = new ArrayCollection( 
                [{lable:"金牌",value:"Gold"},{lable:"银牌",value:"Silver"},{lable:"铜牌",value:"Bronze"}] 
            ); 
             
             
            /**指定用于呈示 PieSeries 的每个标签的回调函数*/ 
            private function display(data:Object, field:String, index:Number, percentValue:Number):String { 
                //所占比列 
                var temp:String= (" " + percentValue).substr(0,6); 
                return data.Country + ": " + '\n' + cboCountryData.textInput.text+"数量: " + data[pieSeries.field] + '\n所占比例：' + temp + "%"; 
            } 
             
            /** 
             *更新所有国家的奖牌显示信息  
             */ 
            protected function update(event:MouseEvent):void 
            { 
                var countryName:String = cboCountry.selectedItem.Country; 
                for(var i:int = 0;i<medalsAC.length;i++){ 
                    var country:Object = medalsAC.getItemAt(i); 
                    if(country.Country == countryName){ 
                        country.Gold = txtGold.text; 
                        country.Silver = txtSilver.text; 
                        country.Bronze = txtBronze.text; 
                        chart.dataProvider = medalsAC; 
                        break; 
                    } 
                }    
                 
            } 
             
            /**加载指定国家的数据信息*/ 
            protected function cboCountry_changeHandler(event:IndexChangeEvent):void 
            { 
                var countryName:String = cboCountry.selectedItem.Country; 
                for(var i:int = 0;i<medalsAC.length;i++){ 
                    var country:Object = medalsAC.getItemAt(i); 
                    if(country.Country == countryName){ 
                        txtGold.text = country.Gold ; 
                        txtSilver.text = country.Silver; 
                        txtBronze.text = country.Bronze; 
                        break; 
                    } 
                }    
                 
            } 
             
             
            /**对用户选择的国家进行饼图的更新*/ 
            protected function cboCountryData_changeHandler(event:IndexChangeEvent):void 
            { 
                //修改绑定的字段 
                pieSeries.field = cboCountryData.selectedItem.value; 
                //重新刷新数据源 
                chart.dataProvider = medalsAC; 
                trace("ok"); 
            } 
 
        ]]>  
    </fx:Script>  
      
    <s:Panel title="饼图" width="513" height="345"  
             color="0x000000"   
             borderAlpha="0.15">  
          
        <s:layout>  
            <s:HorizontalLayout horizontalAlign="center"   
                                paddingLeft="10" paddingRight="10"   
                                paddingTop="10" paddingBottom="10"/>  
        </s:layout>  
          
        <mx:PieChart id="chart" height="100%" width="100%" paddingRight="5" paddingLeft="5" color="0x323232"  
                     showDataTips="true" dataProvider="{medalsAC}" >  
              
            <mx:series>  
                <mx:PieSeries id="pieSeries" labelPosition="callout" field="Gold" labelFunction="display">  
                    <mx:calloutStroke>  
                        <s:SolidColorStroke weight="0" color="0x888888" alpha="1.0"/>  
                    </mx:calloutStroke>  
                    <mx:radialStroke>  
                        <s:SolidColorStroke weight="0" color="#FFFFFF" alpha="0.20"/>  
                    </mx:radialStroke>  
                    <mx:stroke>  
                        <s:SolidColorStroke color="0" alpha="0.20" weight="2"/>  
                    </mx:stroke>  
                </mx:PieSeries>  
            </mx:series>  
        </mx:PieChart>  
          
    </s:Panel>  
    <s:Label x="10" y="370" text="修改3个国家的奖牌数量："/>  
    <s:Label x="13" y="398" text="选择国家："/>  
    <s:ComboBox x="81" y="394" id="cboCountry"   
                dataProvider="{medalsAC}" labelField="Country"  
                selectedIndex="0" change="cboCountry_changeHandler(event)"  
                />  
    <s:Label x="37" y="421" text="金牌：" id="lblGold" />  
    <s:TextInput x="82" y="422" id="txtGold" restrict="[0-9]"/>  
    <s:Label x="37" y="451" text="铜牌：" id="lblSilver"/>  
    <s:TextInput x="82" y="452" id="txtSilver" restrict="[0-9]"/>  
    <s:Label x="37" y="481" text="银牌：" id="lblBronze"/>  
    <s:TextInput x="82" y="482" id="txtBronze" restrict="[0-9]"/>  
    <s:Button x="135" y="507" label="更新" width="92" id="btnUpdate" click="update(event)"/>  
    <s:Label x="264" y="397" text="选择显示牌种："/>  
    <s:ComboBox x="361" y="393" id="cboCountryData"  
                change="cboCountryData_changeHandler(event)" labelField="lable"  
                selectedIndex="0"  
                dataProvider="{brandAC}"  
                />  
</s:Application>