flex图表数据动态更新效果示例

<?xml version="1.0"?> <!-- charts/BasicSeriesSlideEffect.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <!--[CDATA[ import mx.collections.ArrayCollection; [Bindable] public var expenses1:ArrayCollection=new ArrayCollection([{Month: "Jan", Income: 2000, Expenses: 1500}, {Month: "Feb", Income: 1000, Expenses: 200}, {Month: "Mar", Income: 1500, Expenses: 500}]); [Bindable] public var expenses2:ArrayCollection=new ArrayCollection([{Month: "Jan", Income: 1200, Expenses: 800}, {Month: "Feb", Income: 2500, Expenses: 300}, {Month: "Mar", Income: 575, Expenses: 490}]); public var year:int=1; public function changeProvider():void { if (year == 2) { myChart.dataProvider=expenses1; b1.label="View Second Year Data"; lbl.text="First Year Data"; year=1; } else { myChart.dataProvider=expenses2; lbl.text="Second Year Data"; b1.label="View First Year Data"; year=2; } } ]]--> </mx:Script> <!-- Define chart effects --> <mx:SeriesSlide id="slideIn" duration="1000" direction="up"/> <mx:SeriesSlide id="slideOut" duration="1000" direction="down"/> <mx:Panel title="Column Chart with Basic Series Slide Effect" layout="absolute" height="493"> <mx:Label id="lbl" text="First Year Data" width="233.5" height="44" fontSize="24" color="#091D96" top="5" right="10"/> <mx:ColumnChart id="myChart" dataProvider="{expenses1}"> <mx:horizontalAxis> <mx:CategoryAxis dataProvider="{expenses1}" categoryField="Month"/> </mx:horizontalAxis> <mx:verticalAxis> <mx:LinearAxis minimum="0" maximum="3000"/> </mx:verticalAxis> <mx:series> <mx:ColumnSeries xField="Month" yField="Income" displayName="Income" showDataEffect="slideIn" hideDataEffect="slideOut"/> <mx:ColumnSeries xField="Month" yField="Expenses" displayName="Expenses" showDataEffect="slideIn" hideDataEffect="slideOut"/> </mx:series> </mx:ColumnChart> <mx:Legend dataProvider="{myChart}" bottom="0"/> </mx:Panel> <mx:Button id="b1" click="changeProvider()" label="View Second Year Data"/> </mx:Application>

 

<?xml version="1.0"?> <!-- charts/AddItemEffect.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <!--[CDATA[ import mx.collections.ArrayCollection; [Bindable] public var items:ArrayCollection=new ArrayCollection([{item: 2000}, {item: 3300}, {item: 3000}, {item: 2100}, {item: 3200}]); public function addDataItem():void { // Add a randomly generated value to // the data provider. var n:Number=Math.random() * 3000; var o:Object={item: n}; items.addItem(o); } ]]--> </mx:Script> <!-- Define chart effect --> <mx:SeriesSlide id="slideIn" duration="1000" direction="up"/> <mx:Panel title="Column Chart with Series Effect"> <mx:ColumnChart id="myChart" dataProvider="{items}"> <mx:series> <mx:ColumnSeries yField="item" displayName="Quantity" showDataEffect="slideIn"/> </mx:series> </mx:ColumnChart> </mx:Panel> <mx:Button id="b1" click="addDataItem()" label="Add Data Item"/> </mx:Application>