使用Flex圖表組件

1、使用Flex圖表組件2009-05-09 13:25以圖表或是圖的方式顯示數(shù)據(jù)的能力可以使得Flex程序用戶的數(shù)據(jù)交互更為容易。與僅顯示簡(jiǎn)單的數(shù)字?jǐn)?shù)據(jù)表不同，我們可以顯示條狀圖，餅圖，線圖或是其他類型的圖表，并且可以使用顏色，標(biāo)題以及二維圖形來(lái)表示我們的數(shù)據(jù)。在這一部分我們會(huì)介紹Flex圖表，菜單數(shù)據(jù)，以及我們可以在Flex中創(chuàng)建的其他類型的圖表。 關(guān)于圖表數(shù)據(jù)表示可以使得我們簡(jiǎn)化數(shù)據(jù)表示與數(shù)據(jù)關(guān)系的方式來(lái)表示數(shù)據(jù)。圖表是數(shù)據(jù)的一種類型，從而我們可以使用二維的圖形來(lái)表示我們的數(shù)據(jù)。Flex支持最常見的二維圖形，例如條狀圖，柱狀圖，餅圖，并且提供給我們對(duì)于圖表顯示的的極大控制。一個(gè)簡(jiǎn)單的圖表顯示

2、單一的數(shù)據(jù)系列，在這里系列是一組相關(guān)的數(shù)據(jù)點(diǎn)。例如，一個(gè)數(shù)據(jù)系列也許是月度銷售收益，或者是一天的旅館占有率。下面的圖表顯示了過(guò)去六個(gè)月的與銷售收益相應(yīng)的數(shù)據(jù)系列：另一種圖表也許會(huì)添加第二個(gè)數(shù)據(jù)系列。例如，我們也許會(huì)包含過(guò)去六個(gè)月的利潤(rùn)。下面的圖表顯示了兩個(gè)數(shù)據(jù)系列，一個(gè)是銷售，一個(gè)是利潤(rùn)：定義圖表數(shù)據(jù)圖表控件使用為圖表定義數(shù)據(jù)的dateProvider屬性。一個(gè)數(shù)據(jù)提供者(date provider)是一個(gè)對(duì)象的集合，與數(shù)組類似。圖表組件使用平的，或者是基于列表的，數(shù)據(jù)提供者，與一維數(shù)組類似。一個(gè)數(shù)據(jù)提供者由兩部分組成：一個(gè)數(shù)據(jù)對(duì)象集合與API。數(shù)據(jù)提供者API是一個(gè)類必須實(shí)現(xiàn)的方法與屬性的集

3、合，從而Flex組件可以將其看作數(shù)據(jù)提供者。圖表類型Flex支持最常見的一些圖表類型，包括條狀圖，線圖，餅圖以及其他的類型。這一部分描述Flex所提供的圖表集合。除了這些圖表類型以外，我們還可以擴(kuò)展笛卡爾圖表控件還創(chuàng)建自定義的圖表。區(qū)域圖表我們使用圖表控件將數(shù)據(jù)表示為一個(gè)用與數(shù)據(jù)值相關(guān)的線來(lái)界定的區(qū)域。在線以下的區(qū)域用一種顏色或是一種類型來(lái)進(jìn)行填充。我們可以用圖標(biāo)或是符號(hào)來(lái)表示線上的每一個(gè)數(shù)據(jù)點(diǎn)，或者是不使用圖標(biāo)而僅用單一的線。下圖是一個(gè)區(qū)域圖表的例子：條狀圖我們使用條狀圖控件來(lái)將數(shù)據(jù)表示為一系列的垂直條，垂直條的長(zhǎng)度由數(shù)據(jù)值為決定。我們可以使用條狀圖控件來(lái)表示圖表的多樣性。條狀圖實(shí)際上是柱狀

