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