flex 图表使用

columnChart 控件为例

 

<?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>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
			[Bindable]             //图表数据  从后台传过来就可以制作报表了
			private var money:ArrayCollection = new ArrayCollection( [
				{ month:6, CostOfLiving:470, Play:231},
				{ month:7, CostOfLiving:500, Play:106},
				{ month:8, CostOfLiving:650, Play:43},
				{ month:9, CostOfLiving:704, Play:180},
				{ month:10, CostOfLiving:512, Play:410},
				{ month:11, CostOfLiving:823, Play:123},
			])
		]]>
	</fx:Script>
	<mx:ColumnChart id="column" type="stacked"
					dataProvider="{money}" x="215" y="90">
		<mx:horizontalAxis>     <!--水平轴-->
			<mx:CategoryAxis displayName="月份" categoryField="month" />
		</mx:horizontalAxis>
		<mx:series>         <!--Y轴-->
			<mx:ColumnSeries displayName="价格" yField="CostOfLiving">
				<mx:fill>
					<mx:RadialGradient>
						<mx:entries>
							<mx:GradientEntry  color="#f05788"  />
							<mx:GradientEntry color="#f05788" ratio="0"/>
						</mx:entries>
					</mx:RadialGradient>
				</mx:fill>
			</mx:ColumnSeries>
			<mx:ColumnSeries displayName="利润" yField="Play">
				<mx:fill>
					<mx:SolidColor color="#f08788"/>
				</mx:fill>
			</mx:ColumnSeries>
		
		</mx:series>
		
	</mx:ColumnChart>
	<mx:Legend dataProvider="{column}" x="720" y="50"/> <!--图例-->
</s:Application>