Flex学习记录（设计图表的刻度线）

使用AxisRenderer 中的样式来设置图表刻度线的外观
通过样式，Flex 提供了大量控制刻度线外观的方法。在Flex 图表中有两种类型的刻度线，
分别是大刻度线和小刻度线。大刻度线与坐标轴的标签相对应，小刻度线通常用在大刻度线
之间。
在AxisRenderer 中可以定义图表刻度线的外观样式。大刻度线可用tickPlacement、
tickAlignment 和tickLength 来定义样式；小刻度线可用minorTickPlacement、
minorTickAlignment 和minorTickLength 来定义样式。
tickMarkPlacement 和minorTickPlacement 定义刻度线在坐标线的那个位置出现。表16-1
列出了相关参数值。
Table 16-1. 刻度线的值和位置
Value | Placement
－－－－－－－－－－－－－－
cross | Across the axis
inside | Inside the axis
outside | Outside the axis
none No | tick mark
以下这个例子将大刻度线定在坐标线的内侧，小刻度线定在坐标线的外侧。大刻度线是5
个像素长，小刻度线是10 像素长。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal" backgroundColor="0xFFFFFF">
<mx:Script>
	<![CDATA[
	[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:Style>
	.customTicks {
	tickPlacement:cross;
	minorTickPlacement:cross;
	tickLength:5;
	minorTickLength:10;
	}
</mx:Style>
<mx:Canvas label="Area">
	<mx:AreaChart dataProvider="{chartDP}" >
		<mx:horizontalAxis>
			<mx:CategoryAxis dataProvider="{chartDP}" categoryField="day" />
		</mx:horizontalAxis>
		<mx:verticalAxis>
			<mx:LinearAxis id="vertAxis"/>
		</mx:verticalAxis>
		<mx:verticalAxisRenderers>
			<mx:AxisRenderer axis="{vertAxis}" styleName="customTicks" />
		</mx:verticalAxisRenderers>
		<mx:series>
			<mx:AreaSeries yField="rainfall" displayName="rainfall" />
		</mx:series>
	</mx:AreaChart>
</mx:Canvas>
</mx:Application>