LineChart结合xml实例-flex图表chart组件教程

     http://www.36ria.com/375  

    flex图表组件功能非常强大，是制作各类报表的利器，但是网上和书上关于这方面的教程非常的缺乏，而鄙人正好在最近的项目中要用到这组件，写下自己学习的心得.

先发下生成后的图表图

创建XMLListCollection数据源

1. <mx:XMLListCollectionid="dp"> 
2.         <mx:source> 
3.             <mx:XMLList> 
4.                 <quote day="1"act="40.29"close="39.58"tt="30"/> 
5.                 <quote day="2"act="39.4"close="39.52"tt="30"/> 
6.                 <quote day="3"act="59.47"close="38.75"tt="30"/> 
7.                 ...
8.                 ...
9.             </mx:XMLList> 
10.         </mx:source> 
11.     </mx:XMLListCollection>

这个XML清单不算复杂。day对应的就是x轴，后面的三个属性对应图上的三条线，而我们要比较的就是不同日期下，三条折线的趋势。接下来，我们重点来看如果构建LineChart组件。

创建LineChart,一步步讲解此组件的配置。

1. <mx:LineChartid="lineChart"showDataTips="true"dataProvider="{dp}"width="100%"height="100%"seriesFilters="[]">
2.   </mx:LineChart>

1. id:不用说，关键中的关键
2. showDataTips:是否显示提示
3. dataProvider:非常关键的属性，指向XML数据源
4. seriesFilters:值为数组，边线的阴影等

构建图表的背景,在mx:LineChart内添加如下代码：

1. <mx:backgroundElements> 
2.             <mx:GridLines direction="both"horizontalTickAligned="true"verticalTickAligned="false"
3.             verticalStroke="{vSolid}" horizontalStroke="{hSolid}"
4.             verticalFill="{vFill}" horizontalFill="{hFill}"
5.             verticalAlternateFill="{tFill}" horizontalAlternateFill="{tFill}"
6.             />
7.         </mx:backgroundElements>
8.  
9. <!--下面代码并非一定要放在mx:LineChart里面-->
10.     <mx:Stroke id="vSolid"weight="1"color="#333333"alpha="0.1"/>
11.     <mx:Stroke id="hSolid"weight="1"color="#ff0000"alpha="0.1"/>
12. <mx:SolidColor id="vFill"color="#D6DECE"alpha=".3"/>
13. <mx:SolidColor id="hFill"color="#F9E0E0"alpha=".3"/>    
14.     <mx:SolidColor id="tFill"color="#ffffff"alpha=".3"/>

我们在图中可以看到，图表的背景近似粉红加白色的表格背景，这重要是通过设置mx:GridLines ，我来说明下其属性所代表的含义。

1. direction:顾名思义为表格线的方向，一般设置both
2. verticalStroke:垂直边线样式，指向id为vSolid的
3. horizontalStroke:水平边线样式
4. verticalFill:垂直填充样式
5. horizontalFill:水平填充样式
6. verticalAlternateFill与horizontalAlternateFill:指的是间隔颜色，近似grid斑马线效果

有兴趣的朋友，可以对其进行下修改来确认其作用。

构建X、Y轴，将下面代码插入mx:LineChart

1. <mx:verticalAxis> 
2.             <mx:LinearAxis baseAtZero="false"title="Price"labelFunction="linearAxis_labelFunc"/> 
3.         </mx:verticalAxis>
4.         <mx:horizontalAxis> 
5.             <mx:CategoryAxis id="ca"categoryField="@day"title=""labelFunction="categoryAxis_labelFunc"/> 
6.         </mx:horizontalAxis>
7.         <mx:horizontalAxisRenderers> 
8.             <mx:AxisRenderer axis="{ca}"canDropLabels="true"/> 
9.         </mx:horizontalAxisRenderers>
10.  
11.         <mx:CurrencyFormatter id="currFormatter"precision="2"/>

1. privatevar _DropShadowFilter:DropShadowFilter =new DropShadowFilter(2,45, 0x000000,0.7, 2,2, 0.65,3, false,false);
2.     
3.             private functionlinearAxis_labelFunc(item:Object,prevValue:Object,axis:IAxis):String{ 
4.                 return currFormatter.format(item);
5.             }
6.     private functioncategoryAxis_labelFunc(item:Object,prevValue:Object,axis:CategoryAxis,categoryItem:Object):String{ 
7.                 return String(item) + '日';
8.             }

