解读Flex多样化饼图样式

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

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

Flex多样化饼图样式

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

Xml代码
 

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

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

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

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

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

【编辑推荐】

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

 

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

2024-06-06 17:32:41

2013-02-22 11:39:27

BGP控制方式路由流向

2016-08-12 09:24:33

开源多样化亮点

2015-10-09 11:27:36

综合布线布线技术

2017-05-16 15:00:25

存储云端解决方案

2021-02-05 23:18:55

云计算IT技术

2015-03-23 16:42:06

2017-11-09 13:41:30

2011-06-22 09:54:13

网络技术虚拟化网络OpenFlow

2013-01-23 09:33:29

交换机设备故障

2013-05-15 10:49:36

华为全景智真视讯终端

2011-06-28 13:11:10

2010-11-09 10:37:21

2012-04-13 16:29:20

明基投影仪

2015-01-07 09:42:55

5G25G以太网

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++语言
点赞
收藏

51CTO技术栈公众号