`
kehong
  • 浏览: 4523 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
社区版块
存档分类
最新评论

[收藏]有滑动效果的饼图

    博客分类:
  • Flex
XML 
阅读更多
<?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>
分享到:
评论

相关推荐

    带阴影的3d效果饼图

    "带阴影的3D效果饼图"是一个典型的图形组件,它能够以更直观、立体的方式展示数据分布。在这个项目中,开发者使用了QT库在VC2010环境下实现了这一功能。QT是一个跨平台的应用开发框架,支持Windows、Linux、Mac OS等...

    带有动画效果的饼图

    本篇文章将深入探讨“带有动画效果的饼图”这一主题,包括其原理、实现方法以及在实际应用中的价值。 首先,我们来理解动画效果在饼图中的作用。动画效果可以是平滑的过渡、渐变或者动态更新,它能将数据的变化过程...

    GDI+实现3D效果饼图

    5. 动态效果:为了增强用户体验,还可以考虑添加动态效果,如鼠标悬停时高亮扇区,或者平滑地旋转饼图以展示不同角度的数据分布。 6. 清理和优化:完成绘图后,记得清理资源,如释放`Graphics`对象。此外,为了提高...

    饼图饼图饼图

    饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图饼图...

    绘制饼图并实现动画效果

    本篇将深入探讨如何使用SVG(Scalable Vector Graphics)和JavaScript来绘制饼图并实现动态的动画效果。 SVG是一种基于XML的矢量图形格式,它可以无限缩放而不失真,非常适合用于网页和应用程序中的图形元素。在...

    php饼图 jquery饼图

    jQuery是JavaScript的一个库,它简化了DOM操作、事件处理和动画效果。虽然jQuery本身不直接支持饼图绘制,但可以与第三方库(如Chart.js或Morris.js)结合,实现动态交互的饼图。例如,使用jQuery与Chart.js创建饼图...

    3D饼图,2D饼图互转

    例如,你可能需要从2D的饼图系列开始,然后改变`Series.View3D.IsRightAngleAxes`属性为`false`,设置`Series.View3D.Perspective`来调整透视角度,最后可能还需要调整其他3D相关的属性以达到理想的视觉效果。...

    自定义双层嵌套饼图实现

    本文将深入探讨如何实现一个自定义的双层嵌套饼图,其中包括内层饼图、外层饼图的展示,以及动态动画和放大效果的添加。 首先,我们要了解饼图的基本原理。饼图是通过将圆周角分配给各个数据类别来表示比例关系的...

    IOS实现饼图效果

    本教程将详细介绍如何在iOS应用中实现饼图效果,适用于统计和展示简单数据分布情况。 首先,我们需要一个合适的库来帮助我们创建饼图。在iOS开发中,常用的图表库有Core Plot和Charts。这里我们以Charts库为例,...

    android 带旋转效果+监听转动位置的饼图

    而带有监听的效果则意味着当用户操作(比如滑动)饼图时,系统会捕捉并处理转动事件,可能用于触发相应的业务逻辑。 5. **实现细节**:在具体实现时,你可能需要创建一个自定义的饼图视图类,继承自上述库提供的...

    VC饼图.rar,VC饼图,VC饼图,VC饼图

    2. 库选择:VC++中有多种库可以用于生成饼图,如MFC(Microsoft Foundation Classes)、ATL(Active Template Library)或直接使用GDI+(Graphics Device Interface Plus)进行图形绘制。 3. 编程实现: - MFC:...

    echarts 3d饼图资源

    3D 饼图是 ECharts 提供的一种扩展的图表类型,它在传统二维饼图的基础上增加了第三个维度,使数据可视化更具有立体感和深度,有助于用户从多个角度理解和解析数据。3D 饼图在呈现多组数据比例关系时特别有用,因为...

    Android炫酷带动画效果的饼图统计绘图源代码

    本项目“Android炫酷带动画效果的饼图统计绘图源代码”正是专注于这一领域,提供了使用Property Animation实现饼图统计绘图的解决方案。Property Animation是Android系统中用于创建平滑动画的一种机制,它允许开发者...

    flash xml动态变化饼图效果好

    标题中的“Flash XML动态变化饼图效果好”指的是在Flash平台上使用XML数据源来实现饼图的动态变化,提供良好的视觉效果。Flash是一款强大的交互式矢量图形和多媒体平台,常用于创建动画、应用程序和网页组件。XML...

    android 饼图 饼图 饼图 自定义饼图

    可能有加载数据、设置饼图数据和更新饼图视图的逻辑。 4. **values资源文件夹**:这里可能包含颜色资源、尺寸资源等,用于定制饼图的颜色和大小。 三、实现饼图动画 为了增强用户体验,我们往往会给饼图添加动画...

    3D 饼图 Pie jquery

    Three.js是一个强大的3D渲染库,可以创建复杂的3D场景,而Chart.js则是一个轻量级的图表库,通常用于2D图表,但有一些社区开发的插件允许创建3D效果。 在“pie3D”这个文件中,可能包含了HTML、CSS和JavaScript代码...

    CSS实现饼图效果

    本文将详细介绍如何使用纯CSS技术来创建饼图效果,这对于那些希望在网页上展示数据且不依赖JavaScript库的开发者来说非常有用。 首先,我们需要理解饼图的基本原理:一个完整的饼图代表100%,每个扇区则代表相应的...

    arcgis for js 实现饼图效果

    在ArcGIS for JavaScript API中,实现饼图效果是一种常见的数据可视化方法,可以帮助用户直观地理解数据的比例分布。本文将深入探讨如何使用ArcGIS for JavaScript API(arcgis for js)来创建饼图,并介绍核心概念...

    wpf完美饼图实现

    标签“wpf 曲线图 饼图”表明这个解决方案可能包含不止饼图,还可能有曲线图或其他类型的图表。曲线图(Line Chart)在WPF中同样可以通过DataBinding和Path几何形状实现,用于显示连续的数据变化。 在提供的压缩包...

    flex 饼图的demo

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

Global site tag (gtag.js) - Google Analytics