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

最新推荐文章于 2022-03-07 08:18:08 发布
最新推荐文章于 2022-03-07 08:18:08 发布
阅读量108 收藏
点赞数
分类专栏： Flex 文章标签： Flex Adobe XML

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

 
 

iteye_2520
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
qpieslice 渐变效果_flex之Pie Chart多样化饼图样式（颜色渐变，点击分离，环形）...
weixin_29196613的博客
01-13 268
1.添加饼图上颜色块的渐变效果，用到RadialGradient标签.2.实现鼠标点击，该块分离的效果，对PieSeries进行相关属性设置，explodeRadius:分离程度。PerWedgeExplodeRadius:数组规定出每一块的分离值。3.添加动态效果，点击时的弹动变化。showDataEffect标签处添加Elastic.easeOut震动效果。encoding="utf-8"?&...
Echarts圆角环形图
weixin_44713446的博客
06-10 8632
结果图例 ![环形图](https://img-blog.csdnimg.cn/20200610181442713.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcxMzQ0Ng==,size_16,color_FFFFFF,t_70) <template> <!-- 环形图组件 --> &
Flex3多样化饼图样式（颜色渐变，点击分离，环形）（转）
zz87250976的专栏
05-27 191
&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"&gt; &lt;mx:Script&gt; &lt;![CDATA[ im
Flex4 饼图样式（颜色渐变，点击分离，环形）
weixin_30614109的博客
11-17 53
Flex4 饼图样式（颜色渐变，点击分离，环形） 参考原文http://blog.sina.com.cn/s/blog_71251e0f0100v72w.htmlFlex4 饼图样式（颜色渐变，点击分离，环形）属性： innerRadius=".3" 表示环形中心孔的大小//大饼标签显示（百分比）...
收藏的Flex网站
新新
03-10 8251
Bookmarks   3d   3dmax   3dmax打造立体金属文字倒角效果 - 闪吧教材 入门教程：3dmax打造文字挤出效果 - 闪吧教材   PaperVision3D   forum.papervision3d.org - Index pagePaperVision3D 环境配置_学职通   旋转   3dmax打造
手把手教你做出数据可视化项目（七）可视化图表数据动态获取及界面跳转
emgexgb_sef的博客
03-07 570
数据可视化前言：https://blog.csdn.net/diviner_s/article/details/115933789 Apache Echarts简介：https://blog.csdn.net/diviner_s/article/details/115934089 项目最终效果图： 此篇博客为自己学习pink老师的课后完成的项目的总结与记录，仅供交流参考。版权所有，转载请标注原作者！ 使用echarts技术做的可视图，此外其项目包含 的技术有html、css、js、jquerry、aja.
餐厅点餐系统springboot.zip
09-10
开发一个基于Spring Boot的餐厅点餐系统可以大大提高餐厅的服务效率和顾客体验。下面是一个简单的案例程序，展示了如何使用Spring Boot来构建这样一个系统。这个系统将包括用户管理、菜单管理、订单管理等基本功能。 1. 创建项目 首先，通过Spring Initializr（https://start.spring.io/）创建一个新的Spring Boot项目，并添加必要的依赖项，如Web、Thymeleaf、Spring Data JPA 和 MySQL Driver。
MATLAB_SIMULINK中的病毒传播模拟器.rar
09-10
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
Sigrity-Sigrity MCP Specification.rar
最新发布
09-10
Sigrity-Sigrity MCP Specification.rar 当引脚名称映射失败时，通过坐标映射为替代引脚映射方法添加可选的引脚坐标（相对于元件原点）。 本文档描述了信号模型连接协议（MCP）。 MCP用于在管芯（芯片）、封装和PCB之间连接电路模型和/或物理布局。 MCP允许任何MCP型号的Sigrity产品内的自动模型和结构连接。 它还允许第三方工具将Sigrity模型与MCP集成或连接。 MCP使用简单的ASCII格式，支持模型连接的多个电路和引脚，并允许将物理引脚集中在电路模型中。 MCP具有可扩展性和向后兼容性。
智能优化算法-樽海鞘优化算法（SSA）
09-10
樽海鞘优化算法 (Salp Swarm Algorithm, SSA) 虽然名称中提到的是“樽海鞘”，但实际上这个算法是基于群体智能的一种元启发式优化算法，它模拟了樽海鞘（Salps）在海洋中的游动和觅食行为，用于解决复杂的优化问题。 SSA的工作机制主要包括以下几个方面： 链式游动：模拟樽海鞘在海洋中形成链状结构进行集体游动，用于探索解空间。 觅食行为：通过模拟樽海鞘的觅食行为，促进算法的局部搜索能力。 动态调整：根据当前搜索状态动态调整搜索策略，平衡全局搜索和局部搜索。 优点包括： 强大的探索能力：SSA能够有效地探索解空间的不同区域。 灵活性：适用于多种优化问题，包括连续和离散优化。 快速收敛：通常能够在较少迭代次数内找到较好的解。 易于实现：算法设计直观，易于编程实现。
CNG油改气 150+155+2.0+调试软件
09-10
CNG油改气 150+155+2.0+调试软件
为什么消费者喜欢生成式人工智能（英）(1).pdf
09-10
为什么消费者喜欢生成式人工智能（英）(1).pdf
小红书教育行业月报（2023年7月）.pdf
09-10
小红书教育行业月报（2023年7月）
海洋捕食者优化算法MPA-TCN-LSTM-Multihead-Attention多变量时间序列预测Matlab实现.rar
09-10
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
小红书3月大健康行业月报.pdf
09-10
小红书3月大健康行业月报
016.jpg
09-10
016
3d饼图echart颜色渐变
08-02
根据提供的代码，您可以使用Echarts的渐变颜色功能来实现3D饼图的颜色渐变效果。在您的代码中，您可以在optionData数组中为每个数据项添加一个color属性，并将其设置为一个渐变颜色对象。例如，您可以使用linear-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值