饼状图与柱状图的使用

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

?

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"                 xmlns:s="library://ns.adobe.com/flex/spark"                 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">     <s:layout>         <s:BasicLayout/>     </s:layout>     <fx:Declarations>         <!-- 将非可视元素（例如服务、值对象）放在此处 -->     </fx:Declarations>     <fx:Script>         <![CDATA[             [Bindable]             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}];                        ]]>     </fx:Script>     <mx:BarChart x="110" y="27" id="barchart1" dataProvider="{arr}" showDataTips="true" selectionMode="single">         <mx:series>             <mx:BarSeries displayName="收入" xField="money" />             <mx:BarSeries displayName="支出" xField="pay" />         </mx:series>         <mx:verticalAxis>             <mx:CategoryAxis categoryField="city" />         </mx:verticalAxis>     </mx:BarChart>     <mx:Legend dataProvider="{barchart1}"/> </s:Application>

 

这个例子使用Array做为数据源，柱状图使用mx:BarChart组件，这个例子很简单，就不讲解了

 

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

?

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"                 xmlns:s="library://ns.adobe.com/flex/spark"                 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">     <s:layout>         <s:BasicLayout/>     </s:layout>     <fx:Declarations>         <!-- 将非可视元素（例如服务、值对象）放在此处 -->     </fx:Declarations>     <fx:Script>         <![CDATA[             [Bindable]             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}];                        ]]>     </fx:Script>     <mx:BarChart alpha="0.5" x="110" y="27" id="barchart1" dataProvider="{arr}" showDataTips="true" selectionMode="single">         <mx:series>             <mx:BarSeries displayName="收入" xField="money" />             <mx:BarSeries displayName="支出" xField="pay" />         </mx:series>         <mx:verticalAxis>             <mx:CategoryAxis categoryField="city" />         </mx:verticalAxis>         <mx:rollOverEffect>             <s:Fade alphaFrom="0.5" alphaTo="1" duration="1000" />         </mx:rollOverEffect>         <mx:rollOutEffect>             <s:Fade alphaFrom="1" alphaTo="0.5" duration="1000" />         </mx:rollOutEffect>     </mx:BarChart>     <mx:Legend dataProvider="{barchart1}"/> </s:Application>

 

 

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

?

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"                 xmlns:s="library://ns.adobe.com/flex/spark"                 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">     <s:layout>         <s:BasicLayout/>     </s:layout>     <fx:Script>         <![CDATA[             [Bindable]             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}];                        ]]>     </fx:Script>       <fx:Declarations>         <!-- 将非可视元素（例如服务、值对象）放在此处 -->     </fx:Declarations>     <mx:PieChart x="110" y="51" id="piechart1" dataProvider="{arr}" showAllDataTips="true" selectionMode="single">         <mx:series>             <mx:PieSeries displayName="Series 1" field="money" labelPosition="callout" labelField="city" nameField="city" />         </mx:series>     </mx:PieChart>     <mx:Legend dataProvider="{piechart1}" direction="horizontal" labelPlacement="right"  /> </s:Application>

 

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

 

4.添加一个竖版柱状图

?

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"                 xmlns:s="library://ns.adobe.com/flex/spark"                 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">     <s:layout>         <s:BasicLayout/>     </s:layout>     <fx:Script>         <![CDATA[             [Bindable]             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}];                        ]]>     </fx:Script>     <fx:Declarations>         <!-- 将非可视元素（例如服务、值对象）放在此处 -->     </fx:Declarations>     <mx:ColumnChart x="100" y="90" id="columnchart1" dataProvider="{arr}" showDataTips="true" selectionMode="single">         <mx:horizontalAxis>             <mx:CategoryAxis categoryField="city" />         </mx:horizontalAxis>         <mx:series>             <mx:ColumnSeries displayName="收入" yField="money"/>             <mx:ColumnSeries displayName="支出" yField="pay"/>         </mx:series>     </mx:ColumnChart>     <mx:Legend dataProvider="{columnchart1}"/> </s:Application>