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

By Minidxer | December 14, 2008

接下来的例子演示了Flex中如何在点击PieChart图表数据块的时候添加有趣的旋转效果。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.effects.easing.*;
  10.             import mx.charts.series.items.PieSeriesItem;
  11.             import mx.charts.events.ChartItemEvent;
  12.  
  13.             private function pieChart_itemClick(evt:ChartItemEvent):void {
  14.                 var item:PieSeriesItem = evt.hitData.chartItem as PieSeriesItem;
  15.                 var degrees:Number = radiansToDegrees(item.startAngle);
  16.                 var arr:Array = [];
  17.                 if (checkBox.selected) {
  18.                     arr[item.index] = 0.2;
  19.                 }
  20.                 pieSeries.perWedgeExplodeRadius = arr;
  21.                 pieSeries.startAngle -= degrees;
  22.  
  23.                 dp.refresh();
  24.             }
  25.  
  26.             private function radiansToDegrees(radians:Number):Number {
  27.                 return radians * (180 / Math.PI);
  28.             }
  29.         ]]>
  30.     </mx:Script>
  31.  
  32.     <mx:XMLListCollection id="dp">
  33.         <mx:source>
  34.             <mx:XMLList>
  35.                 <product label="Product 1" data="3" />
  36.                 <product label="Product 2" data="1" />
  37.                 <product label="Product 3" data="4" />
  38.                 <product label="Product 4" data="1" />
  39.                 <product label="Product 5" data="5" />
  40.                 <product label="Product 6" data="9" />
  41.             </mx:XMLList>
  42.         </mx:source>
  43.     </mx:XMLListCollection>
  44.  
  45.     <mx:ApplicationControlBar dock="true">
  46.         <mx:CheckBox id="checkBox"
  47.                 label="Use perWedgeExplodeRadius:"
  48.                 labelPlacement="left"
  49.                 selected="true" />
  50.     </mx:ApplicationControlBar>
  51.  
  52.     <mx:PieChart id="pieChart"
  53.             dataProvider="{dp}"
  54.             showDataTips="true"
  55.             itemClick="pieChart_itemClick(event);"
  56.             height="100%"
  57.             width="100%">
  58.         <mx:series>
  59.             <mx:PieSeries id="pieSeries"
  60.                     field="@data"
  61.                     nameField="@label">
  62.                 <mx:showDataEffect>
  63.                     <mx:SeriesInterpolate duration="1500"
  64.                             easingFunction="{Elastic.easeOut}" />
  65.                 </mx:showDataEffect>
  66.                 <mx:filters>
  67.                     <mx:DropShadowFilter />
  68.                 </mx:filters>
  69.             </mx:PieSeries>
  70.         </mx:series>
  71.     </mx:PieChart>
  72.  
  73.     <mx:Legend dataProvider="{pieChart}" direction="horizontal" />
  74.  
  75. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Chart | No Comments » | 2,384 views Tags: , , , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll