동적으로 제어 가능한 차트 예제

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>