`
sorehead
  • 浏览: 47087 次
  • 性别: Icon_minigender_2
  • 来自: 达纳苏斯
社区版块
存档分类
最新评论

Flex中如何在点击PieChart图表数据块的时候添加有趣的旋转效果

阅读更多
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
            import mx.effects.easing.*;
            import mx.charts.series.items.PieSeriesItem;
            import mx.charts.events.ChartItemEvent;

            private function pieChart_itemClick(evt:ChartItemEvent):void {
                var item:PieSeriesItem = evt.hitData.chartItem as PieSeriesItem;
                var degrees:Number = radiansToDegrees(item.startAngle);
                var arr:Array = [];
                if (checkBox.selected) {
                    arr[item.index] = 0.2;
                }
                pieSeries.perWedgeExplodeRadius = arr;
                pieSeries.startAngle -= degrees;

                dp.refresh();
            }

            private function radiansToDegrees(radians:Number):Number {
                return radians * (180 / Math.PI);
            }
        ]]>
    </mx:Script>

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <product label="Product 1" data="3" />
                <product label="Product 2" data="1" />
                <product label="Product 3" data="4" />
                <product label="Product 4" data="1" />
                <product label="Product 5" data="5" />
                <product label="Product 6" data="9" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="Use perWedgeExplodeRadius:"
                labelPlacement="left"
                selected="true" />
    </mx:ApplicationControlBar>

    <mx:PieChart id="pieChart"
            dataProvider="{dp}"
            showDataTips="true"
            itemClick="pieChart_itemClick(event);"
            height="100%"
            width="100%">
        <mx:series>
            <mx:PieSeries id="pieSeries"
                    field="@data"
                    nameField="@label">
                <mx:showDataEffect>
                    <mx:SeriesInterpolate duration="1500"
                            easingFunction="{Elastic.easeOut}" />
                </mx:showDataEffect>
                <mx:filters>
                    <mx:DropShadowFilter />
                </mx:filters>
            </mx:PieSeries>
        </mx:series>
    </mx:PieChart>

    <mx:Legend dataProvider="{pieChart}" direction="horizontal" />

</mx:Application>

 

分享到:
评论

相关推荐

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

    在Flex中,饼形图(piechart)、柱形图(columnchart)、条形图(barchart)和折线图(linechart)是数据可视化的重要工具,广泛应用于数据分析和展示。 1. **饼形图(PieChart)** 饼形图用于显示部分与整体之间...

    flex圆形图表展示源码

    在Flex中,我们可以利用mx.charts库来创建各种图表,包括圆形图表。 标签"flex圆形图表展示源码"进一步强调了这个主题,表明我们将专注于Flex的源码实现,而不是理论概念。 在压缩包文件名...

    Flex_4系统组件:图表

    标题中的“Flex_4系统组件:图表”指的是Adobe Flex 4框架中用于创建数据可视化的图表组件。这些组件是Flex SDK的一部分,允许开发者构建交互式的、动态的数据展示应用。Flex 4引入了全新的图形渲染引擎(称为Spark...

    flex做的四种图表(线、柱、饼、区域)直接用js调用

    在Flex中,可以使用mx.charts.LineChart类来创建线图,通过设置series属性添加数据系列,利用dataProvider绑定数据源,还可以自定义轴刻度、图例、颜色等视觉元素。 柱状图则常用于比较不同类别的数据量。Flex中的...

    flex图表展示数据源码

    在Flex中,我们可以使用各种图表组件来展示数据,这些图表能够以视觉化的方式帮助用户理解复杂的统计数据。"flex图表展示数据源码"指的是使用Flex进行数据可视化时,用于驱动图表的源代码。 在Flex中,数据图表主要...

    flex图表导出图片

    本篇文章将深入探讨如何在Flex中实现图表的图片导出功能。 首先,让我们了解Flex中的图表组件。Flex提供了一系列强大的图表组件,如BarChart、LineChart、PieChart等,这些组件基于Adobe Flex SDK,可以方便地创建...

    Flex4中使用组件添加柱状图、饼状图等图表

    根据提供的文件信息,本文将详细介绍如何在Flex4中利用组件添加柱状图、饼状图等图表,并通过示例代码具体展示实现过程。 ### 一、Flex4中的柱状图 #### 1.1 柱状图简介 在Flex4中,柱状图是一种非常常见的数据...

    flex各种图表的实现

    在Flex中,可以使用`mx.effects.Effect`类来添加动画效果。例如,`Fade`效果可以使图表淡入或淡出,`Move`效果可以改变组件的位置,而`Resize`效果则可以改变组件的大小。通过结合不同的效果并调整其属性,如`...

    pieChart 3d示例 flax

    在IT行业中,数据可视化是至关重要的,特别是在数据分析和报告呈现时。`pieChart 3d`是一种用于展示数据比例和分布的图形,它通过立体的视角增强了数据的视觉表达力。`flax`是一个强大的数据可视化库,它为开发者...

    flex常用图表的实例

    在Flex中,Charts组件是用于展示数据的强大工具,可以创建各种类型的图表,如条形图、线图、饼图、散点图等,帮助用户以视觉方式理解复杂的数据。在本实例中,我们将会探讨如何使用Flex中的Charts组件来实现常见的...

    flex------组件-----数据可视化

    2. **Data Providers**:在Flex中,数据可视化的关键在于数据提供者。数据提供者将应用程序中的数据映射到图表的各个元素。可以使用Array、XML、ArrayCollection或任何实现了IList接口的对象作为数据源。通过设置...

    flex组件之数据可视化组件实例源码

    在Flex中,数据可视化组件是用于创建各种图表和图形的工具,使开发者能够将复杂的数据转化为易于理解的视觉表示。本实例源码提供了对数据可视化的深入理解和实际应用。 首先,我们要了解Flex中的数据绑定机制。在...

    实现图表切换效果变化

    对这个项目的源码进行研究和分析,可以帮助我们更好地理解和学习如何在Flex中实现图表效果的切换以及动态数据加载。 总之,实现图表切换效果变化是提升数据可视化应用程序用户体验的重要一环。通过熟练掌握Flex提供...

    FLEX 图表组建

    在FLEX中,使用图表组件通常涉及以下几个知识点: 1. **安装与引入**:首先,你需要将AmCharts的库文件添加到你的FLEX项目中,这通常通过在项目配置中引用库路径或使用MXMLC编译器的命令行参数来实现。 2. **创建...

    flex Chart

    Flex Chart 是Adobe Flex框架中用于数据可视化的组件集,它提供了强大的图表绘制功能,使得开发者可以轻松地创建各种类型的图表,如柱状图、折线图、饼图、散点图等。在Flex 3中,Chart组件是MXML和ActionScript开发...

    C#饼状图PieChart

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

    flex图表组件

    Flex图表组件是基于Adobe Flex技术开发的一种用于在Web应用程序中展示数据可视化的工具。Flex是一种开源的、基于ActionScript的框架,主要用于构建富互联网应用程序(RIA)。它允许开发者创建交互式、高性能的用户...

    wpf piechart componentart

    5. **动画**:ComponentArt PieChart支持动画效果,学习如何添加旋转、缩放等动画,提升用户体验。 6. **性能优化**:对于大数据集,理解如何优化数据呈现以确保流畅的用户体验。 通过研究这个代码-behind示例,...

    C# 3D 饼图 PieChart 三维

    在C#编程环境中,3D饼图(PieChart)是一种常用的数据可视化工具,它能够以立体的方式展示数据比例关系,使复杂的数据变得直观易懂。本文将深入探讨C#中创建3D饼图的关键知识点,包括3D效果的实现、数据绑定、自定义...

Global site tag (gtag.js) - Google Analytics