flex 图表

来源：互联网发布：网络歌手怎么注册编辑：程序博客网时间：2024/04/30 16:44

flex 可视化组件中的包mx.charts包中，内置了9个图表类AreaChar,BarChar,BubbleChar,CandleStickChar,ColumnChar,HlOCChart,LineChar,PieChart,PlotChar.

图表中主要用到的属性有：

id ,height,width,series定义图表数据的Series(数据系列)对象数组

dataProvider 指定图表的数据提供程序

showDataTips 指定flex 是否显示图表的DataTip控件

horizontalAxis为X轴上的项定义标签，刻度线，数据位置

verticalAxis为y轴上的项定义标签，刻度线，数据位置

概念：数据系列

mx.charts.series 包中，每一个图表控件都有自己的数据系列。AreaSeries,Barseries,BubbleSeries,CandlestickSeries,ColumnSeries,HLOCSeries,PieSeries,PlotSeries,所有的数据系列都继承自mx.charts.chartClasses.Series类。

概念：坐标轴。

两大坐标轴类型：数据型坐标轴和类表型坐标轴。数字型坐标轴包括：DateTimeAxis,LinearAxis和LogAxis类别坐标轴包括:CategoryAxis

showDataTips="true" 是先不tip的提示.默认为false。

一个简单的柱状图的例子ColumnChar:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   [Bindable]
   public var revenueData:ArrayCollection = new ArrayCollection([
    {Product:"TV",Quantity:9501,Amout:90.2,Profit:89.34},
    {Product:"TV",Quantity:8243,Amout:50.3,Profit:67.35},
    {Product:"TV",Quantity:9021,Amout:45.87,Profit:63.65}
   ]);
  ]]>
</mx:Script>

<mx:Panel title="销售分析" textAlign="center">
  <mx:ColumnChart   id="rev_ColumnCht" height="100%" width="100%" dataProvider="{revenueData}" showDataTips="true">
   <mx:horizontalAxis>
    <mx:CategoryAxis categoryField="Product" title="产品"/>
   </mx:horizontalAxis>
   <mx:verticalAxis>
    <mx:LinearAxis title="销售额和利润"/>
   </mx:verticalAxis>
   <mx:series>
    <mx:ColumnSeries yField="Amout" displayName="销售总额人名币"/>
    <mx:ColumnSeries yField="Profit" displayName="利润(百万/人名币)"/>
   </mx:series>
  </mx:ColumnChart>
  <mx:Legend dataProvider="{rev_ColumnCht}"/>
</mx:Panel>
</mx:Application>

例子：线形图的例子(LineChart):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
  <![CDATA[
   import mx.charts.CategoryAxis;
   import mx.collections.ArrayCollection;
   [Bindable]
   private var webHitData:ArrayCollection = new ArrayCollection([
    {data:"2008-12-22",WebHits:39452},
    {data:"2008-12-23",WebHits:20003},
    {data:"2008-12-24",WebHits:60000},
    {data:"2008-12-25",WebHits:10000},
    {data:"2008-12-26",WebHits:20000}
   ]);
   public function dateParseFunction(val:String):Date{
    var aDate:Array = val.split("-");
    var newDay:Date = new Date(aDate[0],aDate[1]-1,aDate[2]);
    return newDay;
   }
  ]]>
</mx:Script>

<mx:Panel title="站点点击率分析" textAlign="center">
  <mx:LineChart id="wh_LineCht" height="100%" width="100%" dataProvider="{webHitData}" showDataTips="true">
   <mx:horizontalAxis>
    <mx:DateTimeAxis dataUnits="days" parseFunction="dateParseFunction" displayName="日期"/>
   </mx:horizontalAxis>
   <mx:series>
    <mx:LineSeries xField="data" yField="WebHits" displayName="点击量(次)"/>
   </mx:series>
  </mx:LineChart>
</mx:Panel>
</mx:Application>
例子：面积图例和线性图例是相同的：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
  <![CDATA[
   import mx.charts.CategoryAxis;
   import mx.collections.ArrayCollection;
   [Bindable]
   public var revData:ArrayCollection = new ArrayCollection([
    {Quarter:"Q1",ARev:56,BRev:45.23,CRev:41.34,DRev:67.23,Avr:100.50},
    {Quarter:"Q2",ARev:65,BRev:47.23,CRev:43.34,DRev:69.23,Avr:300},
    {Quarter:"Q3",ARev:59,BRev:48.23,CRev:49.34,DRev:72.23,Avr:400},
    {Quarter:"Q4",ARev:65,BRev:49.13,CRev:52.34,DRev:98.13,Avr:100},
   ]);
  ]]>
</mx:Script>

<mx:Panel title="站点点击率分析" textAlign="center">
  <mx:CartesianChart id="rev_columnCht" height="100%" width="100%" dataProvider="{revData}" showDataTips="true">
   <mx:horizontalAxis>
    <mx:CategoryAxis categoryField="Quarter"/>
   </mx:horizontalAxis>
   <mx:series>
    <mx:ColumnSeries yField="ARev" displayName="A品牌(百万/人名币)"/>
    <mx:ColumnSeries yField="BRev" displayName="B品牌(百万/人名币)"/>
    <mx:ColumnSeries yField="CRev" displayName="C品牌(百万/人名币)"/>
    <mx:ColumnSeries yField="DRev" displayName="D品牌(百万/人名币)"/>
    <mx:LineSeries yField="Avr" form="segment" displayName="平均销售(百万)"/>
   </mx:series>
  </mx:CartesianChart>
