`

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

    博客分类：
  • flex
flex饼图 
阅读更多

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

  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组件的相关属性进行重新定义，使得每个扇形的半径根据数据的大小进行变化。实现如下效果：

 

 

 

 

分享到：
| Flex中使用filter过滤数据
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics