学步园

效果图：

<?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/mx" minWidth="955" minHeight="600" applicationComplete="click()">
	<fx:Script>
		<![CDATA[
			import mx.charts.events.ChartItemEvent;
			import mx.controls.Alert;
			import mx.collections.ArrayCollection;
			[Bindable]
			public var planvalue:ArrayCollection=new ArrayCollection([
				{time:"1",realvalue:2000,planvalue:1500,guessvalue:1000,realrate:20,planrate:10},
				{time:"2",realvalue:1000,planvalue:200,guessvalue:1000,realrate:40,planrate:50},
				{time:"3",realvalue:1500,planvalue:500,guessvalue:1000,realrate:20,planrate:80}
			]);
			public function initListener():void
			{
				chart.addEventListener(ChartItemEvent.ITEM_CLICK,handler);
//				chart.addEventListener(ChartItemEvent.ITEM_DOUBLE_CLICK,handler);
//				chart.addEventListener(ChartItemEvent.ITEM_MOUSE_DOWN,handler);
//				chart.addEventListener(ChartItemEvent.ITEM_MOUSE_MOVE,handler);
//				chart.addEventListener(ChartItemEvent.ITEM_MOUSE_UP,handler);
//				chart.addEventListener(ChartItemEvent.ITEM_ROLL_OUT,handler);
//				chart.addEventListener(ChartItemEvent.ITEM_ROLL_OVER,handler);
			}
			public function handler(event:ChartItemEvent):void
			{
				mx.controls.Alert.show(event.type);
			}
			public function click():void
			{
				chart.dataProvider=planvalue;
				chart1.dataProvider=data.element;
				chart1.secondDataProvider=data.element;
			}
		]]>
	</fx:Script>
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<fx:Model id="data" source=".../flex_src/demoDat.xml"></fx:Model>
		<mx:SeriesInterpolate id="interpolate" elementOffset="-10" minimumElementDuration="200" duration="2500"></mx:SeriesInterpolate>
		<mx:SeriesZoom id="zoom" horizontalFocus="center" relativeTo="chart" verticalFocus="center" elementOffset="30" minimumElementDuration="200" duration="2500"></mx:SeriesZoom>
		<mx:SeriesSlide id="slide" direction="left" elementOffset="30" minimumElementDuration="100" duration="2500"></mx:SeriesSlide>
	</fx:Declarations>
	
	<s:Panel x="11" y="80" width="408" height="311" title="数据源：ArrayCollection"> 
		<mx:ColumnChart x="10" y="10" id="chart" width="386" height="258"  creationComplete="initListener()">
			<mx:horizontalAxis>
				<mx:CategoryAxis categoryField="time" title="planvalue"></mx:CategoryAxis>
			</mx:horizontalAxis>
			<mx:verticalAxis>
				<mx:LinearAxis title="realvalue" maximum="2500" minimum="0"></mx:LinearAxis>
			</mx:verticalAxis>
			<mx:series>
				<mx:ColumnSeries displayName="realvalue" yField="realvalue" xField="time" showDataEffect="{interpolate}"/>
			</mx:series>
		</mx:ColumnChart>
		<mx:Legend dataProvider="{chart}"/>
	</s:Panel>
	
	
	<s:Panel x="427" y="79" width="575" height="505" title="数据源：外部xml">
		<mx:ColumnChart x="10" y="10" id="chart1" width="553" height="452" showDataTips="true">
			<mx:series>
				<mx:ColumnSeries yField="realvalue" showDataEffect="{interpolate}"/>
				<mx:LineSeries yField="planvalue" showDataEffect="{zoom}"/>
			</mx:series>
			<mx:secondSeries>
				<mx:LineSeries xField="time" yField="realrate" form="curve" showDataEffect="{slide}"></mx:LineSeries>
			</mx:secondSeries>
			<mx:horizontalAxis>
				<mx:CategoryAxis categoryField="time"/>
			</mx:horizontalAxis>
		</mx:ColumnChart>
		<mx:Legend dataProvider="{chart1}"/>
	</s:Panel>
	
	<mx:ApplicationControlBar>
		<mx:Button label="Show Effects" click="click()"></mx:Button>
	</mx:ApplicationControlBar>
</s:Application>

其中外部数据xml位于：

且数据格式为：

<?xml version="1.0" encoding="UTF-8"?>
<root>
	<element>
		<time>1月</time>
		<realvalue>1258.91</realvalue>
		<planvalue>1117.27</planvalue>
		<guessvalue>1327.55</guessvalue>
		<realrate>8</realrate>
		<planrate>9</planrate>
	</element>
	<element>
		<time>2月</time>
		<realvalue>1238.91</realvalue>
		<planvalue>1317.27</planvalue>
		<guessvalue>1327.55</guessvalue>
		<realrate>11</realrate>
		<planrate>10</planrate>
	</element>
	<element>
		<time>3月</time>
		<realvalue>1278.91</realvalue>
		<planvalue>1217.27</planvalue>
		<guessvalue>1327.55</guessvalue>
		<realrate>9</realrate>
		<planrate>8</planrate>
	</element>
	<element>
		<time>4月</time>
		<realvalue>1248.91</realvalue>
		<planvalue>1317.27</planvalue>
		<guessvalue>1327.55</guessvalue>
		<realrate>7</realrate>
		<planrate>6</planrate>
	</element>
	<element>
		<time>5月</time>
		<realvalue>1228.91</realvalue>
		<planvalue>1417.27</planvalue>
		<guessvalue>1327.55</guessvalue>
		<realrate>6</realrate>
		<planrate>7</planrate>
	</element>
	<element>
		<time>6月</time>
		<realvalue>1218.91</realvalue>
		<planvalue>1217.27</planvalue>
		<guessvalue>1327.55</guessvalue>
		<realrate>8</realrate>
		<planrate>10</planrate>
	</element>
	<element>
		<time>7月</time>
		<realvalue>1208.91</realvalue>
		<planvalue>1117.27</planvalue>
		<guessvalue>1327.55</guessvalue>
		<realrate>11</realrate>
		<planrate>5</planrate>
	</element>
	<element>
		<time>8月</time>
		<realvalue>1188.91</realvalue>
		<planvalue>1317.27</planvalue>
		<guessvalue>1327.55</guessvalue>
		<realrate>9</realrate>
		<planrate>10</planrate>
	</element>
	<element>
		<time>9月</time>
		<realvalue>1088.91</realvalue>
		<planvalue>1317.27</planvalue>
		<guessvalue>1327.55</guessvalue>
		<realrate>11</realrate>
		<planrate>10</planrate>
	</element>
	<element>
		<time>10月</time>
		<realvalue>1388.91</realvalue>
		<planvalue>1317.27</planvalue>
		<guessvalue>1327.55</guessvalue>
		<realrate>9</realrate>
		<planrate>10</planrate>
	</element>
	<element>
		<time>11月</time>
		<realvalue>1488.91</realvalue>
		<planvalue>1117.27</planvalue>
		<guessvalue>1327.55</guessvalue>
		<realrate>11</realrate>
		<planrate>9</planrate>
	</element>
	<element>
		<time>12月</time>
		<realvalue>1088.91</realvalue>
		<planvalue>1317.27</planvalue>
		<guessvalue>1327.55</guessvalue>
		<realrate>8</realrate>
		<planrate>10</planrate>
	</element>
</root>