`

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 3D饼图

    总的来说,Flex的3D饼图和3D柱状图是强大的数据可视化工具,通过学习和实践,开发者可以创建出吸引人的、富有洞察力的图形,帮助用户更好地理解和解读数据。压缩包中的"amcharts学习"资源可能包含了一些实用的教程和...

    flex 饼图的demo

    Flex是一种基于ActionScript和...通过深入学习和实践,可以进一步定制饼图的样式,如颜色、动画效果等,以满足更复杂的数据可视化需求。在实际项目中,饼图常常用于展示各部分占比,帮助用户直观理解数据分布情况。

    flex 线图到饼图的联动

    在本文中,我们将深入探讨如何实现Flex中的线图与饼图联动效果,这对于数据可视化以及交互式数据分析至关重要。Flex是一款强大的ActionScript编程框架,用于构建富互联网应用程序(RIA)。线图和饼图是数据可视化中...

    flex 统计,柱状图,饼图。

    在本案例中,"flex 统计,柱状图,饼图"指的是使用Flex来创建数据可视化工具,具体是柱状图和饼图这两种常见的图表类型。 柱状图是一种统计图表,用于比较类别之间的数量差异。在Flex中,可以使用mx.charts系列类来...

    Android-基于MPAndroidChart饼图添加指示线标签颜色让指示线颜色标签颜色和饼图区块颜色一致.

    在这个特定的问题中,我们的目标是为MPAndroidChart的饼图添加指示线(也称为指针)和相应的标签,并确保指示线的颜色和标签颜色与对应的饼图区块颜色保持一致。下面我们将详细探讨如何实现这一功能。 首先,我们...

    arcgis for flex中嵌入饼图

    资源为arcgis嵌入flex默认饼图,也可以修改成amchart和FusionCharts,都已经试过了,都可以修改!刚研究出来分享一下!

    flex 3D pie 饼图效果

    Flex代码实现的 3D饼图效果;本示例是我按自己的思路实现的饼状3D图,并没有完成所有的Chart功能,因为涉及到的零碎内容较多,例如tip文本等等, 所以,这个示例仅仅只是做为 实现3D饼状图形的一个代码参考。 本示例...

    Echarts饼图4.0(3D环形图、包含透明效果)

    Echarts饼图4.0(3D环形图、包含透明效果)

    flex 饼图3d显示效果图

    flex 饼图3d,渐变,立体显示凸凹的效果,适合效果非常美观!

    自定义双层嵌套饼图实现

    9. 样式调整:根据需求定制饼图的颜色、字体、边框等样式,使其符合整体设计风格。 在实际开发过程中,可以参考`LineChartTest2`这个文件进行学习和调试。它可能包含了实现类似效果的示例代码,通过对代码的阅读和...

    Flex饼图向上吐槽

    Flex饼图向上吐槽是一个关于Adobe Flex中饼图组件的专题,这个组件被设计用来以图形化的方式展示数据,尤其适用于显示部分与整体的关系。在Flex中,饼图是一种常见的图表类型,它将数据集中的各个数据项以扇形区域...

    flex统计图 柱状 饼图折线

    在本讨论中,我们将深入探讨如何使用Flex构建柱状图、饼图和折线图,这些都是数据可视化中常见的图表类型,对于数据分析和展示至关重要。 1. **柱状图(Bar Chart)**: 柱状图是用长条的高度或长度来表示数值大小...

    渐变色Highcharts

    Highcharts是一款强大的JavaScript图表库,它允许开发者创建各种类型的图表,如折线图、柱状图、饼图等,并提供高度自定义的样式设置。 在描述中,“带例子”意味着包含的压缩包文件可能有具体的代码示例,展示如何...

    flex4.5简单制作的柱图堆叠图饼图线图

    这个标题提到的是利用 Flex 4.5 制作的一些基本图表组件,包括柱状图、堆叠图、饼图和线图,并且这些图表还具有渐变效果,这在数据可视化中是非常常见的图表类型,能够有效地展示和解释数据。 1. **柱状图**:柱状...

    flex饼图源码

    这个测试用例可能涉及初始化饼图组件、设置数据源、以及配置饼图的各种属性,如颜色、标签样式、数据效果等。 为了进一步丰富饼图,你可以考虑以下特性: 1. **颜色方案**:使用`colorField`属性指定数据源中的字段...

    Flex as3绘制的3D饼图

    Flex as3绘制的3D饼图,完全手动绘制,很多样式没有提供接口,需要在组件内源码中修改,存在的缺陷是饼图的标签位置计算的不合理,如果有人愿意帮忙修改,非常感激,希望能将3D饼图做到完美,更希望高手帮忙改改!

    三部分分离型饼图PPT模板.pptx

    【三部分分离型饼图PPT模板】是一种用于数据可视化和信息传递的高效工具,尤其适用于展示三个主要组成部分之间的比例关系。在商业报告、数据分析、市场调研等领域中,这种饼图设计能清晰地呈现各部分所占总体的...

    环形占比数据分析PPT饼图.rar

    环形占比数据分析PPT饼图是一种视觉化工具,常用于展示各部分在整体中的比例关系。在商业报告、学术研究或任何需要清晰呈现数据分布的场合,饼图都是一个非常有效的选择。本压缩包文件“环形占比数据分析PPT饼图.rar...

Global site tag (gtag.js) - Google Analytics