Flex中如何通过设置GridLines对象的horizontalAlternateFill样式交错显示LineSeries图表背景颜色的例子

原文 http://blog.minidx.com/2008/11/27/1652.html

接下来的例子演示了Flex中如何通过设置GridLines对象的horizontalAlternateFill样式，交错显示LineSeries图表背景颜色。

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

 

 

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

Download: main.mxml

1. <?xmlversion="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:XMLListCollection id="dp">
8.         <mx:source>
9.             <mx:XMLList>
10.                 <quote date="8/27/2007"open="40.38"close="40.81"/>
11.                 <quote date="8/24/2007"open="40.5"close="40.41"/>
12.                 <quote date="8/23/2007"open="40.82"close="40.6"/>
13.                 <quote date="8/22/2007"open="40.4"close="40.77"/>
14.                 <quote date="8/21/2007"open="40.41"close="40.13"/>
15.                 <quote date="8/20/2007"open="40.55"close="40.74"/>
16.                 <quote date="8/17/2007"open="40.18"close="40.32"/>
17.                 <quote date="8/16/2007"open="39.83"close="39.96"/>
18.                 <quote date="8/15/2007"open="40.22"close="40.18"/>
19.                 <quote date="8/14/2007"open="41.01"close="40.41"/>
20.                 <quote date="8/13/2007"open="41"close="40.83"/>
21.                 <quote date="8/10/2007"open="41.3"close="41.06"/>
22.                 <quote date="8/9/2007"open="39.9"close="40.75"/>
23.                 <quote date="8/8/2007"open="39.61"close="40.23"/>
24.                 <quote date="8/7/2007"open="39.08"close="39.42"/>
25.                 <quote date="8/6/2007"open="38.71"close="39.38"/>
26.                 <quote date="8/3/2007"open="39.47"close="38.75"/>
27.                 <quote date="8/2/2007"open="39.4"close="39.52"/>
28.                 <quote date="8/1/2007"open="40.29"close="39.58"/>
29.             </mx:XMLList>
30.         </mx:source>
31.     </mx:XMLListCollection>
32.  
33.     <mx:LineChart id="lineChart"
34.             showDataTips="true"
35.             dataProvider="{dp}"
36.             width="100%"
37.             height="100%">
38.  
39.         <mx:backgroundElements>
40.             <mx:GridLines>
41.                 <mx:horizontalAlternateFill>
42.                     <mx:SolidColor color="haloSilver"alpha="0.25"/>
43.                 </mx:horizontalAlternateFill>
44.             </mx:GridLines>
45.         </mx:backgroundElements>
46.  
47.         <!-- vertical axis -->
48.         <mx:verticalAxis>
49.             <mx:LinearAxis baseAtZero="false"title="Price"/>
50.         </mx:verticalAxis>
51.  
52.         <!-- horizontal axis -->
53.         <mx:horizontalAxis>
54.             <mx:CategoryAxis id="ca"categoryField="@date"title="Date"/>
55.         </mx:horizontalAxis>
56.  
57.         <!-- horizontal axis renderer -->
58.         <mx:horizontalAxisRenderers>
59.             <mx:AxisRenderer axis="{ca}"canDropLabels="true"/>
60.         </mx:horizontalAxisRenderers>
61.  
62.         <!-- series -->
63.         <mx:series>
64.             <mx:LineSeries yField="@open"form="curve"displayName="Open"/>
65.         </mx:series>
66.     </mx:LineChart>
67.  
68. </mx:Application>

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