[FLEX / CHART] dataTipRenderer를 이용한 DataTip 변경

FLEX의 가장 큰 장점중에 하나가 바로 chart라고 생각을 합니다. 근데 솔직히 Flex의 기본 챠트만을 가져다가 쓰는 경우는 아마 드물거라 생각됩니다.

chart에 관해 하나씩 하나씩 정리를 했으면 좋을것 같아서 글을 몇자 적어봅니다. 기본적으로 챠트의 사용방법이나 기타등등의 설명을 하지 않겠습니다. 책에 나온 기본 사항만 이해하고 있으면 쉽게 적용 할수 있을거라 생각됩니다. 

일단 아래 기본 chart를 작성 해보았습니다.

기본적인 라인챠트입니다. 소스는 아래와 같습니다.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="400"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var _dp:ArrayCollection = new ArrayCollection([ {name:"LEE", value:2632}, {name:"KIM", value:3509}, {name:"CHOI", value:3089}, {name:"PARK", value:10438}, {name:"YAMADA", value:4087}, {name:"TAKAKI", value:5467}, {name:"NAKAMURA", value:7934} ]); ]]> </mx:Script> <mx:LineChart id="myLC" dataProvider="{_dp}" showDataTips="true" > <mx:horizontalAxis> <mx:CategoryAxis categoryField="name" /> </mx:horizontalAxis> <mx:series> <mx:LineSeries xField="name" yField="value"> </mx:LineSeries> </mx:series> </mx:LineChart> </mx:Application>

FLEX에서 기본적으로 사용되는 DataTip의 모양은 위처럼 단순하고 심플한 느낌입니다. 하지만 DataTip 안의 표시 항목 및 스타일등을 제어하고 싶을 경우가 발생합니다. 이때는 dataTipRenderer 를 사용합니다. (여러가지 방법이 있지만 이 포스트에서는 이방법을 이용하도록 하겠습니다. 저도 아직 다른 방법으로 사용해본적이 없어서..;;;)

● DataTip

위에서 작성한 기본 챠트를 기준으로 dataTipRenderer 를 적용한 것입니다.

dataTipRenderer  속성을 이용하여 새로운 컨포넌트를 불러와서 사용하는 방법인데요. 아래 소스를 참고하시면 도움이 될것입니다.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="400"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var _dp:ArrayCollection = new ArrayCollection([ {name:"LEE", value:2632}, {name:"KIM", value:3509}, {name:"CHOI", value:3089}, {name:"PARK", value:10438}, {name:"YAMADA", value:4087}, {name:"TAKAKI", value:5467}, {name:"NAKAMURA", value:7934} ]); ]]> </mx:Script> <mx:LineChart id="myLC" dataProvider="{_dp}" showDataTips="true" dataTipRenderer="DatatipSkin" > <mx:horizontalAxis> <mx:CategoryAxis categoryField="name" /> </mx:horizontalAxis> <mx:series> <mx:LineSeries xField="name" yField="value"> </mx:LineSeries> </mx:series> </mx:LineChart> </mx:Application>

실제로 DataTip을 표시해주는 컨폰너트 입니다.

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle" backgroundColor="0xFFFF00" borderColor="0xFF0000" borderStyle="solid" paddingTop="5" paddingBottom="5" paddingRight="3" paddingLeft="3" verticalGap="-2" cornerRadius="4" borderThickness="2" verticalScrollPolicy="off" horizontalScrollPolicy="off"> <mx:Label text="{_FiledText}" width="100%" textAlign="center" fontWeight="bold" fontSize="12" /> <mx:Label text="{_ValueText}" textAlign="center"/> <mx:NumberFormatter id="Formatter" precision="2" thousandsSeparatorTo="," decimalSeparatorTo="." rounding="nearest" /> <mx:Script> <![CDATA[ import mx.charts.series.items.LineSeriesItem; import mx.charts.HitData; import mx.formatters.NumberFormatter; [Bindable] private var _FiledText:String; [Bindable] private var _ValueText:String; override public function set data(value:Object):void{ var hd:HitData = value as HitData; var itemLine:LineSeriesItem = hd.chartItem as LineSeriesItem; _FiledText = String(itemLine.xValue); _ValueText = "￦" + Formatter.format(String(itemLine.yValue)); }//end set data ]]> </mx:Script> </mx:VBox>