flex>图表控件 小强斋

1、区域型图表AreaChart

<?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 expenses:ArrayCollection = new ArrayCollection(
				[
					{Month:"一月", Profit:2000, Expenses:1500, Amount:450},
					{Month:"二月", Profit:1000, Expenses:200, Amount:600},
					{Month:"三月", Profit:1500, Expenses:500, Amount:300}
				]
			);
		]]>
	</mx:Script>
	
	<!-- 创建面板容器 -->
	<mx:Panel title="图表控件的使用">
		<!-- 创建AreaChart图表 -->
		<mx:AreaChart id="myChart" dataProvider="{expenses}" showDataTips="true">
			<mx:horizontalAxis>
				<mx:CategoryAxis dataProvider="{expenses}" categoryField="Month" />
			</mx:horizontalAxis>
			<mx:series>
				<mx:AreaSeries yField="Profit" displayName="利润" />
			</mx:series>
		</mx:AreaChart>
		<mx:Legend dataProvider="{myChart}"/>
	</mx:Panel>
	
</mx:Application>

AreaChart 使用外部数据源

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<!-- 创建XML格式数据模型 -->
	<mx:Model id="expenses" source="assets/data.xml" />
	<mx:Panel title="Area Chart">
		<!-- 创建 AreaChart 图表 -->
		<mx:AreaChart id="myChart" dataProvider="{expenses.result}"
			showDataTips="true">
			<mx:horizontalAxis>
				<mx:CategoryAxis 
					dataProvider="{expenses.result}"
					categoryField="Month"
				/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:AreaSeries
					yField="Profit"
					displayName="月份"
				/>
			</mx:series>
		</mx:AreaChart>
		<mx:Legend dataProvider="{myChart}"/>
	</mx:Panel>
</mx:Application>

assets/data.xml的内容如下

<data>
	<result>
		<Month>一月</Month>
		<Profit>2000</Profit>
		<Expenses>1500</Expenses>
		<Amount>450</Amount>
	</result>
	<result>
		<Month>二月</Month>
		<Profit>1000</Profit>
		<Expenses>200</Expenses>
		<Amount>600</Amount>
	</result>
	<result>
		<Month>三月</Month>
		<Profit>1500</Profit>
		<Expenses>500</Expenses>
		<Amount>300</Amount>
	</result>
</data>

<?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 expenses:ArrayCollection = new ArrayCollection([
					{Month:"一月", Profit:2000, Expenses:1500, Amount:450},
					{Month:"二月", Profit:1000, Expenses:200, Amount:600},
					{Month:"三月", Profit:1500, Expenses:500, Amount:300}
				]);
		]]>
	</mx:Script>
	<mx:Panel title="Area Chart">
		<!-- 创建 AreaChart 图表 -->
		<mx:AreaChart id="myChart" dataProvider="{expenses}"
			showDataTips="true">
			<mx:horizontalAxis>
				<mx:CategoryAxis
					dataProvider="{expenses}"
					categoryField="Month"
				/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:AreaSeries
					yField="Profit"
					displayName="利润"
					form="curve"
				/>
				<mx:AreaSeries
					yField="Expenses"
					displayName="费用"
					form="curve"
				/>
			</mx:series>
		</mx:AreaChart>
		<mx:Legend dataProvider="{myChart}"/>
	</mx:Panel>
</mx:Application>

二、BarChart

<?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 expenses:ArrayCollection = new ArrayCollection([
				{Month:"一月", Profit:2000, Expenses:1500},
				{Month:"二月", Profit:1000, Expenses:200},
				{Month:"三月", Profit:1500, Expenses:500}
			]);
		]]>
	</mx:Script>
	<mx:Panel>
		<!-- 创建 BarChart 图表 -->
		<mx:BarChart id="myChart" dataProvider="{expenses}">
			<mx:verticalAxis>
				<mx:CategoryAxis
					dataProvider="{expenses}"
					categoryField="Month"
				/>
			</mx:verticalAxis>
			<mx:series>
				<mx:BarSeries
					yField="Month"
					xField="Profit"
					displayName="利润"
				/>
				<mx:BarSeries
					yField="Month"
					xField="Expenses"
					displayName="费用"
				/>
			</mx:series>
		</mx:BarChart>
		<mx:Legend dataProvider="{myChart}"/>
	</mx:Panel>
</mx:Application>

三、泡沫型图表BubbleChart

