Flex 图表组件使用示例

?刚接触flex图表组件，在网上找了部分资料，现在整理一下，为以后留下相关资料

?

 
 

<?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,?
  
  
????????????????????{Month:"五月",Profit:1600,Expenses:600,?
  
  
????????????????????{Month:"六月",Profit:1800,Expenses:700,?
  
  
????????????????????{Month:"七月",Profit:1300,Expenses:320,?
  
  
????????????????]?
  
  
????????????);?
  
  
????????????//用于混合型图表的数据?
  
  
????????????[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>