使用Flex圖表組件以圖表或是圖的方式顯示資料的能力可以使得Flex程式使用者的資料互動更為容易。與僅顯示簡單的數字資料表不同,我們可以顯示條狀圖,餅圖,線圖或是其他類型的圖表,並且可以使用顏色,標題以及二維圖形來表示我們的資料。
在這一部分我們會介紹Flex圖表,菜單資料,以及我們可以在Flex中建立的其他類型的圖表。
關於圖表
資料表示可以使得我們簡化資料表示與資料關係的方式來表示資料。圖表是資料的一種類型,從而我們可以使用二維的圖形來表示我們的資料。Flex支援最常見的二維圖形,例如條狀圖,柱狀圖,餅圖,並且提供給我們對於圖表顯示的的極大控制。
一個簡單的圖表顯示單一的資料數列,在這裡系列是一組相關的資料點。例如,一個資料數列也許是月度銷售收益,或者是一天的旅館佔有率。下面的圖表顯示了過去六個月的與銷售收益相應的資料數列:另一種圖表也許會添加第二個資料數列。例如,我們也許會包含過去六個月的利潤。下面的圖表顯示了兩個資料數列,一個是銷售,一個是利潤:
定義圖表資料
圖表控制項使用為圖表定義資料的dateProvider屬性。一個資料提供者(date provider)是一個對象的集合,與數組類似。圖表組件使用平的,或者是基於列表的,資料提供者,與一維數組類似。
一個資料提供者由兩部分組成:一個資料對象集合與API。資料提供者API是一個類必須實現的方法與屬性的集合,從而Flex組件可以將其看作資料提供者。
圖表類型
Flex支援最常見的一些圖表類型,包括條狀圖,線圖,餅圖以及其他的類型。這一部分描述Flex所提供的圖表集合。除了這些圖表類型以外,我們還可以擴充笛卡爾圖表控制項還建立自訂的圖表。
地區圖表
我們使用圖表控制項將資料表示為一個用與資料值相關的線來界定的地區。線上以下的地區用一種顏色或是一種類型來進行填充。我們可以用表徵圖或是符號來表示線上的每一個資料點,或者是不使用表徵圖而僅用單一的線。
是一個地區圖表的例子:
條狀圖
我們使用條狀圖控制項來將資料表示為一系列的垂直條,垂直條的長度由資料值為決定。我們可以使用條狀圖控制項來表示圖表的多樣性。
條狀圖實際上是柱狀圖順時針旋轉90度。所以條狀圖與柱狀圖有著許多同樣的特性。
泡沫圖
我們使用泡沫圖對於每一個資料點用三個值來表示資料:一個值決定他的X位置,一個值決定他的Y位置,而另一個值來決定圖表符號地圖表上相對於其他資料點的尺寸。
<mx:BublleChart>標籤還有一個額外的屬性,maxRadius。這個屬性以象素值指定了最大的圖表項目的最大半徑。與最大值相關的資料點賦值為這個半徑值,而其他的資料點相對於最大值賦值為一個較小的半徑值。預設值為30象素。
如為一個泡沫圖的例子:
燭台圖表
CandlestickChart控制項將財經資料表示為一個系列的燭台,來表示資料數列的高,低,開放與關閉的值。燭台上每一個垂直線的最高點與最低點表示資料點的最大值與最小值,而整個盒的最高點與最低點代表資料的開放值與關閉值,每一個燭台的不同填充由資料點的關閉值是否高於或是低於開放值來決定。
如是一個燭台圖表的例子:
列狀圖
ColumnChart控制項將資料表示為一系列的垂直列,他的高度由資料值為決定。我們可以使用ColumnChart控制項來建立各種類型的列狀圖,包含簡單列,簇列等。
一個簡單的圖表顯示一個單一的資料數列,在這裡系列是一組相關的資料點。例如,一個資料數列也許是每個月的銷售收益,或者是每天的旅館出租率。下面的圖表顯示了一個相應於過去四個季度的銷售增長比例的資料數列:
HighLowOpenClose圖表
HLOCChart控制項將財經資料表示為一系列的代表高,低,開放與關閉的資料數列值。垂直線的最高點與最低點代表資料點的最高值與最低值,而左邊的符號標記代表值的開始點,右邊的符號標記代表值的結束點。
HLOCChart控制項並不需要代表開始值的資料點。相關的圖表CandlestickChart將簡單的資料表示為燭台。我們使用HLOCSeries配合HLOCChart控制項來為HighLowOpenClose圖表定義資料。下面的例子顯示了一個HighLowOpenClose圖表:
線圖
LineChart控制項將資料表示為了笛卡爾座標系列中的一系列點,彼此之間由連續的線進行串連。 我們可以使用表徵圖或是符號來表示線上的每一個資料點,或者不使用表徵圖顯示簡單的線。
是一個簡單的線圖的例子:
餅圖
我們可以使用PieChart來定義一個標準的餅圖。資料提供者的資料決定餅圖中相對於其他邊的每一個邊的尺寸。
是一個簡單的餅圖的例子:Flex可以讓我們建立環圈圖。環圈圖與餅圖相同,所不同只是前者有一個空心與類似輪子的形狀,而不是填充的圓。是一個簡單的環圈圖的例子:塊圖
我們使用PlotChart控制項來在笛卡爾座標系中表示資料,其中每一個資料點有一個決定其位置的X座標與Y座標。我們可以定義Flex所顯示的每一個資料點的形狀。
是一個簡單的塊圖的例子: