Flex中如何通过horizontalTickAligned和verticalTickAligned样式指定线图LineChart横竖方向轴心标记的例子

原文http://blog.minidx.com/2008/12/03/1669.html

接下来的例子演示了Flex中如何通过horizontalTickAligned和verticalTickAligned样式，指定线图LineChart横竖方向轴心标记。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：

下面是完整代码(或点击这里察看)：

Download: main.mxml

1. <?xml version="1.0"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3. layout="vertical"
4. verticalAlign="middle"
5. backgroundColor="white">
6. <mx:Script>
7. <![CDATA[
8. import mx.charts.CategoryAxis;
9. import mx.charts.chartClasses.IAxis;
10. private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
11. return currFormatter.format(item);
12. }
13. private function categoryAxis_labelFunc(item:Object, prevValue:Object, axis:CategoryAxis, categoryItem:Object):String {
14. var datNum:Number = Date.parse(item);
15. var tempDate:Date = new Date(datNum);
16. return tempDate.date.toString();
17. }
18. ]]>
19. </mx:Script>
20. <mx:CurrencyFormatter id="currFormatter" precision="2" />
21. <mx:XMLListCollection id="dp">
22. <mx:source>
23. <mx:XMLList>
24. <quote date="8/1/2007" open="40.29" close="39.58" />
25. <quote date="8/2/2007" open="39.4" close="39.52" />
26. <quote date="8/3/2007" open="39.47" close="38.75" />
27. <quote date="8/6/2007" open="38.71" close="39.38" />
28. <quote date="8/7/2007" open="39.08" close="39.42" />
29. <quote date="8/8/2007" open="39.61" close="40.23" />
30. <quote date="8/9/2007" open="39.9" close="40.75" />
31. <quote date="8/10/2007" open="41.3" close="41.06" />
32. <quote date="8/13/2007" open="41" close="40.83" />
33. <quote date="8/14/2007" open="41.01" close="40.41" />
34. <quote date="8/15/2007" open="40.22" close="40.18" />
35. <quote date="8/16/2007" open="39.83" close="39.96" />
36. <quote date="8/17/2007" open="40.18" close="40.32" />
37. <quote date="8/20/2007" open="40.55" close="40.74" />
38. <quote date="8/21/2007" open="40.41" close="40.13" />
39. <quote date="8/22/2007" open="40.4" close="40.77" />
40. <quote date="8/23/2007" open="40.82" close="40.6" />
41. <quote date="8/24/2007" open="40.5" close="40.41" />
42. <quote date="8/27/2007" open="40.38" close="40.81" />
43. </mx:XMLList>
44. </mx:source>
45. </mx:XMLListCollection>
46. <mx:ApplicationControlBar dock="true">
47. <mx:Form styleName="plain">
48. <mx:FormItem label="direction:">
49. <mx:ComboBox id="comboBox">
50. <mx:dataProvider>
51. <mx:Array>
52. <mx:Object label="both" />
53. <mx:Object label="horizontal" />
54. <mx:Object label="vertical" />
55. </mx:Array>
56. </mx:dataProvider>
57. </mx:ComboBox>
58. </mx:FormItem>
59. <mx:FormItem label="horizontalTickAligned:">
60. <mx:CheckBox id="hCheckBox" selected="true" />
61. </mx:FormItem>
62. <mx:FormItem label="verticalTickAligned:">
63. <mx:CheckBox id="vCheckBox" selected="true" />
64. </mx:FormItem>
65. </mx:Form>
66. </mx:ApplicationControlBar>
67. <mx:LineChart id="lineChart"
68. showDataTips="true"
69. dataProvider="{dp}"
70. width="100%"
71. height="100%">
72. <!-- background elements -->
73. <mx:backgroundElements>
74. <mx:GridLines direction="{comboBox.selectedItem.label}"
75. horizontalTickAligned="{hCheckBox.selected}"
76. verticalTickAligned="{vCheckBox.selected}">
77. <mx:horizontalFill>
78. <mx:SolidColor color="haloBlue" alpha="0.2" />
79. </mx:horizontalFill>
80. <mx:horizontalAlternateFill>
81. <mx:SolidColor color="haloSilver" alpha="0.2" />
82. </mx:horizontalAlternateFill>
83. <mx:verticalFill>
84. <mx:SolidColor color="haloBlue" alpha="0.2" />
85. </mx:verticalFill>
86. <mx:verticalAlternateFill>
87. <mx:SolidColor color="haloSilver" alpha="0.2" />
88. </mx:verticalAlternateFill>
89. </mx:GridLines>
90. </mx:backgroundElements>
91. <!-- vertical axis -->
92. <mx:verticalAxis>
93. <mx:LinearAxis baseAtZero="false"
94. title="Price"
95. labelFunction="linearAxis_labelFunc" />
96. </mx:verticalAxis>
97. <!-- horizontal axis -->
98. <mx:horizontalAxis>
99. <mx:CategoryAxis id="ca"
100. categoryField="@date"
101. title="August 2007"
102. labelFunction="categoryAxis_labelFunc" />
103. </mx:horizontalAxis>
104. <!-- horizontal axis renderer -->
105. <mx:horizontalAxisRenderers>
106. <mx:AxisRenderer axis="{ca}" canDropLabels="true" />
107. </mx:horizontalAxisRenderers>
108. <!-- series -->
109. <mx:series>
110. <mx:LineSeries yField="@open" displayName="Open" />
111. <mx:LineSeries yField="@close" displayName="Close" />
112. </mx:series>
113. <!-- series filters -->
114. <mx:seriesFilters>
115. <mx:Array />
116. </mx:seriesFilters>
117. </mx:LineChart>
118. </mx:Application>

代码：Peter deHaan 翻译/整理/编译：中文Flex例子