创建一个简单的环形饼图,通过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代码
- <?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组件的相关属性进行重新定义,使得每个扇形的半径根据数据的大小进行变化。实现如下效果:
相关推荐
总的来说,Flex的3D饼图和3D柱状图是强大的数据可视化工具,通过学习和实践,开发者可以创建出吸引人的、富有洞察力的图形,帮助用户更好地理解和解读数据。压缩包中的"amcharts学习"资源可能包含了一些实用的教程和...
Flex是一种基于ActionScript和...通过深入学习和实践,可以进一步定制饼图的样式,如颜色、动画效果等,以满足更复杂的数据可视化需求。在实际项目中,饼图常常用于展示各部分占比,帮助用户直观理解数据分布情况。
在本文中,我们将深入探讨如何实现Flex中的线图与饼图联动效果,这对于数据可视化以及交互式数据分析至关重要。Flex是一款强大的ActionScript编程框架,用于构建富互联网应用程序(RIA)。线图和饼图是数据可视化中...
在本案例中,"flex 统计,柱状图,饼图"指的是使用Flex来创建数据可视化工具,具体是柱状图和饼图这两种常见的图表类型。 柱状图是一种统计图表,用于比较类别之间的数量差异。在Flex中,可以使用mx.charts系列类来...
在这个特定的问题中,我们的目标是为MPAndroidChart的饼图添加指示线(也称为指针)和相应的标签,并确保指示线的颜色和标签颜色与对应的饼图区块颜色保持一致。下面我们将详细探讨如何实现这一功能。 首先,我们...
资源为arcgis嵌入flex默认饼图,也可以修改成amchart和FusionCharts,都已经试过了,都可以修改!刚研究出来分享一下!
Flex代码实现的 3D饼图效果;本示例是我按自己的思路实现的饼状3D图,并没有完成所有的Chart功能,因为涉及到的零碎内容较多,例如tip文本等等, 所以,这个示例仅仅只是做为 实现3D饼状图形的一个代码参考。 本示例...
Echarts饼图4.0(3D环形图、包含透明效果)
flex 饼图3d,渐变,立体显示凸凹的效果,适合效果非常美观!
9. 样式调整:根据需求定制饼图的颜色、字体、边框等样式,使其符合整体设计风格。 在实际开发过程中,可以参考`LineChartTest2`这个文件进行学习和调试。它可能包含了实现类似效果的示例代码,通过对代码的阅读和...
Flex饼图向上吐槽是一个关于Adobe Flex中饼图组件的专题,这个组件被设计用来以图形化的方式展示数据,尤其适用于显示部分与整体的关系。在Flex中,饼图是一种常见的图表类型,它将数据集中的各个数据项以扇形区域...
在本讨论中,我们将深入探讨如何使用Flex构建柱状图、饼图和折线图,这些都是数据可视化中常见的图表类型,对于数据分析和展示至关重要。 1. **柱状图(Bar Chart)**: 柱状图是用长条的高度或长度来表示数值大小...
Highcharts是一款强大的JavaScript图表库,它允许开发者创建各种类型的图表,如折线图、柱状图、饼图等,并提供高度自定义的样式设置。 在描述中,“带例子”意味着包含的压缩包文件可能有具体的代码示例,展示如何...
这个标题提到的是利用 Flex 4.5 制作的一些基本图表组件,包括柱状图、堆叠图、饼图和线图,并且这些图表还具有渐变效果,这在数据可视化中是非常常见的图表类型,能够有效地展示和解释数据。 1. **柱状图**:柱状...
这个测试用例可能涉及初始化饼图组件、设置数据源、以及配置饼图的各种属性,如颜色、标签样式、数据效果等。 为了进一步丰富饼图,你可以考虑以下特性: 1. **颜色方案**:使用`colorField`属性指定数据源中的字段...
**ECharts实现3D环状饼图带引导线效果** ECharts是一款由百度开发的开源JavaScript图表库,它提供丰富的可视化图表类型,适用于...根据实际需求,你可以进一步定制颜色、动画、交互等特性,以达到更佳的可视化效果。
Flex as3绘制的3D饼图,完全手动绘制,很多样式没有提供接口,需要在组件内源码中修改,存在的缺陷是饼图的标签位置计算的不合理,如果有人愿意帮忙修改,非常感激,希望能将3D饼图做到完美,更希望高手帮忙改改!
【三部分分离型饼图PPT模板】是一种用于数据可视化和信息传递的高效工具,尤其适用于展示三个主要组成部分之间的比例关系。在商业报告、数据分析、市场调研等领域中,这种饼图设计能清晰地呈现各部分所占总体的...