</mx:Panel>
</mx:Application>
图例：多数据系列混合图表样式

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
  <![CDATA[
   import mx.charts.CategoryAxis;
   import mx.collections.ArrayCollection;
   [Bindable]
   public var revData:ArrayCollection = new ArrayCollection([
    {Quarter:"Q1",ARev:56,BRev:45.23,CRev:41.34,DRev:67.23,Avr:100.50},
    {Quarter:"Q2",ARev:65,BRev:47.23,CRev:43.34,DRev:69.23,Avr:300},
    {Quarter:"Q3",ARev:59,BRev:48.23,CRev:49.34,DRev:72.23,Avr:400},
    {Quarter:"Q4",ARev:65,BRev:49.13,CRev:52.34,DRev:98.13,Avr:100},
   ]);
  ]]>
</mx:Script>

<mx:Panel title="站点点击率分析" textAlign="center">
  <mx:CartesianChart id="rev_columnCht" height="100%" width="100%" dataProvider="{revData}" showDataTips="true">
   <mx:horizontalAxis>
    <mx:CategoryAxis categoryField="Quarter"/>
   </mx:horizontalAxis>
   <mx:series>
    <mx:ColumnSet type="clustered">
     <mx:ColumnSeries yField="ARev" displayName="A品牌(百万/人名币)"/>
     <mx:ColumnSeries yField="BRev" displayName="B品牌(百万/人名币)"/>
     <mx:ColumnSeries yField="CRev" displayName="C品牌(百万/人名币)"/>
     <mx:ColumnSeries yField="DRev" displayName="D品牌(百万/人名币)"/>
    </mx:ColumnSet>
     <mx:LineSeries yField="Avr" form="segment" displayName="平均销售(百万)"/>
   </mx:series>
  </mx:CartesianChart>
  <mx:Legend dataProvider="{rev_columnCht}"/>
</mx:Panel>
</mx:Application>
坐标轴精讲：

cartesianChart继承了IAxis接口类型的属性HorizontalAxis和VerticalAxis,分别表示x轴和y轴上的项目标签,刻度线，数据位置。

flex 内置了4中IAxis 的是实现：类别坐标轴:CategoryAxis 和数字坐标轴：LinearAxis,LogAxis,DateTimeAxis三者具有相同的基类NumericAxis。

属性：

categoryField指定包含标签文本的数据提供程序的字段.

dataProvider 指定数据源

labelFunction指定用于自定义坐标轴标签的函数

Padding指定在屏幕上呈现数据时，添加到轴上任意一端的填充。

displayName坐标轴的名称

自定义坐标轴:

通过labelFunction函数

function function_name (labelValue:Object,PreviousValue:Object,axis:IAxis):xxxx{

return lableValue;

}

创建多坐标轴:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
   import mx.charts.CategoryAxis;
   import mx.collections.ArrayCollection;
   [Bindable]
   public var revData:ArrayCollection = new ArrayCollection([
    {Quarter:"Q1",ARev:56,BRev:45.23,CRev:41.34,DRev:67.23,Avr:100.50},
    {Quarter:"Q2",ARev:65,BRev:47.23,CRev:43.34,DRev:69.23,Avr:300},
    {Quarter:"Q3",ARev:59,BRev:48.23,CRev:49.34,DRev:72.23,Avr:400},
    {Quarter:"Q4",ARev:65,BRev:49.13,CRev:52.34,DRev:98.13,Avr:100},
   ]);
]]>
</mx:Script>

<mx:Panel title="站点点击率分析" textAlign="center">
   <mx:CartesianChart id="rev_columnCht" height="100%" width="100%" dataProvider="{revData}" showDataTips="true">
   <mx:horizontalAxis>
   <mx:CategoryAxis categoryField="Quarter"/>
    </mx:horizontalAxis>
    <mx:series>
      <mx:ColumnSeries yField="ARev" displayName="A品牌(百万/人名币)">
       <mx:verticalAxis>
       <mx:LinearAxis id="AmountAxis" title="销售总额(百万元)" autoAdjust="true" baseAtZero="true"/>
       </mx:verticalAxis>
      </mx:ColumnSeries>
      <mx:LineSeries yField="Avr" form="segment" displayName="平均销售(百万)">
      <mx:verticalAxis>
        <mx:LinearAxis id="QuantityAxis" title="销售数量（台数）" autoAdjust="true" baseAtZero="true"/>
      </mx:verticalAxis>
      </mx:LineSeries>
    </mx:series>
    <mx:verticalAxisRenderers>
      <mx:AxisRenderer axis="{AmountAxis}" placement="left"/>
      <mx:AxisRenderer axis="{QuantityAxis}" placement="right"/>
    </mx:verticalAxisRenderers>
   </mx:CartesianChart>
<mx:Legend dataProvider="{rev_columnCht}"/>
</mx:Panel>
</mx:Application>