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

时间：2021-03-30 22:06:45
     http://www.36ria.com/375       flex图表组件功能非常强大，是制作各类报表的利器，但是网上和书上关于这方面的教程非常的缺乏，而鄙人正好在最近的项目中要用到这组件，写下自己学习的心得.

先发下生成后的图表图
LineChart结合xml实例-flex图表chart组件教程

创建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 =newDropShadowFilter(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>
标签：

相关文章