[FLEX] LineChart 그냥 만져보기~

라이브독 기존 소스에서
- 데이터 변경시 Effect(SeriesInterpolate) 실행
- 배경이미지 넣는 소스(주석처리)
- Stroke 설정

LineChart_Sample.mxml

<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundGradientColors="[#FFFFFF,#FFFFFF]" creationComplete="init()">     <mx:Script>         <![CDATA[             import mx.controls.Button;             import mx.graphics.SolidColor;             import mx.charts.renderers.CircleItemRenderer;             import mx.charts.renderers.LineRenderer;         import mx.collections.ArrayCollection;         [Bindable]         private var expensesAC:ArrayCollection = new ArrayCollection( [             { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },             { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },             { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },             { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },             { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);         [Bindable]         private var expensesAC1:ArrayCollection = new ArrayCollection( [             { Month: "Jan", Profit: 500, Expenses: 1000, Amount: 1450 },             { Month: "Feb", Profit: 2000, Expenses: 1000, Amount: 1600 },             { Month: "Mar", Profit: 1000, Expenses: 400, Amount: 800 },             { Month: "Apr", Profit: 1000, Expenses: 700, Amount: 1200 },             { Month: "May", Profit: 400, Expenses: 1575, Amount: 100 } ]);                                        import mx.charts.renderers.CircleItemRenderer;         [Bindable] private var _stroke:Stroke;         [Bindable] private var _fill:SolidColor;         private function init():void         {             var btn:Button = new Button();             btn.label = "dataChange";             btn.addEventListener(MouseEvent.CLICK, btnClick);             this.addChild(btn);                          _stroke = new Stroke(0xFF0000,15,0.5,false,"nomal","none");             _fill = new SolidColor(0xFF8000,1);         }         private var dataFlag:Boolean = true;         private function btnClick(e:MouseEvent):void         {             if (dataFlag)             {                 linechart.dataProvider = expensesAC1;             }             else {                 linechart.dataProvider = expensesAC;             }             dataFlag = !dataFlag;         }         ]]>     </mx:Script> <!--     <mx:SolidColor id="sc1" color="blue" alpha=".3"/>     <mx:SolidColor id="sc2" color="red" alpha=".3"/>     <mx:SolidColor id="sc3" color="green" alpha=".3"/> -->     <mx:Stroke id = "s1" color="#FFBA45" weight="2"/>     <mx:Stroke id = "s2" color="#748BFF" weight="2"/>     <mx:Stroke id = "s3" color="#FF3533" weight="2"/>         <mx:LineChart id="linechart" height="100%" width="100%"             paddingLeft="5" paddingRight="5"             showDataTips="true" dataProvider="{expensesAC}">                              <mx:horizontalAxis>                 <mx:CategoryAxis categoryField="Month"/>             </mx:horizontalAxis>             <mx:series>                 <mx:LineSeries yField="Profit" form="curve" displayName="Profit" lineStroke="{s1}"                     stroke="{_stroke}" itemRenderer="mx.charts.renderers.CircleItemRenderer" fill="{_fill}"                     showDataEffect="{eff}"/>                 <mx:LineSeries yField="Expenses" form="curve" displayName="Expenses" lineStroke="{s2}"                     showDataEffect="{eff}"/>                 <mx:LineSeries yField="Amount" form="curve" displayName="Amount" lineStroke="{s3}"                     showDataEffect="{eff}"/>             </mx:series>                          <!-- 배경 이미지             <mx:backgroundElements>                 <mx:Image source="@Embed('/images/chart.PNG')"/>             </mx:backgroundElements>             -->         </mx:LineChart>                  <mx:SeriesInterpolate id="eff"             elementOffset="30"             minimumElementDuration="200"             duration="1000"         />          <!--         <mx:Legend dataProvider="{linechart}"/>         <mx:AreaChart id="Areachart" height="100%" width="45%"              paddingLeft="5" paddingRight="5"              showDataTips="true" dataProvider="{expensesAC}">                               <mx:horizontalAxis>                 <mx:CategoryAxis categoryField="Month"/>             </mx:horizontalAxis>             <mx:series>                 <mx:AreaSeries yField="Profit" form="curve" displayName="Profit" areaStroke="{s1}" areaFill="{sc1}"/>                 <mx:AreaSeries yField="Expenses" form="curve" displayName="Expenses" areaStroke="{s2}" areaFill="{sc2}"/>                 <mx:AreaSeries yField="Amount" form="curve" displayName="Amount" areaStroke="{s3}" areaFill="{sc3}"/>             </mx:series>         </mx:AreaChart>                      <mx:Legend dataProvider="{Areachart}"/> --> </mx:Application>