4、圖順時(shí)針旋轉(zhuǎn)90度。所以條狀圖與柱狀圖有著許多同樣的特性。泡沫圖我們使用泡沫圖對(duì)于每一個(gè)數(shù)據(jù)點(diǎn)用三個(gè)值來(lái)表示數(shù)據(jù)：一個(gè)值決定他的X位置，一個(gè)值決定他的Y位置，而另一個(gè)值來(lái)決定圖表符號(hào)圖表上相對(duì)于其他數(shù)據(jù)點(diǎn)的尺寸。標(biāo)簽還有一個(gè)額外的屬性，maxRadius。這個(gè)屬性以象素值指定了最大的圖表元素的最大半徑。與最大值相關(guān)的數(shù)據(jù)點(diǎn)賦值為這個(gè)半徑值，而其他的數(shù)據(jù)點(diǎn)相對(duì)于最大值賦值為一個(gè)較小的半徑值。默認(rèn)值為30象素。如下圖為一個(gè)泡沫圖的例子：燭臺(tái)圖表CandlestickChart控件將財(cái)經(jīng)數(shù)據(jù)表示為一個(gè)系列的燭臺(tái)，來(lái)表示數(shù)據(jù)系列的高，低，開放與關(guān)閉的值。燭臺(tái)上每一個(gè)垂直線的最高點(diǎn)與最低點(diǎn)表示數(shù)據(jù)點(diǎn)的最

5、大值與最小值，而整個(gè)盒的最高點(diǎn)與最低點(diǎn)代表數(shù)據(jù)的開放值與關(guān)閉值，每一個(gè)燭臺(tái)的不同填充由數(shù)據(jù)點(diǎn)的關(guān)閉值是否高于或是低于開放值來(lái)決定。如下圖是一個(gè)燭臺(tái)圖表的例子：列狀圖ColumnChart控件將數(shù)據(jù)表示為一系列的垂直列，他的高度由數(shù)據(jù)值為決定。我們可以使用ColumnChart控件來(lái)創(chuàng)建各種類型的列狀圖，包含簡(jiǎn)單列，簇列等。一個(gè)簡(jiǎn)單的圖表顯示一個(gè)單一的數(shù)據(jù)系列，在這里系列是一組相關(guān)的數(shù)據(jù)點(diǎn)。例如，一個(gè)數(shù)據(jù)系列也許是每個(gè)月的銷售收益，或者是每天的旅館出租率。下面的圖表顯示了一個(gè)相應(yīng)于過(guò)去四個(gè)季度的銷售增長(zhǎng)比例的數(shù)據(jù)系列：HighLowOpenClose圖表HLOCChart控件將財(cái)經(jīng)數(shù)據(jù)表示為一系

6、列的代表高，低，開放與關(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)的圖表CandlestickChart將簡(jiǎn)單的數(shù)據(jù)表示為燭臺(tái)。我們使用HLOCSeries配合HLOCChart控件來(lái)為HighLowOpenClose圖表定義數(shù)據(jù)。下面的例子顯示了一個(gè)HighLowOpenClose圖表：線圖LineChart控件將數(shù)據(jù)表示為了笛卡爾坐標(biāo)系列中的一系列點(diǎn)，彼此之間由連續(xù)的線進(jìn)行連接。 我們可以使用圖標(biāo)或是符號(hào)來(lái)表示線上的每一個(gè)數(shù)據(jù)點(diǎn)，或者不使用圖標(biāo)顯示簡(jiǎn)單的線。下圖是一個(gè)簡(jiǎn)單的線圖的例子：餅圖我們可以使用PieChart來(lái)定義一個(gè)標(biāo)準(zhǔn)的餅圖。數(shù)據(jù)提供者的數(shù)據(jù)決定餅圖中相對(duì)于其他邊的每一個(gè)邊的尺寸。下圖是一個(gè)簡(jiǎn)單的餅圖的例子：Flex可以讓我們創(chuàng)建圓環(huán)圖。圓環(huán)圖與餅圖相同，所不同只是前者有一個(gè)空心與類似輪子的形狀，而不是填充的圓。下圖是一個(gè)簡(jiǎn)單