flex 利用饼图生成内部环状图

来源:互联网 发布:p2p流媒体直播软件 编辑:程序博客网 时间:2024/05/04 13:35

<?xml version="1.0" encoding="utf-8"?>  
<mx:Application name="PieSeries_labelFunction_test" 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical" 
    verticalAlign="middle" 
    viewSourceURL="srcview/index.html" width="800" height="500">  
 
 <mx:Script>  
  <![CDATA[  
   import mx.charts.series.items.PieSeriesItem;  
   import mx.charts.HitData;  
   import mx.utils.StringUtil;  
   
   private function pieSeries_labelFunc(item:Object, field:String, index:Number, percentValue:Number):String {  
    return StringUtil.substitute("{0} ({1}%)",  
     item.@label,  
     percentValue.toFixed(1));  
   }  
  ]]>  
 </mx:Script>  
 
 <mx:XMLListCollection id="dp">  
  <mx:source>  
   <mx:XMLList>  
    <product label="Product 1" data="3" data1="2"/>  
    <product label="Product 2" data="6" data1="7"/>  
    <product label="Product 3" data="4" data1="5"/>  
    <product label="Product 4" data="1" data1="2"/>  
    <product label="Product 5" data="3" data1="1"/>  
    <product label="Product 6" data="6" data1="4"/>  
   </mx:XMLList>  
  </mx:source>  
 </mx:XMLListCollection>  
 
 <mx:Canvas styleName="opaquePanel" 
      width="700" height="420" borderColor="#600EE9" borderStyle="none">  
  <mx:PieChart id="pieChart" 
      dataProvider="{dp}" 
      showDataTips="true" 
      height="253" 
      width="346" left="0" top="0">  
   <mx:series>  
    <mx:PieSeries id="pieSeries3" 
         field="@data" 
         nameField="@label" 
         visible="false" /><!--最里面的空白饼图,图例的显示就是根据该饼图,所以必须有数据,但可以设置visible=false -->  
    <mx:PieSeries id="pieSeries1" 
         field="@data1" 
         nameField="@label" 
         labelPosition="callout" 
         labelFunction="pieSeries_labelFunc" /><!--最里面显示的饼图 -->  
    <mx:PieSeries id="pieSeries2" /><!--外面空白的饼图 -->  
    <mx:PieSeries id="pieSeries" 
         field="@data" 
         nameField="@label" 
         labelPosition="callout" /><!--最外层显示的饼图 -->  
   </mx:series>  
  </mx:PieChart>  
  <mx:Legend dataProvider="{pieChart}" 
       direction="horizontal" 
       horizontalGap="100" 
       width="98"  x="416" y="35" borderStyle="none" borderColor="#078CE9"/>  
 </mx:Canvas>  
</mx:Application>

原创粉丝点击