Flex之柱状图实例

Flex之柱状图实例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
				import mx.collections.ArrayCollection;
				[Bindable]
				public var finance:ArrayCollection = new ArrayCollection([
				{Month:"一月",In:2000,Out:1500},
				{Month:"二月",In:1000,Out:200},
				{Month:"三月",In:1500,Out:200},
				{Month:"四月",In:3500,Out:1000},
				{Month:"五月",In:500,Out:800},
				{Month:"六月",In:4500,Out:600},
				{Month:"七月",In:2500,Out:500},
				{Month:"八月",In:1570,Out:300},
				{Month:"九月",In:1000,Out:450},
				{Month:"十月",In:1500,Out:500},
				{Month:"十一月",In:1700,Out:2500},
				{Month:"十二月",In:1800,Out:1500},
			]
			);
		]]>
	</mx:Script>
	<mx:Panel x="60" y="0" width="701" height="457" layout="absolute" title="柱状图实例">
		<mx:ColumnChart x="105" y="0" id="myChart" dataProvider="{finance}">
			<mx:horizontalAxis><!--定义横坐标，绑定到"finance"数据集中的"Month"上-->
				<mx:CategoryAxis dataProvider="{finance}" categoryField="Month" title="(月份)"/>
			</mx:horizontalAxis>
			<mx:series><!--数据以柱的形式表示-->
				<mx:ColumnSeries xField="Month" yField="In" displayName="收入"/><!--x轴为月份,y轴表示收入-->
				<mx:ColumnSeries xField="Month" yField="Out" displayName="支出"/>
			</mx:series>
		</mx:ColumnChart><!--Legend组件绑定柱状图中的数据名-->
		<mx:Legend dataProvider="{myChart}"/>
	</mx:Panel>
</mx:Application>