차트의 AxisRenderer에 labelRenderer 설정을 통해 유사한 효과를 볼 수 있습니다. 후후...




<mx:horizontalAxisRenderers>

        <mx:AxisRenderer

               axis="{yearAxis}" id="scrollAxis" tickPlacement="none"   placement="bottom"

                    labelRenderer="comp.charts.WLegendButton"                

                    labelGap="3"

               />            

</mx:horizontalAxisRenderers>


http://tylee82.tistory.com/96

위 블로그를 참조 바랍니다.


LegendItem을 Customize하는 방법은 의외로 간단하다.

1. custLegendMarker 로 UIComponent를 상속받은 녀석을 하나 만들고, IDataRenderer를 implement 해서 data를 set,get 할 수 있게 해준다. ( 이 부분은 단순히 디자인만 customize할 경우엔 굳이 하지 않아도 된다. 그럴 경우 그냥 UIComponent를 쓰면 됨 --> 디자인만 Customize할 경우 굳이 지금 설명하는 방법을 쓰지 않아도;;; )

2. custLegendItem 을 mx.charts.LegendItem을 상속받아 만든다.
여기서 
override public function set marker(value:IFlexDisplayObject):void
로 set marker를 상속받아 만들어 준다.

3. 이 때 넘 어오는 value가 바로 기본 marker인데, 이건 series에 itemrenderer를 썼다면 그 renderer가, 기본형을 썼다면 기본 renderer가 넘어온다.

4. 1에서 선언한 UIComponent에 해당 marker를 삽입하고, 좌표, 크기등을 지정해준다. 그리고 더 추가하고 싶은 녀석들을 여기에 넣고 이리저리 좌표나 크기 조정을 해주자.

5. 꼭 해줘야 할 것은 각 컴포넌트들의 사이즈를 잡아줘야 한다는 것이다.

6. 그리고 나서 super.marker=새로만든UIComponent (여기서는 1에서 만든 custLegendMarker가 되겠지.

7. 이 customLegendItem을 사용하는 방법은 <mx:Legend legendItemClass="comp.custLegendItem" /> 요런식으로 써 주면 된다.

아래는 이 내용을 가지고 만들어본 custom LegendItem을 사용한 경우이다.
체크에 따른 오른쪽 챠트의 visible 변화를 보라.





참 고 : column(Bar) series의 경우 이 sample을 사용했을 경우 영역은 남아있고 visible만 변한다. 이 경우엔 Chart 자체를 상속받아 series부분을 만져줘야 한다. 이런 부분은 스스로 해결해 보길- ^^




ArrayCollection을 2개 할당한 이후
데이터 수신용, 보여주기용(Bindable) 으로 설정하여 데이터를 컨트롤 해 주도록 하면 된다. 



소스 보기

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
 creationComplete="init()"
 xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
 <mx:Script>
  <![CDATA[
   import mx.charts.chartClasses.Series;
   import mx.controls.CheckBox;
   import mx.collections.ArrayCollection;
   import mx.utils.ObjectProxy;
   
   private const MAX_SRV:uint = 3;
   [Bindable]
   private var viewArr:ArrayCollection = new ArrayCollection; //실제 보여주는 데이터
   private var rcvArr:ArrayCollection = new ArrayCollection; //받은 데이터
   
   
   
   private var fndIdx:uint;
   
   private var timer:Timer;
   
   private function init():void{
    timer = new Timer(1000);
    timer.start();
    timer.addEventListener(TimerEvent.TIMER, timerHandler);    
   }
   
   private function cbHandler(e:Event):void{
    generateRealValues();
   }
   
   private function generateRealValues():void{
    //보여주려는 것
    var tmpArr:ArrayCollection = new ArrayCollection;
    
    
    for(var i:uint=0;i<MAX_SRV;i++){
     var tmpCB:CheckBox = this["cb"+i] as CheckBox;
     if(tmpCB.selected){
      tmpArr.addItem(rcvArr.getItemAt(Number(tmpCB.id.substr(2))));
     }
    }
    
    viewArr = tmpArr;
   }
   
   private function timerHandler(e:TimerEvent):void{
    generateDummyValues();
   }
   
   private function generateDummyValues():void{
    
    rcvArr.removeAll();
    
    for(var i:uint=0;i<MAX_SRV;i++){
     var op:ObjectProxy = new ObjectProxy();
     
     op.server = "srv"+i;   // label field
     
     op.apple = randRange(0,5);  // data field
     op.melon = randRange(0,5);
     op.banana = randRange(0,5);
          
     rcvArr.addItem(op);
    }
    
    generateRealValues();
   }
   
   
   
   private function randRange(min:Number, max:Number):Number {
    var randomNum:Number = Math.floor(Math.random() * (max - min + 1)) + min;
    return randomNum;
   }
  ]]>
 </mx:Script>

 <mx:VBox width="100%" height="100%">
  <mx:HBox>
   <mx:Label text="SELECT SERVER :" />
   <mx:CheckBox id="cb0" label="srv0" selected="true" change="cbHandler(event)"/>
   <mx:CheckBox id="cb1" label="srv1" selected="true" change="cbHandler(event)"/>
   <mx:CheckBox id="cb2" label="srv2" selected="true" change="cbHandler(event)"/>
  </mx:HBox>
  <mx:HBox width="100%" height="100%">
   <mx:BarChart id="barchart1" height="100%" width="100%" dataProvider="{viewArr}">
    <mx:series>
     <mx:BarSet type="stacked" allowNegativeForStacked="true" >
      <mx:series>
       <mx:BarSeries id="bs0" displayName="apple" yField="server" xField="apple"/>
       <mx:BarSeries id="bs1" displayName="banana" yField="server" xField="banana"/>
       <mx:BarSeries id="bs2" displayName="melon" yField="server" xField="melon"/>
      </mx:series>
     </mx:BarSet>     
    </mx:series>
    <mx:verticalAxis>
     <mx:CategoryAxis dataProvider="{viewArr}" categoryField="server"/>
    </mx:verticalAxis>
    <!-- 가로 축 정보 -->
          <mx:horizontalAxis>
             <mx:LinearAxis
         interval="1"
         maximum="15"
         maximumLabelPrecision="0"
         minimum="0"
         minorInterval="0"
       />
          </mx:horizontalAxis>
   </mx:BarChart>
   <mx:Legend dataProvider="{barchart1}"/>
   
   
  </mx:HBox>
  <mx:TextArea width="100%" height="50" />
 </mx:VBox>
</mx:Application>


+ Recent posts