新聞中心
本文向大家簡單介紹一下如何使用Flex圖表組件,與僅顯示簡單的數(shù)字?jǐn)?shù)據(jù)表不同,我們可以顯示條狀圖,餅圖,線圖或是其他類型的Flex圖表,并且可以使用顏色,標(biāo)題以及二維圖形來表示我們的數(shù)據(jù)。

成都創(chuàng)新互聯(lián)是專業(yè)的社旗網(wǎng)站建設(shè)公司,社旗接單;提供成都做網(wǎng)站、網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行社旗網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!
使用Flex圖表組件
以Flex圖表或是圖的方式顯示數(shù)據(jù)的能力可以使得Flex程序用戶的數(shù)據(jù)交互更為容易。與僅顯示簡單的數(shù)字?jǐn)?shù)據(jù)表不同,我們可以顯示條狀圖,餅圖,線圖或是其他類型的Flex圖表,并且可以使用顏色,標(biāo)題以及二維圖形來表示我們的數(shù)據(jù)。
在這一部分我們會(huì)介紹Flex圖表,菜單數(shù)據(jù),以及我們可以在Flex中創(chuàng)建的其他類型的Flex圖表。
關(guān)于Flex圖表
數(shù)據(jù)表示可以使得我們簡化數(shù)據(jù)表示與數(shù)據(jù)關(guān)系的方式來表示數(shù)據(jù)。Flex圖表是數(shù)據(jù)的一種類型,從而我們可以使用二維的圖形來表示我們的數(shù)據(jù)。Flex支持最常見的二維圖形,例如條狀圖,柱狀圖,餅圖,并且提供給我們對(duì)于Flex圖表顯示的的極大控制。
一個(gè)簡單的Flex圖表顯示單一的數(shù)據(jù)系列,在這里系列是一組相關(guān)的數(shù)據(jù)點(diǎn)。例如,一個(gè)數(shù)據(jù)系列也許是月度銷售收益,或者是一天的旅館占有率。下面的Flex圖表顯示了過去六個(gè)月的與銷售收益相應(yīng)的數(shù)據(jù)系列:
另一種Flex圖表也許會(huì)添加第二個(gè)數(shù)據(jù)系列。例如,我們也許會(huì)包含過去六個(gè)月的利潤。下面的Flex圖表顯示了兩個(gè)數(shù)據(jù)系列,一個(gè)是銷售,一個(gè)是利潤:
#p#
定義Flex圖表數(shù)據(jù)
Flex圖表控件使用為Flex圖表定義數(shù)據(jù)的dateProvider屬性。一個(gè)數(shù)據(jù)提供者(dateprovider)是一個(gè)對(duì)象的集合,與數(shù)組類似。Flex圖表組件使用平的,或者是基于列表的,數(shù)據(jù)提供者,與一維數(shù)組類似。
一個(gè)數(shù)據(jù)提供者由兩部分組成:一個(gè)數(shù)據(jù)對(duì)象集合與API。數(shù)據(jù)提供者API是一個(gè)類必須實(shí)現(xiàn)的方法與屬性的集合,從而Flex組件可以將其看作數(shù)據(jù)提供者。
Flex圖表類型
Flex支持最常見的一些Flex圖表類型,包括條狀圖,線圖,餅圖以及其他的類型。這一部分描述Flex所提供的Flex圖表集合。除了這些Flex圖表類型以外,我們還可以擴(kuò)展笛卡爾Flex圖表控件還創(chuàng)建自定義的Flex圖表。
區(qū)域Flex圖表
我們使用Flex圖表控件將數(shù)據(jù)表示為一個(gè)用與數(shù)據(jù)值相關(guān)的線來界定的區(qū)域。在線以下的區(qū)域用一種顏色或是一種類型來進(jìn)行填充。我們可以用圖標(biāo)或是符號(hào)來表示線上的每一個(gè)數(shù)據(jù)點(diǎn),或者是不使用圖標(biāo)而僅用單一的線。
下圖是一個(gè)區(qū)域Flex圖表的例子:
條狀圖
我們使用條狀圖控件來將數(shù)據(jù)表示為一系列的垂直條,垂直條的長度由數(shù)據(jù)值為決定。我們可以使用條狀圖控件來表示Flex圖表的多樣性。
條狀圖實(shí)際上是柱狀圖順時(shí)針旋轉(zhuǎn)90度。所以條狀圖與柱狀圖有著許多同樣的特性。
泡沫圖
我們使用泡沫圖對(duì)于每一個(gè)數(shù)據(jù)點(diǎn)用三個(gè)值來表示數(shù)據(jù):一個(gè)值決定他的X位置,一個(gè)值決定他的Y位置,而另一個(gè)值來決定Flex圖表符號(hào)Flex圖表上相對(duì)于其他數(shù)據(jù)點(diǎn)的尺寸。
如下圖為一個(gè)泡沫圖的例子:
#p#
燭臺(tái)圖表
CandlestickChart控件將財(cái)經(jīng)數(shù)據(jù)表示為一個(gè)系列的燭臺(tái),來表示數(shù)據(jù)系列的高,低,開放與關(guān)閉的值。燭臺(tái)上每一個(gè)垂直線的***點(diǎn)與***點(diǎn)表示數(shù)據(jù)點(diǎn)的***值與最小值,而整個(gè)盒的***點(diǎn)與***點(diǎn)代表數(shù)據(jù)的開放值與關(guān)閉值,每一個(gè)燭臺(tái)的不同填充由數(shù)據(jù)點(diǎn)的關(guān)閉值是否高于或是低于開放值來決定。
如下圖是一個(gè)燭臺(tái)Flex圖表的例子:
列狀圖
ColumnChart控件將數(shù)據(jù)表示為一系列的垂直列,他的高度由數(shù)據(jù)值為決定。我們可以使用ColumnChart控件來創(chuàng)建各種類型的列狀圖,包含簡單列,簇列等。
一個(gè)簡單的Flex圖表顯示一個(gè)單一的數(shù)據(jù)系列,在這里系列是一組相關(guān)的數(shù)據(jù)點(diǎn)。例如,一個(gè)數(shù)據(jù)系列也許是每個(gè)月的銷售收益,或者是每天的旅館出租率。下面的Flex圖表顯示了一個(gè)相應(yīng)于過去四個(gè)季度的銷售增長比例的數(shù)據(jù)系列:
HighLowOpenCloseFlex圖表
HLOCChart控件將財(cái)經(jīng)數(shù)據(jù)表示為一系列的代表高,低,開放與關(guān)閉的數(shù)據(jù)系列值。垂直線的***點(diǎn)與***點(diǎn)代表數(shù)據(jù)點(diǎn)的***值與***值,而左邊的符號(hào)標(biāo)記代表值的開始點(diǎn),右邊的符號(hào)標(biāo)記代表值的結(jié)束點(diǎn)。
HLOCChart控件并不需要代表開始值的數(shù)據(jù)點(diǎn)。相關(guān)的Flex圖表CandlestickChart將簡單的數(shù)據(jù)表示為燭臺(tái)。我們使用HLOCSeries配合HLOCChart控件來為HighLowOpenCloseFlex圖表定義數(shù)據(jù)。下面的例子顯示了一個(gè)HighLowOpenCloseFlex圖表:
#p#
線圖
LineChart控件將數(shù)據(jù)表示為了笛卡爾坐標(biāo)系列中的一系列點(diǎn),彼此之間由連續(xù)的線進(jìn)行連接。我們可以使用圖標(biāo)或是符號(hào)來表示線上的每一個(gè)數(shù)據(jù)點(diǎn),或者不使用圖標(biāo)顯示簡單的線。
下圖是一個(gè)簡單的線圖的例子:
餅圖
我們可以使用PieChart來定義一個(gè)標(biāo)準(zhǔn)的餅圖。數(shù)據(jù)提供者的數(shù)據(jù)決定餅圖中相對(duì)于其他邊的每一個(gè)邊的尺寸。
下圖是一個(gè)簡單的餅圖的例子:
Flex可以讓我們創(chuàng)建圓環(huán)圖。圓環(huán)圖與餅圖相同,所不同只是前者有一個(gè)空心與類似輪子的形狀,而不是填充的圓。下圖是一個(gè)簡單的圓環(huán)圖的例子:
塊圖
我們使用PlotChart控件來在笛卡爾坐標(biāo)系中表示數(shù)據(jù),其中每一個(gè)數(shù)據(jù)點(diǎn)有一個(gè)決定其位置的X坐標(biāo)與Y坐標(biāo)。我們可以定義Flex所顯示的每一個(gè)數(shù)據(jù)點(diǎn)的形狀。
下圖是一個(gè)簡單的塊圖的例子:
【編輯推薦】
- Flex圖表組件大全
- Flex基礎(chǔ) 創(chuàng)建***個(gè)Flex項(xiàng)目
- 解析Flex事件執(zhí)行流程
- FlexBuilder3.0與Eclipse3.4的***結(jié)合
- 學(xué)習(xí)筆記 FlexBuilder2.0中如何使用基于Lists的控件
新聞標(biāo)題:Flex圖表組件使用指南
分享URL:http://fisionsoft.com.cn/article/cdgehdc.html


咨詢
建站咨詢
