<?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>
相关推荐
本文将详细探讨"Flex多样化饼图样式(颜色渐变,点击分离,环形)"这一主题,这涉及到Adobe Flex,一个开源的、基于ActionScript的框架,用于构建富互联网应用程序(RIA)。 Flex允许开发者创建动态、交互式的用户...
3. 用户交互:添加鼠标悬停、点击事件,可以提供更多的信息和操作,提升用户体验。 4. 设计美学:合理地运用颜色、标签和图例,确保图表既美观又易于理解。 总的来说,Flex的3D饼图和3D柱状图是强大的数据可视化...
Echarts饼图4.0(3D环形图、包含透明效果)
Flex是一种基于ActionScript和...通过深入学习和实践,可以进一步定制饼图的样式,如颜色、动画效果等,以满足更复杂的数据可视化需求。在实际项目中,饼图常常用于展示各部分占比,帮助用户直观理解数据分布情况。
该控件提供了一系列的属性和方法,如Series、Points、Labels等,可以方便地设置饼图的样式、颜色、标签等内容。 接下来,我们转向3D饼图。3D饼图增加了视觉深度,使图形更具立体感,从而可能更好地突出数据的差异。...
在本讨论中,我们将深入探讨如何使用Flex构建柱状图、饼图和折线图,这些都是数据可视化中常见的图表类型,对于数据分析和展示至关重要。 1. **柱状图(Bar Chart)**: 柱状图是用长条的高度或长度来表示数值大小...
Flex as3绘制的3D饼图,完全手动绘制,很多样式没有提供接口,需要在组件内源码中修改,存在的缺陷是饼图的标签位置计算的不合理,如果有人愿意帮忙修改,非常感激,希望能将3D饼图做到完美,更希望高手帮忙改改!
在本案例中,"flex 统计,柱状图,饼图"指的是使用Flex来创建数据可视化工具,具体是柱状图和饼图这两种常见的图表类型。 柱状图是一种统计图表,用于比较类别之间的数量差异。在Flex中,可以使用mx.charts系列类来...
在本例中,我们关注的是Flex在数据可视化方面的应用,特别是3D饼图和3D柱状图。 3D饼图是数据可视化中的经典图表类型,用于展示各部分占整体的比例关系。在Flex中实现3D饼图,通常会用到MX图表组件库中的PieSeries...
在这个特定的问题中,我们的目标是为MPAndroidChart的饼图添加指示线(也称为指针)和相应的标签,并确保指示线的颜色和标签颜色与对应的饼图区块颜色保持一致。下面我们将详细探讨如何实现这一功能。 首先,我们...
**ECharts实现3D环状饼图带引导线效果** ECharts是一款由百度开发的开源JavaScript图表库,它提供丰富的可视化图表类型,适用于...根据实际需求,你可以进一步定制颜色、动画、交互等特性,以达到更佳的可视化效果。
flex 饼图3d,渐变,立体显示凸凹的效果,适合效果非常美观!
ECharts 是一个基于 JavaScript 的数据可视化库,由百度开发并维护。它提供了丰富的图表类型,包括柱状图、折线图、饼图等,并且支持交互功能和多种自定义选项,使得开发者能够创建出美观且功能强大的数据展示效果。...
在IT领域,可视化数据是传达复杂信息的有效方式,饼图作为一种直观的数据表示工具,被广泛应用于各种场景。本文将深入探讨如何实现一个自定义的双层嵌套饼图,其中包括内层饼图、外层饼图的展示,以及动态动画和放大...
Highcharts是一款强大的JavaScript图表库,它允许开发者创建各种类型的图表,如折线图、柱状图、饼图等,并提供高度自定义的样式设置。 在描述中,“带例子”意味着包含的压缩包文件可能有具体的代码示例,展示如何...
CSS用于样式化页面,确保饼图在不同设备上显示良好。JavaScript部分则是核心,它使用jQuery来处理用户交互,并调用Three.js或类似的库来绘制和更新3D饼图。 在描述中提到的“点击有特效”,这指的是用户可以通过...
Flex代码实现的 3D饼图效果;本示例是我按自己的思路实现的饼状3D图,并没有完成所有的Chart功能,因为涉及到的零碎内容较多,例如tip文本等等, 所以,这个示例仅仅只是做为 实现3D饼状图形的一个代码参考。 本示例...
基于Vue的3D饼图,可进行拖动旋转、缩放、自动旋转~
在IT行业中,图形用户界面(GUI)的可视化呈现能力对于数据展示和用户交互至关重要。"带阴影的3D效果饼图"是一个典型的图形组件,它能够以更直观、立体的方式展示数据分布。在这个项目中,开发者使用了QT库在VC2010...