Flex4 自带组件添加的 柱状图、饼状图等图表

原文：http://aimy-2012.iteye.com/blog/1890943

1.添加一个最简单的柱状图

Java代码  

1. <?xml version="1.0" encoding="utf-8"?>   
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
3.                xmlns:s="library://ns.adobe.com/flex/spark"   
4.                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">   
5.     <s:layout>   
6.         <s:BasicLayout/>   
7.     </s:layout>   
8.     <fx:Declarations>   
9.         <!-- 将非可视元素（例如服务、值对象）放在此处 -->   
10.     </fx:Declarations>   
11.     <fx:Script>   
12.         <![CDATA[   
13.             [Bindable]   
14.             private var arr:Array = [{id:1,city:'北京',money:1000,pay:300},{id:2,city:'上海',money:1200,pay:500},{id:3,city:'天津',money:800,pay:200}];   
15.                 
16.         ]]>   
17.     </fx:Script>   
18.     <mx:BarChart x="110" y="27" id="barchart1" dataProvider="{arr}" showDataTips="true" selectionMode="single">   
19.         <mx:series>   
20.             <mx:BarSeries displayName="收入" xField="money" />   
21.             <mx:BarSeries displayName="支出" xField="pay" />   
22.         </mx:series>   
23.         <mx:verticalAxis>   
24.             <mx:CategoryAxis categoryField="city" />   
25.         </mx:verticalAxis>   
26.     </mx:BarChart>   
27.     <mx:Legend dataProvider="{barchart1}"/>   
28. </s:Application>  

这个例子使用Array做为数据源，柱状图使用mx:BarChart组件。 

2.在上面例子的基础上，添加一个特效，就是图表默认是半透明的，在鼠标移到图标上时渐变为不透明，移开时渐变为半透明  

Java代码  

1. <?xml version="1.0" encoding="utf-8"?>   
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
3.                xmlns:s="library://ns.adobe.com/flex/spark"   
4.                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">   
5.     <s:layout>   
6.         <s:BasicLayout/>   
7.     </s:layout>   
8.     <fx:Declarations>   
9.         <!-- 将非可视元素（例如服务、值对象）放在此处 -->   
10.     </fx:Declarations>   
11.     <fx:Script>   
12.         <![CDATA[   
13.             [Bindable]   
14.             private var arr:Array = [{id:1,city:'北京',money:1000,pay:300},{id:2,city:'上海',money:1200,pay:500},{id:3,city:'天津',money:800,pay:200}];   
15.                 
16.         ]]>   
17.     </fx:Script>   
18.     <mx:BarChart alpha="0.5" x="110" y="27" id="barchart1" dataProvider="{arr}" showDataTips="true" selectionMode="single">   
19.         <mx:series>   
20.             <mx:BarSeries displayName="收入" xField="money" />   
21.             <mx:BarSeries displayName="支出" xField="pay" />   
22.         </mx:series>   
23.         <mx:verticalAxis>   
24.             <mx:CategoryAxis categoryField="city" />   
25.         </mx:verticalAxis>   
26.         <mx:rollOverEffect>   
27.             <s:Fade alphaFrom="0.5" alphaTo="1" duration="1000" />   
28.         </mx:rollOverEffect>   
29.         <mx:rollOutEffect>   
30.             <s:Fade alphaFrom="1" alphaTo="0.5" duration="1000" />   
31.         </mx:rollOutEffect>   
32.     </mx:BarChart>   
33.     <mx:Legend dataProvider="{barchart1}"/>   
34. </s:Application>  

3.添加一个最简单的饼状图  

Java代码  

1. <?xml version="1.0" encoding="utf-8"?>   
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
3.                xmlns:s="library://ns.adobe.com/flex/spark"   
4.                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">   
5.     <s:layout>   
6.         <s:BasicLayout/>   
7.     </s:layout>   
8.     <fx:Script>   
9.         <![CDATA[   
10.             [Bindable]   
11.             private var arr:Array = [{id:1,city:'北京',money:1000,pay:300},{id:2,city:'上海',money:1200,pay:500},{id:3,city:'天津',money:800,pay:200}];   
12.                 
13.         ]]>   
14.     </fx:Script>     
15.     <fx:Declarations>   
16.         <!-- 将非可视元素（例如服务、值对象）放在此处 -->   
17.     </fx:Declarations>   
18.     <mx:PieChart x="110" y="51" id="piechart1" dataProvider="{arr}" showAllDataTips="true" selectionMode="single">   
19.         <mx:series>   
20.             <mx:PieSeries displayName="Series 1" field="money" labelPosition="callout" labelField="city" nameField="city" />   
21.         </mx:series>   
22.     </mx:PieChart>   
23.     <mx:Legend dataProvider="{piechart1}" direction="horizontal" labelPlacement="right"  />   
24. </s:Application>  

这里需要说明一下mx:PieSeries标签里面的几个属性：labelField和labelPosition分别是指饼图每块显示的内容和位置，nameField是指图例Legend显示的内容. 

4.添加一个竖版柱状图  

Java代码  

1. <?xml version="1.0" encoding="utf-8"?>   
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
3.                xmlns:s="library://ns.adobe.com/flex/spark"   
4.                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">   
5.     <s:layout>   
6.         <s:BasicLayout/>   
7.     </s:layout>   
8.     <fx:Script>   
9.         <![CDATA[   
10.             [Bindable]   
11.             private var arr:Array = [{id:1,city:'北京',money:1000,pay:300},{id:2,city:'上海',money:1200,pay:500},{id:3,city:'天津',money:800,pay:200}];   
12.                 
13.         ]]>   
14.     </fx:Script>   
15.     <fx:Declarations>   
16.         <!-- 将非可视元素（例如服务、值对象）放在此处 -->   
17.     </fx:Declarations>   
18.     <mx:ColumnChart x="100" y="90" id="columnchart1" dataProvider="{arr}" showDataTips="true" selectionMode="single">   
19.         <mx:horizontalAxis>   
20.             <mx:CategoryAxis categoryField="city" />   
21.         </mx:horizontalAxis>   
22.         <mx:series>   
23.             <mx:ColumnSeries displayName="收入" yField="money"/>   
24.             <mx:ColumnSeries displayName="支出" yField="pay"/>   
25.         </mx:series>   
26.     </mx:ColumnChart>   
27.     <mx:Legend dataProvider="{columnchart1}"/>   
28. </s:Application>  

跟第一个例子非常相似，只是使用的组件是mx:ColumnChart