Animating a Flex PieChart control’s rotation when a user clicks on an item-阿里云开发者社区

开发者社区> 云计算> 正文
登录阅读全文

Animating a Flex PieChart control’s rotation when a user clicks on an item

简介:
In the following example, we look at how to add a nice animation effect with some easing to make the effect a bit more smooth
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/22/animating-a-flex-piechart-controls-rotation-when-a-user-clicks-on-an-item/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout
="vertical"
        verticalAlign
="middle"
        backgroundColor
="white">

    
<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>

    本文转自 OldHawk  博客园博客,原文链接:http://www.cnblogs.com/taobataoma/archive/2008/01/13/1037047.html,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: