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

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 像素长。

 

1. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
2. layout="horizontal" backgroundColor="0xFFFFFF">
3. <mx:Script>
4. <![CDATA[
5. [Bindable] public var chartDP:Array = [
6. {day:'Monday',rainfall:10,elevation:100,temperature:78},
7. {day:'Tuesday',rainfall:7,elevation:220,temperature:66},
8. {day:'Wednesday',rainfall:5,elevation:540,temperature:55},
9. {day:'Thursday',rainfall:8,elevation:60,temperature:84},
10. {day:'Friday',rainfall:11,elevation:390,temperature:52},
11. {day:'Saturday',rainfall:12,elevation:790,temperature:45},
12. {day:'Sunday',rainfall:14,elevation:1220,temperature:24}
13. ];
14. ]]>
15. </mx:Script>
16. <mx:Style>
17. .customTicks {
18. tickPlacement:cross;
19. minorTickPlacement:cross;
20. tickLength:5;
21. minorTickLength:10;
22. }
23. </mx:Style>
24. <mx:Canvas label="Area">
25. <mx:AreaChart dataProvider="{chartDP}" >
26. <mx:horizontalAxis>
27. <mx:CategoryAxis dataProvider="{chartDP}" categoryField="day" />
28. </mx:horizontalAxis>
29. <mx:verticalAxis>
30. <mx:LinearAxis id="vertAxis"/>
31. </mx:verticalAxis>
32. <mx:verticalAxisRenderers>
33. <mx:AxisRenderer axis="{vertAxis}" styleName="customTicks" />
34. </mx:verticalAxisRenderers>
35. <mx:series>
36. <mx:AreaSeries yField="rainfall" displayName="rainfall" />
37. </mx:series>
38. </mx:AreaChart>
39. </mx:Canvas>
40. </mx:Application>