Flex多样化饼图样式(颜色渐变,点击分离,环形)
来源:互联网 发布:网络信息安全事件 编辑:程序博客网 时间:2024/05/16 17:32
Flex多样化饼图样式(颜色渐变,点击分离,环形)
创建一个简单的环形饼图,通过PieChart的innerRadius属性进行设置实现环形效果:
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
- <mx:Script>
- <![CDATA[
- import mx.collections.ArrayCollection;
- import mx.charts.HitData;
- [Bindable]
- public var chengjiPie:ArrayCollection = new ArrayCollection( [
- { classs: "60分以下", num: 5 },
- { classs: "60~70分", num: 4 },
- { classs: "70~80分", num:5},
- { classs: "80~90分", num: 4},
- { classs: "90分以上", num: 3}]);
- private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String {
- var temp:String= (" " + percentValue).substr(0,6);
- return data.classs + ": " + '\n' + temp + "%";
- }
- ]]>
- </mx:Script>
- <mx:SolidColor id="sc1" color="0xE46899" alpha=".6"/>
- <mx:SolidColor id="sc2" color="0xAAD71A" alpha=".6"/>
- <mx:SolidColor id="sc3" color="0xFFE30E" alpha=".6"/>
- <mx:SolidColor id="sc4" color="0xFDB500" alpha=".6"/>
- <mx:SolidColor id="sc5" color="0x4CD0EF" alpha=".6"/>
- <mx:Stroke id="callouts" weight="2" color="0x999999" alpha=".8" caps="square"/>
- <mx:Stroke id="radial" weight="1" color="0xFFFFCC" alpha=".3"/>
- <mx:Stroke id="pieborder" color="0x000000" weight="2" alpha=".5"/>
- <mx:Panel height="100%" width="100%" layout="absolute" fontSize="12">
- <mx:PieChart id="chart" showDataTips="true" width="100%" height="100%"
- dataProvider="{chengjiPie}" innerRadius=".3" horizontalCenter="0" verticalCenter="0">
- <mx:series>
- <mx:Array>
- <mx:PieSeries nameField="classs" labelPosition="callout" field="num"
- labelFunction="displayGold" >
- </mx:PieSeries>
- </mx:Array>
- </mx:series>
- </mx:PieChart>
- <mx:Legend dataProvider="{chart}" right="0" bottom="0"/>
- </mx:Panel>
- </mx:Application>
在这个简单饼图的基础上进行一些改动:
1 添加饼图上颜色块的渐变效果,用到RadialGradient标签.
2 实现鼠标点击,该块分离的效果,对PieSeries进行相关属性设置,explodeRadius:分离程度。PerWedgeExplodeRadius:数组规定出每一块的分离值。
3 添加动态效果,点击时的弹动变化。showDataEffect标签处添加Elastic.easeOut震动效果。
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
- <mx:Script>
- <![CDATA[
- import mx.collections.ArrayCollection;
- import mx.charts.HitData;
- import mx.effects.easing.*;
- [Bindable]
- public var chengjiPie:ArrayCollection = new ArrayCollection( [
- { classs: "60分以下", num: 5 },
- { classs: "60~70分", num: 4 },
- { classs: "70~80分", num:5},
- { classs: "80~90分", num: 4},
- { classs: "90分以上", num: 3}]);
- private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String {
- var temp:String= (" " + percentValue).substr(0,6);
- return data.classs + ": " + '\n' + temp + "%";
- }
- private var _selectedRegion:Object;
- public function get selectedRegion():Object
- {
- return _selectedRegion;
- }
- public function set selectedRegion(item:Object):void
- {
- _selectedRegion = item;
- var index:int = -1;
- for (var i:int=0; i < chengjiPie.length && index == -1; i++)
- {
- if (chengjiPie[i].classs == item.classs)
- index = i;
- }
- var explodeData:Array = [];
- explodeData[index] = 0.15;
- chart.series[0].perWedgeExplodeRadius = explodeData;
- }
- private function regionChange(item:Object):void
- {
- selectedRegion = item;
- dispatchEvent(new Event("regionChange"));
- }
- private function formatDataTip(hitData:HitData):String
- {
- var classs:String = hitData.item.classs;
- var num:Number = hitData.item.num;
- return classs;
- }
- ]]>
- </mx:Script>
- <mx:SolidColor id="sc1" color="0xE46899" alpha=".6"/>
- <mx:SolidColor id="sc2" color="0xAAD71A" alpha=".6"/>
- <mx:SolidColor id="sc3" color="0xFFE30E" alpha=".6"/>
- <mx:SolidColor id="sc4" color="0xFDB500" alpha=".6"/>
- <mx:SolidColor id="sc5" color="0x4CD0EF" alpha=".6"/>
- <mx:Stroke id="callouts" weight="2" color="0x999999" alpha=".8" caps="square"/>
- <mx:Stroke id="radial" weight="1" color="0xFFFFCC" alpha=".3"/>
- <mx:Stroke id="pieborder" color="0x000000" weight="2" alpha=".5"/>
- <mx:Panel height="100%" width="100%" layout="absolute" fontSize="12">
- <mx:PieChart id="chart" showDataTips="true" width="100%" height="100%"
- itemClick="regionChange(event.hitData.item)" dataProvider="{chengjiPie}" horizontalCenter="0" verticalCenter="0">
- <mx:series>
- <mx:Array>
- <mx:PieSeries nameField="classs" labelPosition="callout" field="num"
- labelFunction="displayGold" >
- <mx:showDataEffect>
- <mx:SeriesInterpolate duration="1500" easingFunction="{Elastic.easeOut}" />
- </mx:showDataEffect>
- <mx:fills>
- <mx:Array>
- <mx:RadialGradient>
- <mx:entries>
- <mx:Array>
- <mx:GradientEntry color="#EF7651" ratio="0"/>
- <mx:GradientEntry color="#994C34" ratio="1"/>
- </mx:Array>
- </mx:entries>
- </mx:RadialGradient>
- <mx:RadialGradient>
- <mx:entries>
- <mx:Array>
- <mx:GradientEntry color="#E9C836" ratio="0"/>
- <mx:GradientEntry color="#AA9127" ratio="1"/>
- </mx:Array>
- </mx:entries>
- </mx:RadialGradient>
- <mx:RadialGradient>
- <mx:entries>
- <mx:Array>
- <mx:GradientEntry color="#6FB35F" ratio="0"/>
- <mx:GradientEntry color="#497B54" ratio="1"/>
- </mx:Array>
- </mx:entries>
- </mx:RadialGradient>
- <mx:RadialGradient>
- <mx:entries>
- <mx:Array>
- <mx:GradientEntry color="#A1AECF" ratio="0"/>
- <mx:GradientEntry color="#47447A" ratio="1"/>
- </mx:Array>
- </mx:entries>
- </mx:RadialGradient>
- <mx:RadialGradient>
- <mx:entries>
- <mx:Array>
- <mx:GradientEntry color="#BA9886" ratio="0"/>
- <mx:GradientEntry color="#AE775B" ratio="1"/>
- </mx:Array>
- </mx:entries>
- </mx:RadialGradient>
- </mx:Array>
- </mx:fills>
- </mx:PieSeries>
- </mx:Array>
- </mx:series>
- </mx:PieChart>
- <mx:Legend dataProvider="{chart}" right="0" bottom="0"/>
- </mx:Panel>
- </mx:Application>
除此之外,http://demo.quietlyscheming.com/variablePieCharts/SizedPieCharts.html上通过继承对ChartPie组件的相关属性进行重新定义,使得每个扇形的半径根据数据的大小进行变化。实现如下效果:
0 0
- Flex多样化饼图样式(颜色渐变,点击分离,环形)
- Flex多样化饼图样式(颜色渐变,点击分离,环形)
- Android环形颜色渐变进度条
- Flex学习笔记(九) 颜色渐变
- Silverlight Chart(五) ----饼图样式
- Flex中(DataGrid--DataGridColumn)数据颜色多样化-类型替换
- Flex应用程序背景颜色渐变
- 用 Silverlight 饼图样式
- Android如何使用XML创建一个环形渐变颜色图片
- Flex生成颜色渐变值算法
- 如图样式,鼠标经过或者点击显示以下样式
- 多样化条目RecyclerView,以及多样化动画点击效果(附源码)
- 多样化条目RecyclerView,以及多样化动画点击效果(附源码)
- Flex设置DataGrid单元格颜色以及表头背景颜色渐变
- flex根据两个颜色返回任意多个渐变颜色
- TextView样式多样化(字体的大小和颜色)
- ios 实现颜色渐变(渐变色)
- label字体颜色多样化显示
- 文件打开(保存)对话框:GetOpenFileName和 GetSaveFileName
- mysql复制原理及作用分析(2014-11-11)
- 第11周项目2-2:求四个数的最大公约数
- 【iOS开发-72】设置状态栏的两种方式、程序生命周期以及更好地理解几大类(对象)之间的关系
- Oracle数据库中重复数据删除方法:部分去重+完全去重
- Flex多样化饼图样式(颜色渐变,点击分离,环形)
- POJ 2653 Pick-up sticks 判断线段相交
- DllMain()限入死锁问题分析 (一)
- Map可以使用的坐标系
- 放置键盘记录,密码输入框的设计
- Objective-C Runtime 运行时之四:Method Swizzling
- 第十一周 项目6:(5)多文件组织程序
- Java关键字介绍之this与super
- 如何成为优秀的程序员