Flex学习记录（创建一个图表）

图表有多种类型，在使用之前必须清楚工具箱中有哪些图表可供调用。
每一种图表都有一个ChartSeries 对象与之对应。要将数据显式地表示为某个特定的图表，
就要先添加对应的数列类型然后绑定到一个数据提供器上。ChartSeries 对象定义了在图表的
x 轴和y 轴上显示何种数据以及数据列的名称。数据列名称可以添加滤镜来显示，包括阴影
模糊或者发光的效果。
根据数据的不同格式，你可能需要自定义一个横向或纵向的坐标。如果数据是一个集合，如
日期、国家、人，你就需要使用类坐标(CategoryAxis)。如果数据是单纯的数字，就要使用
线性坐标(LinearAxis)。
图表的数据提供器可以是一个数组或多个类的集合，也可以是XMLList 对象。如果你要在
图表标签上设置一个数据提供器，那么数据列对象就会继承这个数据提供器，或者你可以选
择为每个数据列对象单独地指定一个数据提供器。不同的数据列可以使用不同的数据提供
器。一个图表不需要使用数据提供器里面的所有数据，可以只使用指定的部分数据。
可以用与以下代码创建条状图和饼状图：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal" backgroundColor="0xFFFFFF">
	<mx:Script>
		<![CDATA[
			// a basic data set
			[Bindable] public var chartDP:Array = [
			{day:'Monday',rainfall:10,elevation:100,temperature:78},
			{day:'Tuesday',rainfall:7,elevation:220,temperature:66},
			{day:'Wednesday',rainfall:5,elevation:540,temperature:55},
			{day:'Thursday',rainfall:8,elevation:60,temperature:84},
			{day:'Friday',rainfall:11,elevation:390,temperature:52},
			{day:'Saturday',rainfall:12,elevation:790,temperature:45},
			{day:'Sunday',rainfall:14,elevation:1220,temperature:24}
			];
		]]>
	</mx:Script>
<mx:ToggleButtonBar dataProvider="{simpleCharts}" direction="vertical" />

<mx:ViewStack id="simpleCharts" >
<mx:Canvas label="Bar">
	<mx:BarChart dataProvider="{chartDP}" >
		<mx:verticalAxis>
			<mx:CategoryAxis dataProvider="{chartDP}" categoryField="day" />
		</mx:verticalAxis>
		<mx:series>
			<!-- bar chart uses a BarSeries -->
			<mx:BarSeries yField="day" xField="rainfall" displayName="day" />
		</mx:series>
	</mx:BarChart>
</mx:Canvas>
<mx:Canvas label="Pie">
	<mx:PieChart dataProvider="{chartDP}" >
		<!-- no axes need to be defined in a pie chart -->
		<mx:series>
			<!-- pie chart uses a pie series -->
			<mx:PieSeries field="rainfall" nameField="day" labelPosition="callout" displayName="rainfall" />
		</mx:series>
	</mx:PieChart>
</mx:Canvas>
</mx:ViewStack>
</mx:Application>

柱状图和HighLowOpenClose 图表则需要一些不同类型的数据集合：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal" backgroundColor="0xFFFFFF">
<mx:Script>
	<![CDATA[
	// the field names don't need to be 'high','open','low',
	//and 'close', butyou need four different fields to get this kind
	//of chart to work
	[Bindable] public var highLowChartDP:Array = [
	{date:"1-Aug-05",open:42.57,high:43.08,low:42.08,close:42.75},
	{date:"2-Aug-05",open:42.89,high:43.5,low:42.61,close:43.19},
	{date:"3-Aug-05",open:43.19,high:43.31,low:42.77,close:43.22},
	{date:"4-Aug-05",open:42.89,high:43,low:42.29,close:42.71},
	{date:"5-Aug-05",open:42.49,high:43.36,low:42.02,close:42.99},
	{date:"8-Aug-05",open:43,high:43.25,low:42.61,close:42.65},
	{date:"9-Aug-05",open:42.93,high:43.89,low:42.91,close:43.82},
	{date:"10-Aug-05",open:44,high:44.39,low:43.31,close:43.38},
	{date:"11-Aug-05",open:43.39,high:44.12,low:43.25,close:44},
	{date:"12-Aug-05",open:43.46,high:46.22,low:43.36,close:46.1}
	];
	]]>
</mx:Script>
<mx:CandlestickChart dataProvider="{highLowChartDP}" showDataTips="true">
	<mx:verticalAxis>
		<mx:LinearAxis minimum="40" maximum="50" />
	</mx:verticalAxis>
	<mx:horizontalAxis>
		<mx:CategoryAxis categoryField="date" />
	</mx:horizontalAxis>
	<mx:series>
		<mx:CandlestickSeries dataProvider="{highLowChartDP}" alpha=".5" openField="open" highField="high"
		lowField="low" closeField="close" displayName="Rainfall">
			<mx:rollOverEffect>
				<mx:Fade alphaFrom=".5" alphaTo="1" duration="500"/>
			</mx:rollOverEffect>
			<mx:rollOutEffect>
				<mx:Fade alphaFrom="1" alphaTo=".5" duration="500" />
			</mx:rollOutEffect>
		</mx:CandlestickSeries>
	</mx:series>
</mx:CandlestickChart>
</mx:Application>