[ FLEX ] 차트 - 선택한 계열만 색상 바꿔주기

아래처럼 코딩 하시면 됩니다. 그럼 선택한 계열의 색상을 바꿀 수 있습니다.

좀더 생각해 보면 계열이 아니라 선택한 바의 색상만 바꿔 줄 수도 있겠죠...

 

참고로 fill 은 ifill 인터페이스를 상속받아 구현하여 사용 할 수 있습니다.

이것을 응용하면 내부 칠해지는 방법을 여러가지로 바꿀 수 있겠죠... 그라데이션, 이미지, 테두리 칠하기 ...

 

단순 코딩 붙여 넣기를 넘어서서 이젠, 응용하는 실력이 필요한 시점입니다. (저두 뭐 아직은 배워 가고 있지만서도 바꿔가는거죠)

 

==> 코드 작성은 Flex4 기준으로 되어 있습니다. 뭐 별다른 차이는 없으니 적절하게 쓰시면 될꺼에요..

 

 

 

 

<?xml version="1.0" encoding="utf-8"?>

<s:Application

       xmlns:fx="http://ns.adobe.com/mxml/2009"

       xmlns:s="library://ns.adobe.com/flex/spark"

       xmlns:mx="library://ns.adobe.com/flex/halo"

       creationComplete="init()"

       minWidth="1024" minHeight="768">

       <fx:Script>

       <![CDATA[

             import mx.graphics.SolidColor;

             import mx.charts.chartClasses.Series;

             import mx.collections.ArrayCollection;

            

             private var prevSel:Number = -1; //previous selected index

            

             [Bindable] private var chartData:ArrayCollection = new ArrayCollection( [

                    { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },

                    { Country: "China", Gold: 32, Silver:17, Bronze: 14 },

                    { Country: "Korea", Gold: 50, Silver:40, Bronze: 30 } ]);

            

             private function init():void{

                    reset();

             }

             private function seriesClickHandler(e:MouseEvent):void{

                   

                    //reset color

                    reset();

                   

                    //draw

                    var ser:Series = e.currentTarget as Series;

                    var idx:Number = Number(ser.id.substr(3));

                   

                    if(idx==prevSel) {

                           prevSel = -1;

                           return;      //in case : same series selected.

                    }

                   

                    var cArr:Array = [0xD1A803,0xB5BBB3,0x916315]; //color array : gold, silver, bronze

                    ser.setStyle("fill",new SolidColor(cArr[idx-1],0.5));

                    ser.displayName = ser.displayName + " (Selected)";

                   

                    prevSel = idx;

             }

            

             private function reset():void{

                   

                    var serArr:Array = bchart.series;

                   

                    var cArr:Array = [0xD1A803,0xB5BBB3,0x916315]; //color array : gold, silver, bronze

                    var dArr:Array = ["Gold","Silver","Bronze"];  //color array : gold, silver, bronze

                   

                    for(var s:String in serArr){

                           var ser:Series = serArr[s];

                           ser.setStyle("fill", new SolidColor(cArr[s]));

                           ser.displayName  = dArr[s];

                    }

             }

            

       ]]>

       </fx:Script>

      

       <mx:BarChart id="bchart" x="47" y="67"  dataProvider="{chartData}">            

             <mx:verticalAxis>

                    <mx:CategoryAxis categoryField="Country"/>

             </mx:verticalAxis>

             <mx:series>

                    <mx:BarSeries id="ser1" displayName="Gold" click="seriesClickHandler(event)" xField="Gold" yField="Country"/>

                    <mx:BarSeries id="ser2" displayName="Silver" click="seriesClickHandler(event)" xField="Silver" yField="Country"/>

                    <mx:BarSeries id="ser3" displayName="Bronze" click="seriesClickHandler(event)" xField="Bronze" yField="Country"/>                 

             </mx:series>

       </mx:BarChart>

      

       <mx:Legend dataProvider="{bchart}"/>   

            

</s:Application>