演習 3.4: グラフ・コンポーネントの追加

この演習を始める前に、演習 3.3: ツリー・コンポーネントの追加を完了している必要があります。

グラフ・コンポーネントの挿入と構成

  1. グラフ・コンポーネントを挿入します。
    1. JSP ファイルが開いていることを確認します。 タブ・パネルで Graph のラベルがあるパネルを選択します。
    2. パレットで、Faces Client コンポーネント・ドロワーをクリックして開きます。
    3. Graph コンポーネントをドラッグし、設計ビューのグラフ・パネル上にドロップします。
  2. グラフ・コンポーネントのプロパティーを構成します。 グラフ・コンポーネントは、Macromedia Flash テクノロジーを使用した非常に機能豊富なコンポーネントです。 これは、これまで見てきた他の Faces Client コンポーネントと同じように動作します。 相違点は、コントロールをレンダリングするために JavaScript および DHTML を使用する代わりに、ブラウザー上で内部的に Macromedia Flash テクノロジーが使用されていることです。 その結果、グラフ・コントロールは高性能図表コントロールではないにもかかわらず多くのデータ系列をセットアップでき、円グラフ、棒グラフ、折れ線グラフを選択することができます。 このチュートリアルでは、以下のプロパティーを設定してください。
    1. タブ・パネルの「幅 (Width)」および「高さ (Height)」が、それぞれ 700 ピクセルと 250 ピクセルに設定されていることを確認します。 この大きさは、凡例とタイトルを含む図表域全体のものです。
    2. odc:graphDraw タブで、「グラフの表示 (Display Charts)」プロパティーのすべてのチェック・ボックスをチェックして、3 つの可能な図表タイプ (円グラフ (Pie)棒グラフ (Bar)折れ線グラフ (Line)) をすべて使用可能にします。
    3. 最初に表示 (Initially display)」フィールドで「棒グラフ (Bar)」を選択します。
    4. 凡例の表示 (Show Legend)」チェック・ボックスをチェックします。
    5. グラフのタイトル (Chart title)」に Portfolio と入力します。
    6. プロパティー」ビューの左側にある「表示オプション (Display Options)」の下で、「X 軸表示オプション (X-axis display options)」に Stocks と入力します。
    7. Y 軸表示オプション (Y-axis display options)」に Dollars と入力します。
  3. グラフ・コンポーネントにデータをバインドします。 グラフ・コントロールはデータを、同じ X 軸情報をもつ 1 つ以上の系列として使用します。 これを表す最適な方法は、テーブルを使用するものです。 株式購入情報レコードをリストしたデータ構造があるものとします。 各オブジェクトには、株式名、購入数量、購入価格の 3 つの属性があります。 データを以下のように視覚化することができます。

    株式

    数量

    価格

    IBM

    100

    58

    IBM2

    250

    130

    IBM3

    1000

    100

    IBM4

    500

    82

    これをグラフにするには、まずアンカー・ポイントとしてリストそのものが必要です。 次にどの列を X 軸として使用するかを指定する必要があり、最後に各データ系列を表すそれぞれの列を指示します。 そこで、例えば 4 回の株式購入をグラフにし、数量と価格を横並びに示したい場合には、数量の列と価格の列をデータ系列として指定します。

    このチュートリアルでは、ポートフォリオのコンテンツをグラフにし、位置のプロパティーをバインドし、各株式の現在の価値と所有数量を横並びに描きます。

    1. クライアント・データ・ビューから、root.users.portfolios.positions ノードをグラフ・コントロールにドラッグします。
    2. 設計ビューでグラフ・コントロールを選択します。
    3. プロパティー」ビューの「X 軸値 (X-axis values)」タブで、X 軸データとして使用する symbol を選択します。
    4. プロパティー」ビューの「Y 軸値 (Y-axis values)」タブをクリックします。 ここでデータ系列を追加します。
    5. 系列の追加 (Add Series)」ボタンをクリックし、各データ系列を構成します。 このチュートリアルでは、「系列の追加 (Add Series)」ウィンドウの値のプルダウンから price を選択します。 「系列名 (Series Name)」フィールドを Price に変更します。 同じステップに従って、もう 1 つの quantity のデータ系列も作成します。
    6. 各系列の名前を入力します。それがグラフのラベルとして表示されます。

    注: 重複した行をもつデータがある場合、例えば 1 つの株式に複数のデータ点があるような場合には、「値のグループ化 (Group Values)」チェック・ボックスを選択して、類似したデータ・エレメントをグループ化することができます。

    値をグループ化するには、グループ化する 2 つ以上のデータ・エレメントをまとめるために使用する関数を選択する必要があります。 システムは、合計、平均、最小、最大、最初、最後などの、基本関数をサポートしています。 データ系列が 2 つだけならば、それらをまとめてグラフにすることができます。しかし、グラフの両側に Y 軸ラベルを描いて、左側 Y 軸と右側 Y 軸をもつことになります。 同じ株式に複数のエントリーがあるので、データをグループ化する SUM 関数を選択します。 データ・フォーマット・パネルで、各データ系列のフォーマットを選択します。 例えば数値データを表示する場合は、表示する小数点以下の桁数を指定することが重要です。 フォーマット・オプションは、グラフの場合とまったく同じ働きをします。

グラフ・パネル上のグラフ・コンポーネント

イベント・ハンドラーの管理

グラフ・コンポーネントはユーザーからの入力を許さないため、イベントはありません。表示イベントはすべて、Flash コントロールによって内部で管理されます。 他のページ・イベントにのみ反応し、その結果として表示を更新します。

スタイルの編集

グラフのルック・アンド・フィールをカスタマイズする必要がある場合は、graph.css というデフォルトの CSS (Cascading Style Sheet) を編集してください。 このファイルは、プロジェクト・ナビゲーターのプロジェクトで /WebContent/theme/graph.css にあります。

これで、演習 3.5: サーバー上でのテストを開始する準備ができました。

フィードバック
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved. (C) Copyright IBM Japan 2005