mx:verticalAxis，设置Y轴线。先来看下其属性含义

1. baseAtZero:Y轴线的起点是否强制从0开始。
2. title:Y轴线的标题
3. labelFunction:每一格标签的处理函数，categoryAxis_labelFunc函数将格式化数字

mx:horizontalAxis，设置X轴线（只是设置，真正的指派运行是其下mx:horizontalAxisRenderers ）。
mx:CategoryAxis将指定Y轴标签所对应得数据源，以及对标签数据的格式化函数，categoryAxis_labelFunc这个函数将数字日期后面都加上字符串“日”。因为属性不难理解，不予详细解释。

构建要比较的三条折线

1. <mx:series> 
2.             <mx:LineSeries id="L1"yField="@act"displayName="激活："lineStroke="{s1}"showDataEffect="{fadeIn}"hideDataEffect="{fadeOut}"filters="{[_DropShadowFilter]}"/>
3.             <mx:LineSeries yField="@close"displayName="Close"lineStroke="{s2}"showDataEffect="{fadeIn}"hideDataEffect="{fadeOut}"filters="{[_DropShadowFilter]}"/>
4.             <mx:LineSeries yField="@tt"displayName="tt"lineStroke="{s3}"showDataEffect="{fadeIn}"hideDataEffect="{fadeOut}"filters="{[_DropShadowFilter]}"/>
5.         </mx:series>
6.  
7.     <mx:Stroke id ="s1"color="#2E95BF"weight="1"/>
8.     <mx:Stroke id ="s2"color="#62C426"weight="1"/>
9.     <mx:Stroke id ="s3"color="#FF8C31"weight="1"/>
10.  
11.     <mx:Fade id="fadeOut"duration="1000"alphaFrom="1.0"alphaTo="0.0"/>
12.     <mx:Fade id="fadeIn"duration="1000"alphaFrom="0.0"alphaTo="1.0"/>

mx:LineSeries代表的就是一条折线，来看下其属性

1. id：地球人都知道就不说了
2. yField：对应xml数据源的属性名
3. displayName：显示的名字
4. lineStroke：线条样式
5. showDataEffect：鼠标到线条点上出现数据提示的时候的动画效果
6. hideDataEffect：鼠标离开线条点上隐藏数据提示的时候的动画效果
7. filters：这里显示边线阴影

完毕！！！！所有代码如下：

