区域图

<?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">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<mx:Stroke id="s1"
				   color="red"
				   alpha="0.4"
				   weight="2"
				   />
		<mx:Stroke id="s2"
				   color="blue"
				   alpha="0.4"
				   weight="2"
				   />
		<mx:Stroke id="s3"
				   color="black"
				   alpha="0.4"
				   weight="2"
				   />
		
		<!--定义图表填充的样式-->
		<mx:SolidColor id="sc1"
					   color="red"
					   alpha="0.3"/>
		<mx:SolidColor id="sc2"
					   color="blue"
					   alpha="0.3"/>
		<mx:SolidColor id="sc3"
					   color="black"
					   alpha="0.3"/>
		
		<mx:RadioButtonGroup id="stateInp" />
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.charts.HitData;
			import mx.charts.series.AreaSeries;
			import mx.charts.series.items.AreaSeriesItem;
			import mx.collections.ArrayCollection;
			
			[Bindable]
			private var ac:ArrayCollection=new ArrayCollection([
				{Month: '一', All: 1700, yearOf2013: 1500, yearOf2014: 200},
				{Month: '二', All: 4000, yearOf2013: 3000, yearOf2014: 1000}, 
				{Month: '三', All: 1000, yearOf2013: 300, yearOf2014: 700}, 
				{Month: '四', All: 900, yearOf2013: 500, yearOf2014: 400}, 
				{Month: '五', All: 2300, yearOf2013: 500, yearOf2014: 1800}, 
				{Month: '六', All: 500, yearOf2013: 400, yearOf2014: 100},
				{Month: '七', All: 2000, yearOf2013: 500, yearOf2014: 1500}, 
				{Month: '八', All: 700, yearOf2013: 300, yearOf2014: 400}, 
				{Month: '九', All: 800, yearOf2013: 300, yearOf2014: 500}, 
				{Month: '十', All: 4000, yearOf2013: 1500, yearOf2014: 2500}, 
				{Month: '十一', All: 900, yearOf2013: 400, yearOf2014: 500}, 
				{Month: '十二', All: 700, yearOf2013: 100, yearOf2014: 600}
			]);
			[Bindable]
			private var acXwq:ArrayCollection=new ArrayCollection([
				{Month: '一', All: 1100, yearOf2013: 1000, yearOf2014: 100},
				{Month: '二', All: 1700, yearOf2013: 1000, yearOf2014: 700}, 
				{Month: '三', All: 500, yearOf2013: 100, yearOf2014: 400}, 
				{Month: '四', All: 300, yearOf2013: 200, yearOf2014: 100}, 
				{Month: '五', All: 1300, yearOf2013: 200, yearOf2014: 1100}, 
				{Month: '六', All: 260, yearOf2013: 200, yearOf2014: 60},
				{Month: '七', All: 1200, yearOf2013: 200, yearOf2014: 1000}, 
				{Month: '八', All: 300, yearOf2013: 100, yearOf2014: 200}, 
				{Month: '九', All: 300, yearOf2013: 100, yearOf2014: 200}, 
				{Month: '十', All: 1500, yearOf2013: 1000, yearOf2014: 500}, 
				{Month: '十一', All: 500, yearOf2013: 200, yearOf2014: 300}, 
				{Month: '十二', All: 230, yearOf2013: 30, yearOf2014: 200}
			]);
			[Bindable]
			private var acQhq:ArrayCollection=new ArrayCollection([
				{Month: '一', All: 600, yearOf2013: 500, yearOf2014: 100},
				{Month: '二', All: 2300, yearOf2013: 2000, yearOf2014: 300}, 
				{Month: '三', All: 500, yearOf2013: 200, yearOf2014: 300}, 
				{Month: '四', All: 600, yearOf2013: 300, yearOf2014: 300}, 
				{Month: '五', All: 1000, yearOf2013: 300, yearOf2014: 700}, 
				{Month: '六', All: 240, yearOf2013: 200, yearOf2014: 40},
				{Month: '七', All: 800, yearOf2013: 300, yearOf2014: 500}, 
				{Month: '八', All: 400, yearOf2013: 200, yearOf2014: 200}, 				
				{Month: '九', All: 500, yearOf2013: 200, yearOf2014: 300}, 				
				{Month: '十', All: 2500, yearOf2013: 500, yearOf2014: 2000},				
				{Month: '十一', All: 400, yearOf2013: 200, yearOf2014: 200}, 				
				{Month: '十二', All: 470, yearOf2013: 70, yearOf2014: 400}
			]);
			private function labelFunc(categoryValue:Object, previousCategoryValue:Object, axis:CategoryAxis, categoryItem:Object):String {
				return categoryItem.Month+'月份'
			}
			private function dataTipFunc(hitData:HitData):String {   
				var t:String = '';
				var areaSerStr:String = (hitData.chartItem.element as AreaSeries).yField.toString();
				switch ( areaSerStr) {
					case 'All':
						t = '全部数量';
						break;
					case 'yearOf2013':
						t = '2013年数量';
						break;
					case 'yearOf2014':
						t = '2014年数量';
						break;
				}
				var a:String=(hitData.chartItem as AreaSeriesItem).item.Month+'月份：' 
					+ '\n' + t+ ':  ' + (hitData.chartItem as AreaSeriesItem).yValue;
				return a;
			}
		]]>
	</fx:Script>
	<mx:AreaChart id="areaChart" dataProvider="{ac}" 
				  x="50" y="100" width="80%" 
				  dataTipFunction="dataTipFunc"
				  showDataTips="true">
		<mx:horizontalAxis>
			<mx:CategoryAxis categoryField="Month" labelFunction="labelFunc" displayName="月份" title="月份"/>
		</mx:horizontalAxis>
		<mx:series>
			<mx:AreaSeries areaFill="{sc1}" areaStroke="{s1}" yField="All" displayName="全部">
				<mx:showDataEffect>
					<mx:SeriesInterpolate duration="1000"/>
				</mx:showDataEffect>
			</mx:AreaSeries>
			<mx:AreaSeries areaFill="{sc2}" areaStroke="{s2}" yField="yearOf2013" displayName="2013年">
				<mx:showDataEffect>
					<mx:SeriesInterpolate duration="1000"/>
				</mx:showDataEffect>
			</mx:AreaSeries>
			<mx:AreaSeries areaFill="{sc3}" areaStroke="{s3}" yField="yearOf2014" displayName="2014年">
				<mx:showDataEffect>
					<mx:SeriesInterpolate duration="1000"/>
				</mx:showDataEffect>
			</mx:AreaSeries>
		</mx:series>
	</mx:AreaChart>
	<mx:Legend dataProvider="{areaChart}" direction="horizontal"/>
	<s:HGroup paddingTop="35" paddingLeft="5">
		<mx:RadioButton groupName="stateInp" id="all" value="1" selected="true" click="areaChart.dataProvider = this.ac" label="全部" width="64" height="100%" />  
		<mx:RadioButton groupName="stateInp" id="on" value="0" click="areaChart.dataProvider = this.acXwq" label="玄武区" width="100%" height="100%"/> 
		<mx:RadioButton groupName="stateInp" id="off" value="2" click="areaChart.dataProvider = this.acQhq" label="秦淮区" width="100%" height="100%"/> 
	</s:HGroup>
</s:Application>