차트 랜더러 만들기 예제

아래 그림과 같이 차트에 그라디언트를 적용할 수 있다.

[샘플 적용하기]

<mx:ColumnSeries

showDataEffect="{slideIn}" hideDataEffect="{slideOut}"

styleName="waitCS" xField="serverName" yField="cpuPercent"

itemRenderer="com.izsolution.zion.comp.renderer.GradientChartRenderer"

displayName="사용량" >

<mx:fills>

<mx:SolidColor color="0xff0000"/>

</mx:fills>

</mx:ColumnSeries>

[코드]

package com.izsolution.zion.comp.renderer

{

       import flash.display.Graphics;

       import flash.geom.Rectangle;

      

       import mx.charts.ChartItem;

       import mx.charts.chartClasses.GraphicsUtilities;

       import mx.charts.series.items.ColumnSeriesItem;

       import mx.core.IDataRenderer;

       import mx.graphics.IFill;

       import mx.graphics.SolidColor;

       import mx.skins.ProgrammaticSkin;

 

 

       /**

        * 그라디언트 차트의 렌더러

        * @author wonsama

        */

       public class GradientChartRenderer extends ProgrammaticSkin implements IDataRenderer

       {

             private var _data:Object;  /* 차트에서 얻어오는 정보 */

            

             public function GradientChartRenderer()

             {

                    super();

             }

            

             public function get data():Object

             {

                    return _data;

             }

            

             public function set data(value:Object):void

             {

                    if (_data == value) return;

                    _data = value;

             }

            

             override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{

                    super.updateDisplayList(unscaledWidth, unscaledHeight);

                   

                   

                    var fill:IFill;

                    var state:String = "";     /*현재 차트의 상태*/

                   

                    if(_data is ChartItem && _data.hasOwnProperty('fill')){

                           //ColumnSeriesItem 에 적용 가능함 . 다른 차트라면 해당 SeriesItem을 맞게 수정하여 사용하면 된다.

                           //SeriesItem에서 특정 값(개수, 최대값, 최소값 ..)을 가지고 와서 Renderer에 반영 또한 가능 함.

                           var tmpCI:ColumnSeriesItem = _data as ColumnSeriesItem;

                           fill = GraphicsUtilities.fillFromStyle(getStyle('fill'));

                           state = _data.currentState;                    //DISABLED ,FOCUSED ,FOCUSEDSELECTED ,NONE ,ROLLOVER ,SELECTED

                    }

                                                           

                    switch(state) //차트 상태값에 따른 색상 설정

                    {

                           case ChartItem.FOCUSED:

                           case ChartItem.ROLLOVER:

                           break;

                           case ChartItem.DISABLED:

                           break;

                           case ChartItem.FOCUSEDSELECTED:

                           case ChartItem.SELECTED:

                           break;

                    }

                   

                    //실제 차트를 그려주는 부분

                    if(fill){

                           var g:Graphics = graphics;

                           g.clear();

                                                    

                           var tmpColor:uint = (getStyle('fill') is SolidColor)?((getStyle('fill') as SolidColor).color):0x000000;

                          

                           var tmpWidth:Number = unscaledWidth;

                           var tmpHeight:Number = unscaledHeight;

                          

                           var secondX:Number = unscaledWidth/5;   // 1/5 지점에서 2번째를 그려주도록 한다.

 

//                         [ 참조사항 ]                      

//                         drawRoundRect(

//                               x,y,width,height,cornerRadius,

//                               color,alpha,

//                               gradientMatrix);

                          

//                         horizontalGradientMatrix(x,y,width,height);

                          

                           //좌측 그라디언트

                           drawRoundRect(

                                 0, 0, secondX, tmpHeight, null,

                                 [ tmpColor, 0xffffff ], 1,

                                 horizontalGradientMatrix(0, 0, secondX, tmpHeight)

                           );

                          

                           //우측 그라디언트

                           drawRoundRect(

                                 secondX, 0, tmpWidth-secondX, tmpHeight, null,

                                 [ 0xffffff, tmpColor ], 1,

                                  horizontalGradientMatrix(secondX, 0, tmpWidth-secondX, tmpHeight)

                           );

                          

                    }

             }

       }           

}