flex 图表
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:
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}
]);
]]>
例子：线形图的例子(LineChart):
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;
}
]]>
例子：面积图例和线性图例是相同的：
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;
}
]]>
图例：混合类型图表
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},
]);
]]>
图例：多数据系列混合图表样式
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},
]);
]]>
坐标轴精讲：
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;
}
创建多坐标轴:
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},
]);
]]>