解读Flex多样化饼图样式

开发 后端
本文向大家简单介绍一下多样化Flex饼图样式,比如说颜色渐变,点击分离和环形等,希望本文的介绍能让你有所收获。

本文和大家重点讨论一下多样化Flex饼图样式,主要包括颜色渐变,点击分离和环形等,相信通过本文的介绍你对Flex饼图的样式一定会有新的认识。

Flex多样化饼图样式

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

Xml代码
 

  1. <?xmlversionxmlversion="1.0"encoding="utf-8"?> 
  2. <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"> 
  3. <mx:Script> 
  4. <![CDATA[  
  5. importmx.collections.ArrayCollection;  
  6. importmx.charts.HitData;  
  7. [Bindable]  
  8. publicvarchengjiPie:ArrayCollection=newArrayCollection([  
  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. privatefunctiondisplayGold(data:Object,field:String,index:Number,percentValue:Number):String{  
  16. vartemp:String=(""+percentValue).substr(0,6);  
  17. returndata.classs+":"+'\n'+temp+"%";  
  18. }  
  19.  
  20. ]]> 
  21.  
  22. </mx:Script> 
  23.  
  24. <mx:SolidColoridmx:SolidColorid="sc1"color="0xE46899"alpha=".6"/> 
  25. <mx:SolidColoridmx:SolidColorid="sc2"color="0xAAD71A"alpha=".6"/> 
  26. <mx:SolidColoridmx:SolidColorid="sc3"color="0xFFE30E"alpha=".6"/> 
  27. <mx:SolidColoridmx:SolidColorid="sc4"color="0xFDB500"alpha=".6"/> 
  28. <mx:SolidColoridmx:SolidColorid="sc5"color="0x4CD0EF"alpha=".6"/> 
  29.  
  30.  
  31. <mx:Strokeidmx:Strokeid="callouts"weight="2"color="0x999999"alpha=".8"caps="square"/> 
  32. <mx:Strokeidmx:Strokeid="radial"weight="1"color="0xFFFFCC"alpha=".3"/> 
  33. <mx:Strokeidmx:Strokeid="pieborder"color="0x000000"weight="2"alpha=".5"/> 
  34.  
  35.  
  36. <mx:Panelheightmx:Panelheight="100%"width="100%"layout="absolute"fontSize="12"> 
  37.  
  38. <mx:PieChartidmx:PieChartid="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:PieSeriesnameFieldmx:PieSeriesnameField="classs"labelPosition="callout"field="num" 
  44. labelFunction="displayGold"> 
  45.  
  46. </mx:PieSeries> 
  47. </mx:Array> 
  48. </mx:series> 
  49.  
  50. </mx:PieChart> 
  51. <mx:LegenddataProvidermx:LegenddataProvider="{chart}"right="0"bottom="0"/> 
  52. </mx:Panel> 
  53.  
  54. </mx:Application> 
  55.  
  56. <?xmlversionxmlversion="1.0"encoding="utf-8"?> 
  57. <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"> 
  58. <mx:Script> 
  59. <![CDATA[  
  60. importmx.collections.ArrayCollection;  
  61. importmx.charts.HitData;  
  62. [Bindable]  
  63. publicvarchengjiPie:ArrayCollection=newArrayCollection([  
  64. {classs:"60分以下",num:5},  
  65. {classs:"60~70分",num:4},  
  66. {classs:"70~80分",num:5},  
  67. {classs:"80~90分",num:4},  
  68. {classs:"90分以上",num:3}]);  
  69.  
  70. privatefunctiondisplayGold(data:Object,field:String,index:Number,percentValue:Number):String{  
  71. vartemp:String=(""+percentValue).substr(0,6);  
  72. returndata.classs+":"+'\n'+temp+"%";  
  73. }  
  74.  
  75. ]]> 
  76.  
  77. </mx:Script> 
  78.  
  79. <mx:SolidColoridmx:SolidColorid="sc1"color="0xE46899"alpha=".6"/> 
  80. <mx:SolidColoridmx:SolidColorid="sc2"color="0xAAD71A"alpha=".6"/> 
  81. <mx:SolidColoridmx:SolidColorid="sc3"color="0xFFE30E"alpha=".6"/> 
  82. <mx:SolidColoridmx:SolidColorid="sc4"color="0xFDB500"alpha=".6"/> 
  83. <mx:SolidColoridmx:SolidColorid="sc5"color="0x4CD0EF"alpha=".6"/> 
  84.  
  85.  
  86. <mx:Strokeidmx:Strokeid="callouts"weight="2"color="0x999999"alpha=".8"caps="square"/> 
  87. <mx:Strokeidmx:Strokeid="radial"weight="1"color="0xFFFFCC"alpha=".3"/> 
  88. <mx:Strokeidmx:Strokeid="pieborder"color="0x000000"weight="2"alpha=".5"/> 
  89.  
  90.  
  91. <mx:Panelheightmx:Panelheight="100%"width="100%"layout="absolute"fontSize="12"> 
  92.  
  93. <mx:PieChartidmx:PieChartid="chart"showDataTips="true"width="100%"height="100%"  
  94. dataProvider="{chengjiPie}"innerRadius=".3"horizontalCenter="0"verticalCenter="0"> 
  95.  
  96. <mx:series> 
  97. <mx:Array> 
  98. <mx:PieSeriesnameFieldmx:PieSeriesnameField="classs"labelPosition="callout"field="num" 
  99. labelFunction="displayGold"> 
  100.  
  101.  </mx:PieSeries> 
  102. </mx:Array> 
  103. </mx:series> 
  104.  
  105. </mx:PieChart> 
  106. <mx:LegenddataProvidermx:LegenddataProvider="{chart}"right="0"bottom="0"/> 
  107. </mx:Panel> 
  108.  
  109. </mx:Application> 

◆在这个简单Flex饼图的基础上进行一些改动就可以实现多样化:

1添加Flex饼图上颜色块的渐变效果,用到RadialGradient标签.

2实现鼠标点击,该块分离的效果,对PieSeries进行相关属性设置,explodeRadius:分离程度。PerWedgeExplodeRadius:数组规定出每一块的分离值。

3添加动态效果,点击时的弹动变化。showDataEffect标签处添加Elastic.easeOut震动效果。

【编辑推荐】

  1. Flex样式的添加和卸载
  2. Flex安全沙箱问题解决方法
  3. 技术前沿 看Flex客户端缓存技术如何使用
  4. 解析Flex全屏模式设置方法
  5. Flex内存泄露解决方法和内存释放优化原则

 

责任编辑:佚名 来源: javaeye.com
相关推荐

2013-02-22 11:39:27

BGP控制方式路由流向

2021-02-05 23:18:55

云计算IT技术

2015-10-09 11:27:36

综合布线布线技术

2017-05-16 15:00:25

存储云端解决方案

2016-08-12 09:24:33

开源多样化亮点

2017-11-09 13:41:30

2013-01-23 09:33:29

交换机设备故障

2015-03-23 16:42:06

2011-06-22 09:54:13

网络技术虚拟化网络OpenFlow

2010-11-09 10:37:21

2011-06-28 13:11:10

2013-05-15 10:49:36

华为全景智真视讯终端

2015-01-07 09:42:55

5G25G以太网

2012-04-13 16:29:20

明基投影仪

2012-03-09 13:57:40

华为无线模块消费电子

2015-12-11 22:40:10

大数据OpenPOWERPOWER8

2013-10-28 13:07:03

戴尔

2017-03-28 08:47:33

图像识别技术

2010-01-22 17:21:32

C++语言

2015-12-02 14:04:01

点赞
收藏

51CTO技术栈公众号