FLEX 圖表設計及操作

本例演示了線型圖表、圓餅型圖標、區域型圖表、條型圖表、泡沫型圖表以及混合型圖表。

 

 截圖如下所示：

==================================================================================================

 1、線型圖表                                 2、圓餅型圖表

 

  3、區域型圖表                        　　　　　　　　 4、條型圖表         

   

 5、泡沫型 圖表                                  6、混合型圖表

================================================================================================

源碼如下所示：

================================================================================================   

<?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" height="1246" width="1219">
 <s:layout>
  <s:BasicLayout/>
 </s:layout>
  <fx:Style>
     @namespace s "library://ns.adobe.com/flex/spark";
     @namespace mx "library://ns.adobe.com/flex/mx";
   #bubblechart,#barchart,#pieChart
  {
      fontFamily:Arial;
      fontSize:15;
      color:#FF0033;
  }
  #colChart
  {
      gutterLeft:80;
      gutterRight:50;
      gutterBottom:50;
      paddingTop:20;
  }
 </fx:Style>
 
 <fx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   
   [Bindable]
   public var expenses:ArrayCollection = new ArrayCollection(
    [
     {Month:"一月",Profit:2000,Expenses:1500,Amount:450},
     {Month:"二月",Profit:1000,Expenses:200,Amount:600},
     {Month:"三月",Profit:1500,Expenses:500,Amount:300},
     {Month:"四月",Profit:1200,Expenses:300,Amount:300},
     {Month:"五月",Profit:1600,Expenses:600,Amount:300},
     {Month:"六月",Profit:1800,Expenses:700,Amount:300},
     {Month:"七月",Profit:1300,Expenses:320,Amount:300},
    ]
   );
//用於混合型圖表的數據
   [Bindable]
   public var SMITH:Array = [
    {date:"2008-08-22",point:45.87},
    {date:"2008-08-23",point:45.74},
    {date:"2008-08-24",point:45.77},
    {date:"2008-08-25",point:46.06}
     ];
   [Bindable]
   public var DECKER:Array = [
    {date:"2008-08-22",point:45.59},
    {date:"2008-08-23",point:45.3},
    {date:"2008-08-24",point:46.71},
    {date:"2008-08-25",point:46.88}
   ];
   
  ]]>  
 </fx:Script>
 
 <fx:Declarations>
  <!-- 將非可視元素（例如服務、值對象）放在此處 -->
 </fx:Declarations>
 
 <!-- 線圖 -->
 <mx:Panel title="線圖" width="322" height="323">  
  <mx:LineChart id="lineChart" dataProvider="{expenses}" showDataTips="true" width="272" height="224">
   <mx:horizontalAxis>
    <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month"/>
   </mx:horizontalAxis>
   <mx:series>
    <mx:LineSeries yField="Profit" displayName="利潤"/>
    <mx:LineSeries yField="Expenses" displayName="費用"/>
   </mx:series>
  </mx:LineChart>
  <mx:Legend dataProvider="{lineChart}"/>
 </mx:Panel>
 
 <!-- 餅圖 -->
 <s:Panel x="354" y="-1" width="329" height="324" title="餅圖">
  <mx:PieChart x="79" y="61" id="pieChart" dataProvider="{expenses}" showDataTips="true" width="212" height="205">
   <mx:series>
    <mx:PieSeries displayName="Series 1" field="Expenses" nameField="Month" labelField="利潤"/>
   </mx:series>
  </mx:PieChart>
  <mx:Legend dataProvider="{pieChart}"/>
 </s:Panel>
 
 <!-- 區域圖表 -->
 <mx:Panel title="區域圖表" x="709" y="2" width="307" height="321">  
   <!-- showDataTips表示鼠標移動到該點上會顯示提示信息 -->
   <mx:AreaChart id="myChart" dataProvider="{expenses}" showDataTips="true" width="262" height="215">   
    <mx:horizontalAxis>
     <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month"/>
    </mx:horizontalAxis>   
    <mx:series>
     <mx:AreaSeries yField="Profit" displayName="利潤"/>
    </mx:series>   
   </mx:AreaChart>  
   <mx:Legend dataProvider="{myChart}"/>  
 </mx:Panel>
 
 <!-- 條形圖表 -->
 <s:Panel x="0" y="353" width="320" height="466" title="條形圖表">
  <mx:BarChart x="10" y="52" id="barchart" width="292" height="350" dataProvider="{expenses}">
   <mx:verticalAxis>
    <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month"/>
   </mx:verticalAxis>
   <mx:series>
    <mx:BarSeries displayName="利潤" xField="Profit" yField="Month"/>
    <mx:BarSeries displayName="費用" xField="Expenses" yField="Month"/>
   </mx:series>
  </mx:BarChart>
  <mx:Legend dataProvider="{barchart}"/>
 </s:Panel>
 
 <!-- 泡沫圖表 -->
 <s:Panel x="354" y="353" width="341" height="470" title="泡沫型圖表">
  <mx:BubbleChart x="22" y="69" id="bubblechart" width="295" height="329"
   minRadius="1" maxRadius="50" dataProvider="{expenses}" showDataTips="true">
   <mx:series>
    <mx:BubbleSeries displayName="Profit" xField="Profit" yField="Expenses" radiusField="Amount"/>
   </mx:series>
  </mx:BubbleChart>
  <mx:Legend dataProvider="{bubblechart}"/>
 </s:Panel>
 
 <!-- 混合型圖表 -->
 <s:Panel x="709" y="353" width="360" height="469" title="混合型圖表">
  <mx:ColumnChart id="colChart" dataProvider="{SMITH}" showDataTips="true" width="332">
   <mx:horizontalAxis>
    <mx:CategoryAxis categoryField="date"/>
   </mx:horizontalAxis>
   <mx:verticalAxis>
    <mx:LinearAxis minimum="45" maximum="47"/>
   </mx:verticalAxis>
   <mx:series>
    <mx:ColumnSeries dataProvider="{SMITH}" xField="date" yField="point" displayName="SMITH">
    </mx:ColumnSeries>
    <mx:LineSeries dataProvider="{DECKER}" xField="date" yField="point" displayName="DECKER">     
    </mx:LineSeries>
   </mx:series>
  </mx:ColumnChart>
 </s:Panel>
 
</s:Application>