[FLEX] PieChart 그냥 만져 보기~

차트를 만져보지 않아서 트레이닝이 필요한 상태여서 그냥 한번 만져 보았다
라이브독 기존 소스는 Gold 필드만 출력되어 있어 버튼 클릭시 필드(Gold, Silver, Bronze) 변경하면서 Effect(Zoom) 일어나도록
수정해봤다


PieChart 그냥 만져 보기~

SeriesZoom_Sample.mxml

<?xml version="1.0"?> <!-- Simple example to demonstrate the PieChart control. --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" backgroundGradientColors="[#FFFFFF,#FFFFFF]">     <mx:Script>         <![CDATA[         import mx.controls.Button;                   import mx.collections.ArrayCollection;         [Bindable]         private var medalsAC:ArrayCollection = new ArrayCollection( [             { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },             { Country: "China", Gold: 32, Silver:17, Bronze: 14 },             { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);         private function init():void         {             // 필드 변경 버튼             var btn:Button = new Button();             btn.label = "Field Change";             btn.addEventListener(MouseEvent.CLICK, btnClick);             this.addChild(btn);             // 필드명 정의 배열             fieldArr.push("Gold");             fieldArr.push("Silver");             fieldArr.push("Bronze");         }                  private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String {             var temp:String= (" " + percentValue).substr(0,6);             return data.Country + ": " + '\n' + "Total "+fieldArr[fieldIdx]+": " + data[ fieldArr[fieldIdx] ] + '\n' + temp + "%";         }         private function btnClick(e:MouseEvent):void         {             dataReflash();         }                  private var fieldArr:Array=[]; // 필드명 정의 배열         private var fieldIdx:int=0; // 현재 필드 인덱스         private function dataReflash():void         {             // 필드 다음 인덱스 설정             if ( fieldIdx+1 < fieldArr.length )             {                 fieldIdx+=1;             }             else {                 fieldIdx=0;             }             // 필드 변경             chartseries.field = fieldArr[fieldIdx];         }         ]]>     </mx:Script>     <mx:SolidColor id="sc1" color="blue" alpha=".6"/>     <mx:SolidColor id="sc2" color="red" alpha=".6"/>     <mx:SolidColor id="sc3" color="0x663300" alpha=".6"/>     <mx:Stroke id="callouts" weight="2" color="0x999999" alpha=".8" caps="square"/>     <mx:Stroke id="radial" weight="1" color="0xFFFFCC" alpha=".3"/>     <mx:Stroke id="pieborder" color="0x000000" weight="2" alpha=".5"/>     <!--          ## 필드 변경시 Effect ##          horizontalFocus : left, right, center          verticalFocus : top, bottom, center          relativeTo : chart, series      -->     <mx:SeriesZoom id="eff"         horizontalFocus="left"         verticalFocus="top"         relativeTo="chart"         elementOffset="30"         minimumElementDuration="200"         duration="1000"         />         <mx:PieChart id="chart"             height="100%"             width="100%"             paddingRight="5"             paddingLeft="5"             showDataTips="true"             dataProvider="{medalsAC}"         >                       <mx:series>                 <mx:PieSeries id="chartseries"                     nameField="Country"                     labelPosition="outside"                     labelFunction="displayGold"                     field="Gold"                                          calloutStroke="{callouts}"                     radialStroke="{radial}"                     stroke="{pieborder}"                     fills="{[sc1, sc2, sc3]}"                                          showDataEffect="{eff}"                     hideDataEffect="{eff}"                 >                                      <mx:filters>                         <mx:Array />                     </mx:filters>                                   </mx:PieSeries>             </mx:series>         </mx:PieChart>         <!--           <mx:Legend dataProvider="{chart}"/>         --> </mx:Application>