Flex統(tǒng)計圖表控件用法指南
本文和大家重點討論一下Flex統(tǒng)計圖表控件的使用,Flex支持最常見的二維圖形,例如條狀圖,柱狀圖,餅圖,并且提供給我們對于圖表顯示的的極大控制。
Flex統(tǒng)計圖表控件
以圖表或是圖的方式顯示數(shù)據(jù)的能力可以使得Flex程序用戶的數(shù)據(jù)交互更為容易。與僅顯示簡單的數(shù)字數(shù)據(jù)表不同,我們可以顯示條狀圖,餅圖,線圖或是其他類型的圖表,并且可以使用顏色,標題以及二維圖形來表示我們的數(shù)據(jù)。
在這一部分我們會介紹Flex圖表,菜單數(shù)據(jù),以及我們可以在Flex中創(chuàng)建的其他類型的圖表。
關(guān)于圖表
數(shù)據(jù)表示可以使得我們簡化數(shù)據(jù)表示與數(shù)據(jù)關(guān)系的方式來表示數(shù)據(jù)。圖表是數(shù)據(jù)的一種類型,從而我們可以使用二維的圖形來表示我們的數(shù)據(jù)。Flex支持最常見的二維圖形,例如條狀圖,柱狀圖,餅圖,并且提供給我們對于圖表顯示的的極大控制。
一個簡單的圖表顯示單一的數(shù)據(jù)系列,在這里系列是一組相關(guān)的數(shù)據(jù)點。例如,一個數(shù)據(jù)系列也許是月度銷售收益,或者是一天的旅館占有率。下面的圖表顯示了過去六個月的與銷售收益相應(yīng)的數(shù)據(jù)系列:
另一種圖表也許會添加第二個數(shù)據(jù)系列。例如,我們也許會包含過去六個月的利潤。下面的圖表顯示了兩個數(shù)據(jù)系列,一個是銷售,一個是利潤:
定義圖表數(shù)據(jù)
圖表控件使用為圖表定義數(shù)據(jù)的dateProvider屬性。一個數(shù)據(jù)提供者(dateprovider)是一個對象的集合,與數(shù)組類似。圖表組件使用平的,或者是基于列表的,數(shù)據(jù)提供者,與一維數(shù)組類似。
一個數(shù)據(jù)提供者由兩部分組成:一個數(shù)據(jù)對象集合與API。數(shù)據(jù)提供者API是一個類必須實現(xiàn)的方法與屬性的集合,從而Flex組件可以將其看作數(shù)據(jù)提供者。#p#
Flex圖表類型
Flex支持最常見的一些圖表類型,包括條狀圖,線圖,餅圖以及其他的類型。這一部分描述Flex所提供的圖表集合。除了這些圖表類型以外,我們還可以擴展笛卡爾圖表控件還創(chuàng)建自定義的圖表。
區(qū)域圖表
我們使用圖表控件將數(shù)據(jù)表示為一個用與數(shù)據(jù)值相關(guān)的線來界定的區(qū)域。在線以下的區(qū)域用一種顏色或是一種類型來進行填充。我們可以用圖標或是符號來表示線上的每一個數(shù)據(jù)點,或者是不使用圖標而僅用單一的線。
下圖是一個區(qū)域圖表的例子:
Flex條狀圖
我們使用條狀圖控件來將數(shù)據(jù)表示為一系列的垂直條,垂直條的長度由數(shù)據(jù)值為決定。我們可以使用條狀圖控件來表示圖表的多樣性。
條狀圖實際上是柱狀圖順時針旋轉(zhuǎn)90度。所以條狀圖與柱狀圖有著許多同樣的特性。
Flex泡沫圖
我們使用泡沫圖對于每一個數(shù)據(jù)點用三個值來表示數(shù)據(jù):一個值決定他的X位置,一個值決定他的Y位置,而另一個值來決定圖表符號圖表上相對于其他數(shù)據(jù)點的尺寸。
<mx:BublleChart>標簽還有一個額外的屬性,maxRadius。這個屬性以象素值指定了最大的圖表元素的最大半徑。與最大值相關(guān)的數(shù)據(jù)點賦值為這個半徑值,而其他的數(shù)據(jù)點相對于最大值賦值為一個較小的半徑值。默認值為30象素。
如下圖為一個泡沫圖的例子:
#p#
Flex燭臺圖表
CandlestickChart控件將財經(jīng)數(shù)據(jù)表示為一個系列的燭臺,來表示數(shù)據(jù)系列的高,低,開放與關(guān)閉的值。燭臺上每一個垂直線的最高點與最低點表示數(shù)據(jù)點的最大值與最小值,而整個盒的最高點與最低點代表數(shù)據(jù)的開放值與關(guān)閉值,每一個燭臺的不同填充由數(shù)據(jù)點的關(guān)閉值是否高于或是低于開放值來決定。
如下圖是一個燭臺圖表的例子:
Flex列狀圖
ColumnChart控件將數(shù)據(jù)表示為一系列的垂直列,他的高度由數(shù)據(jù)值為決定。我們可以使用ColumnChart控件來創(chuàng)建各種類型的列狀圖,包含簡單列,簇列等。
一個簡單的圖表顯示一個單一的數(shù)據(jù)系列,在這里系列是一組相關(guān)的數(shù)據(jù)點。例如,一個數(shù)據(jù)系列也許是每個月的銷售收益,或者是每天的旅館出租率。下面的圖表顯示了一個相應(yīng)于過去四個季度的銷售增長比例的數(shù)據(jù)系列:
HighLowOpenClose圖表
HLOCChart控件將財經(jīng)數(shù)據(jù)表示為一系列的代表高,低,開放與關(guān)閉的數(shù)據(jù)系列值。垂直線的最高點與最低點代表數(shù)據(jù)點的最高值與最低值,而左邊的符號標記代表值的開始點,右邊的符號標記代表值的結(jié)束點。
HLOCChart控件并不需要代表開始值的數(shù)據(jù)點。相關(guān)的圖表CandlestickChart將簡單的數(shù)據(jù)表示為燭臺。我們使用HLOCSeries配合HLOCChart控件來為HighLowOpenClose圖表定義數(shù)據(jù)。下面的例子顯示了一個HighLowOpenClose圖表:
#p#
Flex線圖
LineChart控件將數(shù)據(jù)表示為了笛卡爾坐標系列中的一系列點,彼此之間由連續(xù)的線進行連接。我們可以使用圖標或是符號來表示線上的每一個數(shù)據(jù)點,或者不使用圖標顯示簡單的線。
下圖是一個簡單的線圖的例子:
Flex餅圖
我們可以使用PieChart來定義一個標準的餅圖。數(shù)據(jù)提供者的數(shù)據(jù)決定餅圖中相對于其他邊的每一個邊的尺寸。
下圖是一個簡單的餅圖的例子:
Flex可以讓我們創(chuàng)建圓環(huán)圖。圓環(huán)圖與餅圖相同,所不同只是前者有一個空心與類似輪子的形狀,而不是填充的圓。下圖是一個簡單的圓環(huán)圖的例子:
Flex塊圖
我們使用PlotChart控件來在笛卡爾坐標系中表示數(shù)據(jù),其中每一個數(shù)據(jù)點有一個決定其位置的X坐標與Y坐標。我們可以定義Flex所顯示的每一個數(shù)據(jù)點的形狀。
下圖是一個簡單的塊圖的例子:
【編輯推薦】
- 解析Flex4的十大變化
- Flex3到Flex4的轉(zhuǎn)變新特性值得關(guān)注
- Flex4Beta引入新元素功能更強大
- FlexBuilder3.0與Eclipse3.4的完美結(jié)合
- 技術(shù)分享 Flex4兼容模式如何移植到發(fā)布版本