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

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