練習 3.4:新增圖形元件

開始之前,您必須先完成練習 3.3:新增樹狀結構元件

插入和配置圖形元件

  1. 插入圖形元件:
    1. 確定 JSP 檔是開啟的。請在您的標籤畫面中選取標籤為圖形的畫面。
    2. 在「選用區」中,按一下 Faces 用戶端元件抽屜來開啟它。
    3. 拖曳圖形元件,將它放在「設計」視圖的「圖形」畫面中。
  2. 配置圖形元件的內容。圖形元件是一個使用 Macromedia Flash 技術的非常豐富的元件。 它的行為類似您目前所見到的任何其他 Faces 用戶端元件。 不同之處在於瀏覽器內部使用 Macromedia Flash 技術,而不是利用 JavaScript 和 DHTML 來呈現控制。 因此,圖形控制項雖然不是高端的圖表控制,但仍可讓您設定許多資料系列,以及在圓餅圖、長條圖和線條圖之間選擇。 這個指導教學要設定下列內容:
    1. 確定標籤畫面的寬度高度分別設成 700 像素和 250 像素。 尺寸適用於整個圖表區,圖例和標題也包括在內。
    2. 在 odc:graphDraw 標籤中,勾選顯示圖表內容的所有勾選框來啟用這三個可能的圖表類型(圓餅圖長條圖線條圖)。
    3. 起始顯示欄位中,選取長條圖
    4. 勾選顯示圖例勾選框。
    5. 輸入投資組合來作為圖表標題
    6. 內容視圖左側的「顯示選項」之下,輸入股票來作為 X 軸顯示選項
    7. 輸入來作為 Y 軸顯示選項
  3. 將資料連結至圖形元件。 圖形控制項會利用資料來作為含相同 X 軸資訊的一或多個系列。 這個說明最好採用表格。 假設您有一個資料結構,它是一份股票購買資訊記錄的清單。 每個物件都有三個屬性:股票名稱、購買數量,以及購買價格。 您可以依照下列方式將資料視覺化:

    股票

    數量

    價格

    IBM

    100

    58

    IBM2

    250

    130

    IBM3

    1000

    100

    IBM4

    500

    82

    如果用圖形來表示,您必須先將清單本身當作一個錨點。 之後,您必須指示應該利用哪個直欄來作為 X 軸,最後,再指示代表每個資料系列的每個直欄。 因此,比方說,如果您要用圖形來表示四項股票的購買,以及並列顯示數量和價格資訊,您會將數量和價格直欄指定為資料系列。

    這個指導教學要用圖形來表示投資組合的內容,連結位置內容,以及並列繪製各股的現行值和擁有的數量。

    1. 從「用戶端資料」視圖中,將 root.users.portfolios.positions 節點拖曳至圖形控制項。
    2. 在設計視圖中,選取「圖形」控制項。
    3. 內容視圖的「X 軸值」標籤中,選取符號來作為您的 X 軸資料。
    4. 按一下內容視圖中的「Y 軸值」標籤。您將在這裡新增資料系列。
    5. 按一下新增系列按鈕,配置每個資料序列。 在這個指導教學中,請從「新增系列」視窗的值下拉清單中選取價格。 請將系列名稱欄位改成價格。 請遵循相同的步驟來建立另一個數量資料系列。
    6. 輸入每個系列的名稱,這會在圖形中顯示為標籤。

    附註:如果資料有重複的列,比方說,給定的股票有多個資料點,您可以選取「群組值」勾選框,將類似的資料元素分組在一起。

    如果您要將值分組,您必須選擇要用哪個函數,將兩個或更多分組的資料元素放在一起。 系統支援 sum、average、min、max、first 和 last 等基本函數。 如果您只有兩個資料系列,您可以選擇用圖形來同時表示它們,但在圖形的兩側繪製它們的 Y 軸標籤,這時會有左右兩條 Y 軸。 請選取 SUM 函數來進行資料分組,因為同一股會有多個項目。 在「資料格式」畫面中,選取每個資料系列的格式。當顯示實例的數值資料時,請務必指定應該顯示的小數點數。 格式選項的行為與圖形完全相符。

「圖形」畫面中的圖形元件

管理事件處理常式

圖形元件沒有任何事件,因為它不接受使用者的任何輸入;所有顯示事件都由 Falsh 控制來進行內部管理。 它只會回應其他頁面事件,結果會更新它的顯示畫面。

編輯樣式

如果您需要自訂圖形的外觀與操作方式,請編輯稱為 graph.css 的預設階式樣式表 (CSS)。 您可以在「專案導覽器」中,找到專案中的這個檔案,位置如下:/WebContent/theme/graph.css

現在您已準備好開始進行練習 3.5:在伺服器中測試

使用條款 | 讀者意見
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.