1. <?xmlversion="1.0"?> 
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="vertical"verticalAlign="middle"backgroundColor="white"creationComplete="//createFilters()"> 
3.  
4.     <mx:Script> 
5.         <![CDATA[
6.             import mx.charts.CategoryAxis;
7.             import mx.charts.chartClasses.IAxis;
8.  
9.     [Bindable]
10.     private var_DropShadowFilter:DropShadowFilter =new DropShadowFilter(2,45, 0x000000,0.7,2, 2,0.65,3, false,false);
11.     
12.             private functionlinearAxis_labelFunc(item:Object,prevValue:Object,axis:IAxis):String {
13.                 return currFormatter.format(item);
14.             }
15.     private functioncategoryAxis_labelFunc(item:Object,prevValue:Object,axis:CategoryAxis,categoryItem:Object):String {
16.                 return String(item) + '日';
17.             }
18.         ]]> 
19.     </mx:Script> 
20.  
21.     <mx:CurrencyFormatter id="currFormatter"precision="2"/> 
22.      
23.     <mx:Fade id="fadeOut"duration="1000"alphaFrom="1.0"alphaTo="0.0"/>
24.     <mx:Fade id="fadeIn"duration="1000"alphaFrom="0.0"alphaTo="1.0"/>
25.      
26.     <mx:XMLListCollection id="dp"> 
27.         <mx:source> 
28.             <mx:XMLList> 
29.                 <quote day="1"act="40.29"close="39.58"tt="30"/> 
30.                 <quote day="2"act="39.4"close="39.52"tt="30"/> 
31.                 <quote day="3"act="59.47"close="38.75"tt="30"/> 
32.                 <quote day="4"act="38.71"close="39.38"tt="30"/> 
33.                 <quote day="5"act="39.08"close="39.42"tt="30"/> 
34.                 <quote day="6"act="39.61"close="40.23"tt="40"/> 
35.                 <quote day="7"act="39.9"close="40.75"tt="30"/> 
36.                 <quote day="8"act="41.3"close="51.06"tt="30"/> 
37.                 <quote day="9"act="41"close="40.83"tt="30"/> 
38.                 <quote day="10"act="41.01"close="40.41"tt="50"/> 
39.                 <quote day="11"act="40.22"close="40.18"tt="30"/> 
40.                 <quote day="12"act="39.83"close="39.96"tt="30"/> 
41.                 <quote day="13"act="50.18"close="40.32"tt="30"/> 
42.                 <quote day="14"act="40.55"close="40.74"tt="30"/> 
43.                 <quote day="15"act="40.41"close="40.13"tt="30"/> 
44.                 <quote day="16"act="40.4"close="40.77"tt="20"/> 
45.                 <quote day="17"act="40.82"close="40.6"tt="30"/> 
46.                 <quote day="18"act="40.5"close="40.41"tt="30"/> 
47.                 <quote day="19"act="40.38"close="40.81"tt="30"/>
48.             </mx:XMLList> 
49.         </mx:source> 
50.     </mx:XMLListCollection> 
51.    
52.     <!-- Define Strokes -->
53.     <mx:Stroke id ="s1"color="#2E95BF"weight="1"/>
54.     <mx:Stroke id ="s2"color="#62C426"weight="1"/>
55.     <mx:Stroke id ="s3"color="#FF8C31"weight="1"/>
56.     <mx:Stroke id="vSolid"weight="1"color="#333333"alpha="0.1"/>
57.     <mx:Stroke id="hSolid"weight="1"color="#ff0000"alpha="0.1"/>
58. <mx:SolidColor id="vFill"color="#D6DECE"alpha=".3"/>
59. <mx:SolidColor id="hFill"color="#F9E0E0"alpha=".3"/>    
60.     <mx:SolidColor id="tFill"color="#ffffff"alpha=".3"/>   
61.    
62.     <mx:LineChart id="lineChart"showDataTips="true"dataProvider="{dp}"width="100%"height="100%"seriesFilters="[]">
63.         <mx:backgroundElements> 
64.             <mx:GridLines direction="both"horizontalTickAligned="true"verticalTickAligned="false"
65.             verticalStroke="{vSolid}" horizontalStroke="{hSolid}"
66.             verticalFill="{vFill}" horizontalFill="{hFill}"
67.             verticalAlternateFill="{tFill}" horizontalAlternateFill="{tFill}"
68.             />
69.         </mx:backgroundElements>
70.         <mx:verticalAxis> 
71.             <mx:LinearAxis baseAtZero="false"title="Price"labelFunction="linearAxis_labelFunc"/> 
72.         </mx:verticalAxis>
73.         <mx:horizontalAxis> 
74.             <mx:CategoryAxis id="ca"categoryField="@day"title=""labelFunction="categoryAxis_labelFunc"/> 
75.         </mx:horizontalAxis>
76.         <mx:horizontalAxisRenderers> 
77.             <mx:AxisRenderer axis="{ca}"canDropLabels="true"/> 
78.         </mx:horizontalAxisRenderers>
79.         <mx:series> 
80.             <mx:LineSeries id="L1"yField="@act"displayName="激活："lineStroke="{s1}"showDataEffect="{fadeIn}"hideDataEffect="{fadeOut}"filters="{[_DropShadowFilter]}"/>
81.             <mx:LineSeries yField="@close"displayName="Close"lineStroke="{s2}"showDataEffect="{fadeIn}"hideDataEffect="{fadeOut}"filters="{[_DropShadowFilter]}"/>
82.             <mx:LineSeries yField="@tt"displayName="tt"lineStroke="{s3}"showDataEffect="{fadeIn}"hideDataEffect="{fadeOut}"filters="{[_DropShadowFilter]}"/>
83.         </mx:series>
84.     </mx:LineChart> 
85.    <mx:RadioButton groupName="stocks"label="View Company A"
86.                 selected="true" click="lineChart.dataProvider=dp;"/>
87. </mx:Application>