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]
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:AreaChart 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:AreaSeries xField="data" yField="WebHits" displayName="点击量(次)"/>
</mx:series>
</mx:AreaChart>
</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>