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>