柱状图

<?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>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			[Bindable]
			private var arr:Array = [
				{id:1,month:'一月份',count:1000},
				{id:2,month:'二月份',count:1200},
				{id:3,month:'三月份',count:1300},
				{id:4,month:'四月份',count:800},
				{id:5,month:'五月份',count:1100},
				{id:6,month:'六月份',count:3000},
				{id:7,month:'七月份',count:2600},
				{id:8,month:'八月份',count:2400},
				{id:9,month:'九月份',count:3100},
				{id:10,month:'十月份',count:2600},
				{id:11,month:'十一月份',count:2700},
				{id:12,month:'十二月份',count:1680}
			];
			[Bindable]
			private var arr2013:Array = [
				{id:1,month:'一月份',count:400},
				{id:2,month:'二月份',count:700},
				{id:3,month:'三月份',count:500},
				{id:4,month:'四月份',count:600},
				{id:5,month:'五月份',count:200},
				{id:6,month:'六月份',count:2000},
				{id:7,month:'七月份',count:800},
				{id:8,month:'八月份',count:1400},
				{id:9,month:'九月份',count:1700},
				{id:10,month:'十月份',count:1100},
				{id:11,month:'十一月份',count:1500},
				{id:12,month:'十二月份',count:800}
			];
			[Bindable]
			private var arr2014:Array = [
				{id:1,month:'一月份',count:600},
				{id:2,month:'二月份',count:500},
				{id:3,month:'三月份',count:800},
				{id:4,month:'四月份',count:200},
				{id:5,month:'五月份',count:900},
				{id:6,month:'六月份',count:1000},
				{id:7,month:'七月份',count:1800},
				{id:8,month:'八月份',count:1000},
				{id:9,month:'九月份',count:1400},
				{id:10,month:'十月份',count:1500},
				{id:11,month:'十一月份',count:1200},
				{id:12,month:'十二月份',count:880}
			];
			
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
		<mx:RadioButtonGroup id="stateInp" />
	</fx:Declarations>
	<mx:ColumnChart x="50" y="90" width="80%" id="colChart" dataProvider="{arr}" showDataTips="true" selectionMode="single">
		<mx:horizontalAxis>
			<mx:CategoryAxis categoryField="month" />
		</mx:horizontalAxis>
		<mx:series>
			<mx:ColumnSeries displayName="数量" yField="count" maxColumnWidth="300">
				<mx:showDataEffect>
					<mx:SeriesInterpolate duration="1000"/>
				</mx:showDataEffect>
			</mx:ColumnSeries>
		</mx:series>
	</mx:ColumnChart>
	<mx:Legend dataProvider="{colChart}" />
	<s:HGroup paddingTop="30" paddingLeft="5">
		<mx:RadioButton groupName="stateInp" id="all" value="1" selected="true" click="colChart.dataProvider = this.arr" label="全部" width="64" height="100%" />  
		<mx:RadioButton groupName="stateInp" id="on" value="0" click="colChart.dataProvider = this.arr2013" label="2013年" width="100%" height="100%"/> 
		<mx:RadioButton groupName="stateInp" id="off" value="2" click="colChart.dataProvider = this.arr2014" label="2014年" width="100%" height="100%"/> 
	</s:HGroup>
	
</s:Application>

猜你喜欢

转载自huangdonghui.iteye.com/blog/2043134