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

发布于，归属于flex。 前9个座位已被强势霸占！ 共有4,382人围观    

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

先发下生成后的图表图
chart

创建XMLListCollection数据源

  1. <mx:XMLListCollection id="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:LineChart id="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. private var _DropShadowFilter:DropShadowFilter = new DropShadowFilter(2, 45, 0x000000, 0.7, 2, 2, 0.65, 3, false, false);
  2.     
  3.             private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String { 
  4.                 return currFormatter.format(item);
  5.             }
  6.     private function categoryAxis_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. <?xml version="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 function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
  13.                 return currFormatter.format(item);
  14.             }
  15.     private function categoryAxis_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>

写这篇文章花了我不下2个小时，希望可以有做报表的朋友以帮助，有问题可以给在下留言，虽然我也是新手，但非常愿意与同仁探讨flex方面的问题。

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

9个座位已被强势霸占！

  1. coser123

    感谢~~~~~

  2. tuo_bing

    //我想在这里添加绑定的数据 ，并设置 X轴能显示的最大值，如何处理 ？ 好像不能同时存在于这里(中)

    明河共影回复于 2010年03月24日 9:18

    咋我不明白你意思呢。

  3. dyc20

    很好的文章 谢谢

  4. jingling

    你的这个例子背景有一段英文“flex data visualization trial” 不知道该怎么去掉呢?

    明河共影回复于 2010年08月23日 8:56

    ?我自己运行的时候没看到这段英文。我也没在代码上加入这段文字….有点诡异。

  5. hfyzycn

    一个页面中同时邦定多个报表怎么会报错呀

    明河共影回复于 2010年09月20日 3:29

    报的具体是什么错误呢？

  6. jimmy

    如果是时间为00:00到24:00的时候，xml中的数据时间为00:00到24:00中的一些，纵轴为随机数，那这个怎么对应呢？

同类