`
harry9888
  • 浏览: 67470 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
文章分类
社区版块
存档分类
最新评论

Flex PieChart 例子的效果,点击滑出和颜色渐变

阅读更多
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="516" height="386">
    <mx:Script>
        <![CDATA[
            import mx.charts.HitData;
            private var _selectedRegion:Object;
       
            public function set selectedRegion(item:Object):void
            {
               _selectedRegion = item;

                var index:int = -1;
                for (var i:int=0; i < zhuces.length && index == -1; i++)
                {
                    if (zhuces[i].Name == item.Name)
                        index = i;
                }
                var explodeData:Array = [];
                explodeData[index] = 0.15;
                pcRegion.series[0].perWedgeExplodeRadius = explodeData;
            }
           
            private function regionChange(item:Object):void
            {
                selectedRegion = item;
            }
           
            private function getSliceLabel(item:Object, arg2:String, arg3:Number, arg4:Number):String
            {
                return item == null?"":item.Name + item.Value + "人";
            }
            ]]>
    </mx:Script>
    <mx:ArrayCollection id="zhuces">
        <mx:Object>
            <mx:Name>数据1</mx:Name>
            <mx:Value>3</mx:Value>
        </mx:Object>
        <mx:Object>
            <mx:Name>数据2</mx:Name>
            <mx:Value>9</mx:Value>
        </mx:Object>
        <mx:Object>
            <mx:Name>数据3</mx:Name>
            <mx:Value>2</mx:Value>
        </mx:Object>
        <mx:Object>
            <mx:Name>数据4</mx:Name>
            <mx:Value>2</mx:Value>
        </mx:Object>
        <mx:Object>
            <mx:Name>数据5</mx:Name>
            <mx:Value>2</mx:Value>
        </mx:Object>
        <mx:Object>
            <mx:Name>数据6</mx:Name>
            <mx:Value>2</mx:Value>
        </mx:Object>
    </mx:ArrayCollection>
   
     <mx:SeriesInterpolate id="interpolate" elementOffset="10"/>
    
    <mx:PieChart id="pcRegion"
        dataProvider="{zhuces}" 
        itemClick="regionChange(event.hitData.item)"
        showDataTips="true" width="496" height="366"
        x="10" y="10" alpha="0.63" themeColor="#ff8000"
         showEffect="Fide" hideEffect="Fide" moveEffect="Glow"
         focusInEffect="Glow"
         fontFamily="simsun" fontSize="12"
         >
       
        <mx:series>
            <mx:Array>
                <mx:PieSeries field="Value" nameField="Name" labelPosition="callout"
                  labelFunction="getSliceLabel" showDataEffect="{interpolate}">
                  <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:Label text="PieChart Demo" fontWeight="bold" right="10" bottom="10"/>
    <mx:Legend x="10" y="10" dataProvider="{pcRegion}"/>
</mx:Application>
分享到:
评论
1 楼 sekiyika 2009-11-15  
NB,参考下啦,谢

相关推荐

    Flex 饼形图 piechart 柱形图 columnchart 条形图 barchart 折线图 linechart

    Flex是Adobe公司开发的一种用于构建富互联网应用(RIA)的开放源代码框架,它基于ActionScript和MXML,主要用于创建交互式的、具有丰富视觉效果的Web应用程序。在Flex中,饼形图(piechart)、柱形图(columnchart)...

    Android-基于MPAndroidChart饼图添加指示线标签颜色让指示线颜色标签颜色和饼图区块颜色一致.

    在这个特定的问题中,我们的目标是为MPAndroidChart的饼图添加指示线(也称为指针)和相应的标签,并确保指示线的颜色和标签颜色与对应的饼图区块颜色保持一致。下面我们将详细探讨如何实现这一功能。 首先,我们...

    pieChart 3d示例 flax

    ActionScript是一种面向对象的编程语言,常用于Adobe Flash和Flex开发。`flax`提供了一套灵活且可扩展的API,允许开发者轻松地构建交互式图表和动画。通过`flax`,你可以自定义颜色、标签、图例、动画效果等,以满足...

    PieChart:教程“ Android中的统计图”,使用MPAndroidChart库实现PieChart

    此外,`PieChart`提供了丰富的动画效果,你可以通过`animateX()`或`animateY()`方法来启用: ```java pieChart.animateX(1000); // 动画持续1秒 ``` 在PieChart-master文件中,你可能找到一个完整的示例项目,它...

    wpf piechart componentart

    ComponentArt的PieChart控件提供了高级定制选项,如自定义颜色、动画效果、数据标签等,以实现更美观和交互性的用户体验。 **ComponentArt Library**: ComponentArt库是一系列精心设计的.NET UI控件集合,适用于...

    C#饼状图PieChart

    在.NET框架中,C#提供了一种强大的图表控件,用于可视化数据,其中包括饼状图(PieChart)。饼状图是一种常用来展示部分与整体之间关系的图表,它将数据分成若干个扇区,每个扇区代表数据的一部分。在这个例子中,...

    grafana-piechart-panel-5f249d5.zip

    5. **交互式选项**:Piechart Panel支持交互式模式,点击扇区可以弹出详细信息,如数值、百分比等。 6. **可视化样式**:饼图的外观可以进行定制,例如调整切片厚度、设置内环(Donut)模式、添加图例等,以满足...

    PieChart.zip

    在Android开发中,饼图...`PieChart.zip`中的示例项目可能包含了更复杂的定制和交互逻辑,你可以下载并运行它来学习更多细节。在实际开发中,根据需求调整颜色、动画、标签等属性,以创建出符合项目风格的饼图。

    C# PieChart饼图开发代码

    C# PieChart饼图开发代码,先在窗体中添加panel,在添加PieChart,就可以编写出好看的饼图。

    flex Chart

    2. **Chart类型**:除了柱状图,Flex Chart还包括线性图(LineChart)、饼图(PieChart)、面积图(AreaChart)等多种图表类型,每种都有其特定的用途和展示效果。 3. **图表系列(Series)**:每个图表由一个或多个...

    flex 经典教程下载

    Flex 还支持各种图表组件,如PieChart、LineChart和ColumnChart,可用于数据可视化。 **总结** 熟练掌握Flex开发,你需要了解和应用以下技能: 1. 熟练使用Design和Source视图。 2. 掌握MXML和ActionScript的语法,...

    flex 饼图的demo

    Flex是一种基于ActionScript和...通过深入学习和实践,可以进一步定制饼图的样式,如颜色、动画效果等,以满足更复杂的数据可视化需求。在实际项目中,饼图常常用于展示各部分占比,帮助用户直观理解数据分布情况。

    Android自定义带动画的饼图PieChart

    在Android开发中,饼图(PieChart)是一种常见的数据可视化工具,它能够直观地展示各个部分占整体的比例。本项目是关于如何在Android应用中自定义一个带有动画效果的饼图组件。以下将详细介绍实现这一功能所需的关键...

    FLEX画图之各种柱状图饼状图画法

    4. 可以通过调整`&lt;mx:Slice&gt;`的样式属性来改变每个部分的颜色和效果,例如`fill`, `stroke`, `highlightStroke`等。 5. 如果需要创建环形图(也称为甜甜圈图),可以使用`sliceRadius`属性来指定内径,从而创建出...

    flex 3D饼图

    flex的一个3D饼图,点击扇区可变大,pieChart信息显示为内显示。这个一个pieChart组件

    matlab开发-标签库piechart3d

    在MATLAB中,开发一个标签库piechart3d涉及到对数据可视化高级特性的掌握,特别是三维图表的构建。...通过深入学习和实践,开发者可以更好地掌握MATLAB的图形系统,并创建出更具吸引力的可视化作品。

    flex圆形图表展示源码

    5. **交互功能**:添加鼠标悬停、点击等事件监听器,实现数据的高亮显示、详细信息弹出等交互效果。 6. **动画效果**:通过设置动画属性,可以为图表添加平滑的过渡效果,增强用户体验。 7. **数据转换**:如果...

    flex4.5简单制作的柱图堆叠图饼图线图

    这个标题提到的是利用 Flex 4.5 制作的一些基本图表组件,包括柱状图、堆叠图、饼图和线图,并且这些图表还具有渐变效果,这在数据可视化中是非常常见的图表类型,能够有效地展示和解释数据。 1. **柱状图**:柱状...

    Flex常见效果

    以上介绍了Flex中的一些常用效果和图表组件,开发者可以根据实际项目的需求灵活选择和使用这些功能,从而打造出既美观又实用的应用程序。需要注意的是,在使用这些效果时应考虑性能因素,避免过度使用导致应用运行...

Global site tag (gtag.js) - Google Analytics