<?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 expenses:ArrayCollection = new ArrayCollection([
    {Month:"一月", Profit:2000, Expenses:120, Amount:45},
    {Month:"二月", Profit:1000, Expenses:200, Amount:60},
    {Month:"三月", Profit:1500, Expenses:500, Amount:30}
   ]);
  ]]>
 </mx:Script>
 <mx:Panel>
  <!-- 创建 BubbleChart图表 -->
  <mx:BubbleChart id="myChart"
   minRadius="1"
   maxRadius="50"
   dataProvider="{expenses}"
   showDataTips="true"
  >
   <mx:series>
    <mx:BubbleSeries
     xField="Profit"
     yField="Expenses"
     radiusField="Amount"
     displayName="Profit"
    />
   </mx:series>
  </mx:BubbleChart>
  <mx:Legend dataProvider="{myChart}"/>
 </mx:Panel>
</mx:Application>

 四、线型图表LineChart

<?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 expenses:ArrayCollection = new ArrayCollection([
						{Month:"1月", Profit:2000, Expenses:1500, Amount:450},
						{Month:"2月", Profit:1000, Expenses:200, Amount:600},
						{Month:"3月", Profit:1500, Expenses:500, Amount:300}
				]);
		]]>
	</mx:Script>
	
	<mx:Panel title="线型图表">
		<!-- 创建 LineChart 图表 -->
		<mx:LineChart id="myChart" dataProvider="{expenses}" showDataTips="true">
			<mx:horizontalAxis>
				<mx:CategoryAxis dataProvider="{expenses}" categoryField="Month" />
			</mx:horizontalAxis>
			<mx:series>
				<mx:LineSeries yField="Profit" displayName="利润" />
				<mx:LineSeries yField="Expenses" displayName="费用" />
			</mx:series>
		</mx:LineChart>
		<mx:Legend dataProvider="{myChart}" />
	</mx:Panel>

</mx:Application>

五、圆饼型图表PieChart

<?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 expenses:ArrayCollection = new ArrayCollection([
							{Expense:"购物", Amount:2000},
							{Expense:"房租", Amount:1000},
							{Expense:"水电", Amount:100},
							{Expense:"汽车", Amount:450},
							{Expense:"煤气", Amount:100},
							{Expense:"饮食", Amount:1200}
						]);
				]]>
	</mx:Script>
	<mx:Panel title="圆饼型图表">
		<!-- 创建 PieChart 图表 -->
		<mx:PieChart id="myChart" dataProvider="{expenses}" showDataTips="true">
			<mx:series>
				<mx:PieSeries field="Amount" nameField="Expense"  />
			</mx:series>
		</mx:PieChart>
		<mx:Legend dataProvider="{myChart}"/>
	</mx:Panel>
</mx:Application>

六、混合型图表ColumnChart

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:Script>
  <![CDATA[
   // 创建数组，用于 ColumnChart 图表数据源
   [Bindable]
   public var SMITH:Array = [
     {date:"2008-08-22", point:45.87},
     {date:"2008-08-23", point:45.74},
     {date:"2008-08-24", point:45.77},
     {date:"2008-08-25", point:46.06},
    ];
   // 创建数组，用于 LineChart 图表数据源
   [Bindable]
   public var DECKER:Array = [
     {date:"2008-08-22", point:45.59},
     {date:"2008-08-23", point:45.3},
     {date:"2008-08-24", point:46.71},
     {date:"2008-08-25", point:46.88},
    ];
  ]]>
 </mx:Script>
 <mx:Panel title="混合型图表" width="400" height="400">
  <!-- 创建 ColumnChart 图表 -->
  <mx:ColumnChart id="mychart"
   dataProvider="{SMITH}"
   showDataTips="true"
   height="250"
   width="350"
  >
   <mx:horizontalAxis>
    <mx:CategoryAxis categoryField="date"/>
   </mx:horizontalAxis>
   <mx:verticalAxis>
    <mx:LinearAxis minimum="40" maximum="50"/>
   </mx:verticalAxis>
   <mx:series>
    <mx:ColumnSeries
     dataProvider="{SMITH}"
     xField="date"
     yField="point"
     displayName="SMITH"
    >
    </mx:ColumnSeries>
    <mx:LineSeries
     dataProvider="{DECKER}"
     xField="date"
     yField="point"
     displayName="DECKER"
    >
    </mx:LineSeries>
   </mx:series>
  </mx:ColumnChart>
 </mx:Panel>
</mx:Application>