Flex中如何让被PieChart图表的某一部分随着点击旋转的例子

By Minidxer | November 15, 2008

前面Flex中如何在点击PieChart图表的某一部分时弹出显示该部分的例子中，我们看到了图表中的被点击的某块弹出的效果。接下来的例子演示了 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.charts.series.items.PieSeriesItem;
  10.             import mx.charts.events.ChartItemEvent;
  11.  
  12.             private function pieChart_itemClick(evt:ChartItemEvent):void {
  13.                 var item:PieSeriesItem = evt.hitData.chartItem as PieSeriesItem;
  14.                 var degrees:Number = radiansToDegrees(item.startAngle);
  15.                 var arr:Array = [];
  16.                 if (checkBox.selected) {
  17.                     arr[item.index] = 0.2;
  18.                 }
  19.                 pieSeries.perWedgeExplodeRadius = arr;
  20.                 pieSeries.startAngle -= degrees;
  21.             }
  22.  
  23.             private function radiansToDegrees(radians:Number):Number {
  24.                 return radians * (180 / Math.PI);
  25.             }
  26.         ]]>
  27.     </mx:Script>
  28.  
  29.     <mx:XML id="dp">
  30.         <products>
  31.             <product label="Product 1" data="3" />
  32.             <product label="Product 2" data="1" />
  33.             <product label="Product 3" data="4" />
  34.             <product label="Product 4" data="1" />
  35.             <product label="Product 5" data="5" />
  36.             <product label="Product 6" data="9" />
  37.         </products>
  38.     </mx:XML>
  39.  
  40.     <mx:ApplicationControlBar dock="true">
  41.         <mx:CheckBox id="checkBox"
  42.                 label="Use perWedgeExplodeRadius:"
  43.                 labelPlacement="left"
  44.                 selected="true" />
  45.     </mx:ApplicationControlBar>
  46.  
  47.     <mx:PieChart id="pieChart"
  48.             dataProvider="{dp.product}"
  49.             itemClick="pieChart_itemClick(event);"
  50.             height="100%"
  51.             width="100%">
  52.         <mx:series>
  53.             <mx:PieSeries id="pieSeries"
  54.                     field="@data"
  55.                     labelPosition="callout">
  56.                 <mx:stroke>
  57.                     <mx:Stroke color="black" weight="0" />
  58.                 </mx:stroke>
  59.                 <mx:filters>
  60.                     <mx:Array />
  61.                 </mx:filters>
  62.             </mx:PieSeries>
  63.         </mx:series>
  64.     </mx:PieChart>
  65.  
  66. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Chart | No Comments » | 450 views Tags: , , , ,

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll