23 グラフ・コンポーネントの使用方法

この章では、ADFデータ視覚化コンポーネントのareaGraph、barGraph、horizontalBarGraph、bubbleGraph、comboGraph、funnelGraph、lineGraph、paretoGraph、pieGraph、radarGraph、scatterGraph、sparkChartおよびstockGraphを使用し、簡単なUI優先開発を使用してデータをグラフに表示する方法について説明します。この章では、データ要件、タグ構造、およびコンポーネントの見え方や動作をカスタマイズするためのオプションを定義します。

アプリケーションでFusionテクノロジ・スタックを使用する場合、データ・コントロールを使用してグラフを作成することもできます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータ・バインドされたグラフの作成に関する項を参照してください。

この章では、次の項目について説明します。

23.1項「グラフ・コンポーネントについて」
23.2項「グラフ・コンポーネントの使用方法」
23.3項「グラフ表示要素のカスタマイズ」
23.4項「グラフ・テキスト、色およびデータ値の書式設定」
23.5項「データの系列およびグループの外観のカスタマイズ」
23.6項「グラフへのアニメーションの使用」
23.7項「インタラクティブな機能のグラフへの追加」

23.1 グラフ・コンポーネントについて

グラフ・コンポーネントには、面グラフ、棒グラフ、バブル・グラフ、組合せグラフ、ファンネル・グラフ、折れ線グラフ、パレート・グラフ、円グラフ、レーダー・グラフ、散布図、スパークチャート、株価チャートなど、50種類以上のグラフを作成する機能が用意されています。このコンポーネントでは、複数軸の複数データ・ポイントを様々な方法で評価できます。たとえば、一群のグラフにより、あるグループからの結果と他のグループからの結果の比較が容易になります。

グラフには、データの系列およびグループが表示されます。系列とグループは、データのグリッドの行と列にたとえることができます。通常、グリッドの行はグラフの系列として表示され、グリッドの列はグラフのグループとして表示されます。

大半のグラフでは、系列は同じ色のマーカーのセットとして表示されます。通常、グラフの凡例に、各系列の識別子と対応する色が表示されます。たとえば、棒グラフで黄色の棒が靴の売上げを示し、緑色の棒がブーツの売上げを示す、などです。

グループの表示は、グラフ・タイプによって異なります。たとえば、集合棒グラフでは、各まとまりがグループです。積上げ棒グラフでは、各積層がグループです。複数円グラフでは、各円がグループです。グループは年などの期間を表す場合もあります。グループが地域などの地理上の場所を表す場合もあります。

グラフ・タイプのデータ要件に応じて、1つのグループに複数のデータ値が必要な場合があります。たとえば、散布図では、データ・マーカーごとに2つの値が必要です。1つ目の値はX軸上のマーカーの位置を決め、2つ目の値はY軸上のマーカーの位置を決めます。

23.1.1 グラフ・コンポーネントのユースケースおよび例

グラフ・コンポーネントには、データを表示するために使用できる13タイプのグラフがあり、合計50種を超えるグラフに1つ以上のバリエーションがあります。JDeveloperは、使用可能なグラフのカテゴリを表示する「コンポーネント」ウィンドウを提供しています。図23-1にグラフの「コンポーネント」ウィンドウを示します。

図23-1 グラフの「コンポーネント」ウィンドウ

「コンポーネント」ウィンドウでグラフのカテゴリを選択すると、JDeveloperで使用可能なグラフ・タイプに関する説明を含むダイアログが表示され、グラフの作成時に視覚的支援が提供されます。図23-2に、「コンポーネント」ウィンドウで棒グラフのカテゴリを選択した場合に使用できる各種棒グラフ・タイプとレイアウトを示します。

図23-2 「棒グラフの作成」ダイアログの棒グラフ・タイプ

グラフには次のタイプがあります。

面: データを塗りつぶされた面として表します。面グラフを使用して、過去12か月の売上げなど、ある期間の傾向を示します。面グラフでは、1つの軸上に最低2グループのデータが必要です。軸には、月などの時間の経過を表すラベルが付けられることがよくあります。

面グラフでは、次の種類のデータ値を表します。
- 絶対: 各面マーカーは、一連の(2つ以上の)データ値を結びます。この種のグラフのバリエーションとして、単一Yの絶対面グラフと分割二重Yの絶対面グラフがあります。
  
  分割二重Yグラフでは、描画エリアが2つのセクションに分割され、異なるY軸に割り当てられたデータ・セットは異なる描画エリアに表示されます。
- 積上げ: 面マーカーが積み上げられます。各データ・セットの値は前のセットの値に加算されます。積層のサイズが累積合計を表します。この種のグラフのバリエーションとして、単一Y軸の積上げ面グラフと分割二重Y軸の積上げ面グラフがあります。
- パーセンテージ:面マーカーは、すべてのデータ・セットの累積合計に対する割合を表します。
図23-3に、デフォルトのグラフが選択されて「面グラフの作成」ダイアログに表示されている面グラフ・タイプのバリエーションを示します。

図23-3 面グラフ・タイプのバリエーション

図23-4に、面グラフの例を示します。

図23-4 面グラフの例
棒: データを一連の縦棒で表します。棒グラフを使用してある期間の傾向の確認や、複数の地域での異なる製品区分の売上げなど、同一時点での項目の比較を行います。

棒グラフでは、次の種類のデータ値を表します。
- 集合: 棒の各まとまりが1グループのデータを表します。たとえば、データが従業員で分類されている場合、特定の従業員の給与の棒と歩合の棒が1つのまとまりとなります。この種のグラフのバリエーションとして、集合縦棒グラフと集合横棒グラフがあります。集合棒グラフのすべてのバリエーションは、単一Yグラフ、二重Yグラフおよび分割二重Yグラフにできます。
- 積上げ: 各データ・セットの棒が前のデータ・セットに追加されます。積層のサイズがデータの累積合計を表します。この種のグラフのバリエーションとして、積上げ縦棒グラフと積上げ横棒グラフがあります。積上げ棒グラフのすべてのバリエーションは、単一Yグラフ、二重Yグラフおよび分割二重Yグラフにできます。
- パーセンテージ: 棒が積み上げられ、すべてのデータ・セットの累積合計に対する特定のデータ・セットの割合が表されます。パーセンテージ棒グラフは、単一Yグラフにのみできます。
図23-5に、デフォルトのグラフが選択されて「棒グラフの作成」ダイアログに表示されている棒グラフ・タイプのバリエーションを示します。

図23-5 棒グラフ・タイプのバリエーション

図23-6に、棒グラフの例を示します。

図23-6 棒グラフの例
横棒: Y軸に沿って棒を横向きに表示します。横棒グラフを使用して向きを持たせて傾向を表示したり、値を比較します。

図23-7に、デフォルトのグラフが選択されて「横棒グラフの作成」ダイアログに表示されている横棒グラフ・タイプのバリエーションを示します。

図23-7 横棒グラフ・タイプのバリエーション

図23-8に、横棒グラフの例を示します。

図23-8 横棒グラフの例
バブル: 円形のデータ・マーカー(バブル)の位置とサイズでデータを表します。(データ項目が多数で全体の関係を表示する場合は特に)バブル・グラフを使用して3種類の値の相関関係を示します。たとえば、バブル・グラフを使用して、従業員の給与(X軸)、経験年数(Y軸)と生産性(バブルのサイズ)をプロットします。このようなグラフでは、生産性を給与および経験と比較して調べることができます。

図23-9に、デフォルトのグラフが選択されて「バブル・グラフの作成」ダイアログに表示されているバブル・グラフ・タイプのバリエーションを示します。

図23-9 バブル・グラフ・タイプのバリエーション

図23-10に、バブル・グラフの例を示します。

図23-10 バブル・グラフの例
組合せ: 異なるタイプのデータ・マーカー(棒、線または面)を使用して、異なる種類のデータ・アイテムを表示するグラフ。組合せグラフを使用して、棒と線、棒と面、線と面あるいは3つすべての組合せを比較します。

図23-11に、デフォルトのグラフが選択されて「組合せグラフの作成」ダイアログに表示されている組合せグラフ・タイプのバリエーションを示します。

図23-11 組合せグラフ・タイプのバリエーション

図23-12に、組合せグラフの例を示します。

図23-12 組合せグラフの例
ファンネル: プロセスの段階に関連するデータを視覚的に表します。ステップは、横向きの円錐形のセクションに対する縦向きのスライスとして表されます。特定のステップ(スライス)の実際の値がそのスライスの割当てに近づいた分、スライスが塗りつぶされます。通常、ファンネル・グラフには、時間などのステージ値に対する実績値と目標値が必要です。たとえば、ファンネル・グラフを使用して、ファンネルの異なるセクションが販売周期の異なる段階を表すプロセスを表示します。ファンネル・グラフのバリエーションはありません。

図23-13に、ファンネル・グラフの例を示します。

図23-13 ファンネル・グラフの例
折れ線: データを線、一連のデータ・ポイントまたは線で結ばれたデータ・ポイントとして表します。折れ線グラフには、グループ内のメンバーごとに最低2つのポイントを表すデータが必要です。たとえば、月ごとの折れ線グラフには最低2か月必要です。通常、特定の色の線は、アメリカ、ヨーロッパ、アジアなどのデータの各グループに関連付けられています。折れ線グラフを使用して、同一期間の項目を比較します。

折れ線グラフでは、次の種類のデータ値を表します。
- 絶対: 各線セグメントは2つのデータ・ポイントを結びます。この種のグラフでは、軸を単一Y、二重Yおよび分割二重Yにできます。
- 積上げ: 各データ・セットの線が前のデータ・セットに追加されます。積層のサイズがデータの累積合計を表します。この種のグラフでは、軸を単一Y、二重Yおよび分割二重Yにできます。
- パーセンテージ: 線が積み上げられ、各線がすべてのデータ・セットの累積合計に対する特定のデータ・セットの割合を表します。パーセンテージ折れ線グラフは、単一Y軸グラフにのみできます。
図23-14に、デフォルトのグラフが選択されて「折れ線グラフの作成」ダイアログに表示されている折れ線グラフ・タイプのバリエーションを示します。

図23-14 折れ線グラフ・タイプのバリエーション

図23-15に、折れ線グラフの例を示します。

図23-15 折れ線グラフの例
パレート: 棒と棒の累積割合を示すパーセンテージ線でデータを表します。各棒は、交通事故の原因など、異なる不具合の原因を表します。棒は、発生件数の多いものから少ないものの順に並べられます。パレート・グラフは常に二重Yグラフで、1つ目のY軸は棒が表す値に対応し、2つ目のY軸は0%から100%を表し、累積割合の値に対応します。パレート・グラフを使用して、不具合の原因を特定し、比較します。パレート・グラフにはバリエーションはありません。

図23-16に、パレート・グラフの例を示します。

図23-16 パレート・グラフの例
円/ドーナツ: 1つのグループのデータが円のセクションとして表され、円が切り分けられたパイのように見えます。円グラフを使用して、各製品ラインからの収益など、全体に対する各部分の関係を表します。円グラフは、円またはドーナツ型(各円の中心が穴となり、その中に円の合計値が表示される)として表示できます。

図23-17に、デフォルトのグラフが選択されて「円グラフの作成」ダイアログに表示されている円グラフ・タイプのバリエーションを示します。

図23-17 円グラフ・タイプのバリエーション

図23-18に、円グラフの例を示します。

図23-18 円グラフの例
レーダー: 円形の折れ線グラフとして表されるグラフ。過去3年間の月ごとの売上げなどの周期的に起こるパターンを表す場合に、レーダー・グラフを使用します。レーダー・グラフにはバリエーションはありません。

図23-19に、レーダー・グラフの例を示します。

図23-19 レーダー・グラフの例
散布/極: データをデータ・マーカーの位置で表します。散布図を使用して、上位製品の売上げとコストなど、異なる2種類のデータの相関関係を表します。多数の項目の全体的な関係を表す場合は特に散布図を使用します。散布図では、極グラフとして方向性を持ってデータを表示できます。

図23-20に、デフォルトのグラフが選択されて「散布図の作成」ダイアログに表示されている散布図タイプのバリエーションを示します。

図23-20 散布図タイプのバリエーション

図23-21に、散布図の例を示します。

図23-21 散布図の例
スパークチャート: 傾向や変化を1つのデータ値で表す簡単な縮小グラフで、通常、表の列内や関連テキストの行中に表示されます。スパークチャートには、基本的な条件付きフォーマットがあります。スパークチャートにはラベルが含まれていないため、近くの表の列や周りのテキストによってスパークチャートの内容のコンテキストがわかります。

図23-22に、デフォルトのグラフが選択されて「スパークチャート・グラフの作成」ダイアログに表示されているスパークチャート・グラフ・タイプのバリエーションを示します。

図23-22 スパークチャート・グラフ・タイプのバリエーション

図23-23に、スパークチャートの例を示します。

図23-23 棒スパークチャートの例
株価: データを株式の高値、低値および終値として示します。各株価マーカーは、選択された株価チャートの種類に応じて2から4個(オプションの出来高マーカー以外)の異なる値を表します。株式グラフでは、株価を表示し、必要に応じてグラフに1つ以上の株式の取引出来高も表示できます。株価またはローソク足株価チャートが出来高を含む場合、出来高はグラフの下部に棒で表示されます。

ローソク足株価チャートは株価を表し、オプションで1つの株の出来高を表示します。ローソク足株価チャートが出来高を含む場合、出来高はグラフの下部に棒で表示されます。

ローソク足株価チャートでは、始値と終値のうち低い方の値がローソクの下端で示されます。高い方の値がローソクの上端で示されます。終値が始値より高い場合、ローソクは緑色です。始値が終値より高い場合、ローソクは赤色です。

図23-24に、デフォルトのグラフが選択されて「株式グラフの作成」ダイアログに表示されている株式グラフ・タイプのバリエーションを示します。

図23-24 株価チャート・タイプのバリエーション

図23-25に、ローソク足株価チャートの例を示します。

図23-25 ローソク足株価チャートの例

23.1.2 エンド・ユーザー機能およびプレゼンテーション機能

グラフのエンド・ユーザー機能および構成可能なプレゼンテーション機能には、豊富なオプションが揃っています。

23.1.2.1 グラフ・レイアウト

オプションのグラフ・タイトル、サブタイトル、脚注、凡例および軸タイトルの各コンポーネントは、配置や外観をカスタマイズできます。すべてのグラフに存在する描画エリアは、外観をカスタマイズできます。図23-26に、棒グラフ用のこれらのグラフ・コンポーネントのデフォルト表示を示します。

図23-26 グラフ・レイアウト・コンポーネント

23.1.2.2 サイズ設定

グラフは、400 X 300ピクセルのデフォルト・サイズで表示されます。グラフのサイズをカスタマイズしたり、様々なブラウザ・ウィンドウ・サイズに領域がぴったり合うように、動的サイズ変更を指定したりできます。水平または垂直に制限された領域(Webページのサイドバーなど)にグラフが表示される場合、グラフは機能は揃っているものの、簡易表示で表示されます。

23.1.2.3 イメージ形式

グラフでは、HTML5、FlashおよびPNGなどのイメージ形式がサポートされています。デフォルトでは、新しいアプリケーションはHTML5に設定されますが、デフォルトのイメージ形式を変更できます。アプリケーションでFlashを無効にすることや、クライアント・プラットフォームでFlash Playerの動作をカスタマイズすることもできます。

23.1.2.4 データ・マーカー選択

バブル・グラフのバブルや散布図の形状など、グラフではデータ・マーカーの単一または複数の選択を有効にできます。コンテキスト・メニューを表示したり、ユーザーがデータ・マーカーをクリックしたときにプログラムで応答したりするには、選択を有効にする必要があります。

図23-27に、選択が有効な棒グラフを示します。各データ・マーカーは、その上を移動すると強調表示され、マーカーが選択可能であることが視覚的に示されます。

図23-27 選択サポートが有効な棒グラフ

23.1.2.5 コンテキスト・メニュー

グラフでは、次の3タイプのいずれかのファセットを使用する右クリック・コンテキスト・メニューがサポートされます。

コンポーネント内で選択できない領域に表示されるコンテキスト・メニュー(描画エリアなど)
選択可能要素(散布図のマーカーなど)で表示されるコンテキスト・メニュー
複数選択可能要素で表示されるコンテキスト・メニュー

図23-28に、散布図で選択されたマーカーに表示されるコンテキスト・メニューを示します。

図23-28 散布図で選択されたマーカーのコンテキスト・メニュー

23.1.2.6 参照面/線およびアラート

グラフは、データ参照面または参照線がグラフの系列または軸に関連付けられるように構成できます。これとは別に、エラーや警告など、個別の記号で強調表示する必要のある追加のデータ・ポイントを定義するように、グラフを構成することができます。図23-29に、グラフのアラート範囲内の棒ごとに警告アラート・アイコンの付いた棒グラフを示します。図には、参照面を変更するためにグラフと関連付けることのできるADF入力範囲スライダも示しています。

図23-29 棒グラフでのアラート

23.1.2.7 系列の非表示および表示

グラフは、グラフ・データ内で表示される1つ以上の系列を非表示にしたり、表示したりするように構成できます。これは、特に複数の系列が表示されている場合、比較や分析のために役立ちます。図23-30に、折れ線グラフでの非表示および表示を示します。非表示系列のデフォルトのアイコンは、空のボックスです。

図23-30 折れ線グラフでの非表示および表示

23.1.2.8 ドリル

データ・バインドされたグラフ内の系列およびグループは、データの集計合計とディテール・ビュー間でドリルアップおよびドリルダウンができるように構成できます。図23-31に、全車の合計販売台数と、メルセデス・ベンツの4タイプのロンドンおよびパリにおける販売台数のディテール・ビューを示します。ドリル・ビューには、アクティブなドリル・アイコンが表示されています。

図23-31 棒グラフでのドリル

23.1.2.9 注釈

注釈は、グラフ・データの重要な値を呼び出すために使用できます。図23-32に、折れ線グラフの注釈の例を示します。

図23-32 折れ線グラフの注釈

23.1.2.10 ポップアップのサポート

グラフ・コンポーネントは、情報を提供したり、エンド・ユーザーからの入力を要求したりするポップアップのダイアログ、ウィンドウおよびメニューが表示されるように構成できます。図23-33に、グラフ内でゲージ・コンポーネントを表示するポップアップを示します。

図23-33 散布図内のポップアップ

23.1.2.11 時間セレクタ

時間軸のあるグラフには、ユーザーが時間軸で時間範囲を選択できる時間セレクタが組み込まれるように構成できます。図23-34に、グラフ内にマスター/ディテール・データを表示するためにユーザーが有効にした時間セレクタを示します。ユーザーが折れ線グラフで時間セレクタを移動すると、棒グラフが変化し、選択した期間のデータが表示されます。

図23-34 折れ線グラフでの時間セレクタ

23.1.2.12 双方向サポート

グラフ用のすべてのイメージ形式で、双方向ロケールがサポートされます。図23-35に、複数の円グラフ内の双方向サポートを示します。

図23-35 複数の円グラフでの双方向サポート

23.1.2.13 ドラッグ・アンド・ドロップ

グラフは、次のドラッグ・アンド・ドロップ操作をサポートするように構成できます。

グラフ間のドラッグ・アンド・ドロップ
グラフから別のADFコンポーネントへのドラッグ・アンド・ドロップ
グラフの描画エリア内での散布/バブル・マーカーのドラッグ
別のコンポーネントへの散布/バブル・マーカーのドラッグ
複数のマーカーのドラッグ・アンド・ドロップ

23.1.2.14 スクリーン・リーダーのサポート

スクリーン・リーダーでWebページを読む視覚障害のユーザーをサポートするために、そのアプリケーションに対してスクリーン・リーダーが有効であるとき、グラフは自動的にピボット・テーブルに置き換えられます。スクリーン・リーダーでは、グラフ内よりピボット・テーブル内の方がデータのナビゲートや読上げが容易になります。スクリーン・リーダー・モードの有効化の詳細は、33.2項「ADF Facesでのアクセシビリティ・サポートの構成」を参照してください。ADFピボット・テーブルの詳細は、25.1項「ピボット・テーブル・コンポーネントについて」を参照してください。

23.1.3 グラフ・コンポーネントの追加機能

グラフ・コンポーネントを実装する前に、その他のADF Faces機能を理解しておくと役に立ちます。また、いったんグラフ・コンポーネントをページ追加すると、検証やアクセシビリティなどの機能を追加する必要があることに気付く場合があります。グラフ・コンポーネントで使用できるその他の機能へのリンクは、次のとおりです。

部分ページ・レンダリング: 他のコンポーネントで実行されたアクションに基づく新しいデータをページ上に表示するために、グラフをリフレッシュできます。詳細は、第8章「部分ページ・コンテンツの再レンダリング」を参照してください。
パーソナライズ: 有効な場合、ユーザーは実行時にグラフの表示方法を変更できますが、アプリケーションがユーザーのカスタマイズを許可するように構成されていないかぎり、ユーザーがページを終了するとそれらの値は保持されません。詳細は、第35章「JSFページでのユーザー・カスタマイズの許可」を参照してください。
アクセシビリティ: グラフ・コンポーネントをアクセス可能にできます。詳細は、第33章「アクセス可能なADF Facesページの開発」を参照してください。
タッチ装置: ADF Facesアプリケーションがタッチ装置で動作することがわかれば、その装置に固有のページを作成する作業がベスト・プラクティスになります。詳細は、付録D「ADF Facesを使用したタッチ装置のWebアプリケーションの作成」を参照してください。

自動データ・バインディング: アプリケーションでFusionテクノロジ・スタックが使用されている場合、ADFビジネス・コンポーネントの構成に基づいて、自動的にバインドされたグラフを作成できます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータ・バインドされたグラフの作成に関する項を参照してください。

注意:

最終的にページのUIコンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールを使用します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のプレースホルダ・データ・コントロールを使用したページの設計に関する項を参照してください。

さらに、データ視覚化コンポーネントでは、データの配信方法、自動部分ページ・レンダリング(PPR)、そしてデータの表示および編集方法など、同じ機能の大部分が共有されています。詳細は、22.2項「データ視覚化コンポーネントの共通機能」を参照してください。

23.2 グラフ・コンポーネントの使用方法

グラフのデータ要件はグラフ・タイプによって異なります。データ要件は次のいずれかです。

幾何学的:一部のグラフ・タイプでは、データの表示に特定の数のデータ・ポイントが必要です。たとえば、線には最低2つの点が必要なため、折れ線グラフには最低2グループのデータが必要です。
複雑:一部のグラフ・タイプでは、マーカー(グラフで実際にデータを表すコンポーネント)ごとに複数のデータ・ポイントが必要です。たとえば、散布図では、X軸とY軸に沿ってマーカーを置けるよう、グループごとに2つの値が必要です。各グループに必要なデータ・ポイントがグラフに使用したデータにない場合、グラフ・コンポーネントでは可能な範囲でグラフを表示します。
論理的:一部のグラフ・タイプでは特定の種類のデータを受容しません。次に例を示します。
- 負のデータ:円グラフまたはパーセンテージ棒グラフ、折れ線グラフ、面グラフには負のデータを渡すことはできません。パーセンテージ・グラフでは負のデータに対するマーカーは表示されません。
- nullまたはゼロのデータ:nullデータに対するマーカーは生成されないため、nullデータのマーカーは表示されません。また、グラフがゼロ・データを受け取り、軸線がゼロにある場合、マーカーは見えません。ただし、軸線がゼロ以外にある場合、ゼロ・マーカーは見えます。
- 不十分なデータ・セット(系列): 二重Yグラフでは、Y軸ごとにデータ・セットが必要です。通常、セットごとに異なる情報を表します。たとえば、Y1軸は特定の国および期間の売上げを表し、Y2軸はすべての国の売上げ合計を表します。Y軸データを1セットのみ渡した場合、グラフは2つの異なるY軸にデータを表示できません。データは1つのY軸に表示されます。

類似するグラフは、類似するデータ要件を共有します。たとえば、面グラフというカテゴリでは、次のようにグラフをグループ分けできます。

絶対面グラフ。
積上げ面グラフ。
パーセンテージ面グラフ。

23.2.1 グラフ・タイプのデータ要件

各グラフ・タイプの特定のデータ要件は、次のように定義されています。

面グラフ:
- 面グラフには最低2グループのデータが必要です。グループは、すべての面マーカーを通る横軸に沿った位置で表されます。3か月間のデータを示すグラフでは、このグループにJan、FebおよびMarなどのラベルが付けられます。
- 面グラフには1つ以上のデータ系列が必要です。塗りつぶされた領域はデータの系列またはセットを表し、アメリカ、ヨーロッパ、アジアなどの凡例テキストでラベルが付けられます。
- パーセンテージ面グラフは負の数値を持つことができません。
- 二重Yグラフには2セットのデータが必要です。
棒および横棒グラフ:
- パーセンテージ棒グラフは負の数値を持つことができません。
- 二重Yグラフには2セットのデータが必要です。

バブル・グラフ:

1つのデータ・マーカーにつき最低3つのデータ値が必要です。バブル・グラフの各データ・マーカーは3グループの値を表します。
- マーカーのX軸上の位置を決めるX値。
- マーカーのY軸上の位置を決めるY値。
- マーカーのサイズを決めるZ値。

複数グループのデータの場合、バブル・グラフでは3の倍数のデータが必要です。たとえば、特定のバブル・グラフで、Parisに3つ、Tokyoに3つなどのように値が必要です。3つの値の例には、X値が平均寿命、Y値が平均所得、Z値が人口を表す場合などがあります。

注意:

バブル・グラフを見る際、マーカーのツールチップを確認することでデータ・グループを特定できます。ただし、グループを特定することは、データ・マーカーの全体的なパターンをつかむことに比べると重要ではありません。

組合せグラフ:
- 組合せグラフには最低2セットのデータが必要です。そうでない場合、異なるマーカー・タイプを表示できません。
- 組合せグラフには最低2グループのデータが必要です。そうでない場合、面マーカーまたは線マーカーをレンダリングできません。
ファンネル・グラフ:
- ファンネル・グラフには最低2系列(データ・セット)が必要です。これらの2セットのデータは、目標データ値と実績データ値となります。しきい値はグラフの凡例に表示されます。
  
  ファンネル・グラフのもう1つのバリエーションでは、1セットのデータのみが必要で、ここに表示されるデータ値は合計値の割合です。このタイプのファンネル・グラフを作成するには、グラフのfunnelPercentMeasureプロパティをTrueに設定する必要があります。この設定は、グラフ用のXMLで行います。
- ファンネル・グラフでは、最低1グループのデータをステージとして使用する必要があります。
折れ線グラフ:
- 線には最低2つの点が必要なため、折れ線グラフには最低2グループのデータが必要です。グループは各色のマーカーで表されます。グループには、月の名前などのティック・ラベルが付けられます。
- パーセンテージ折れ線グラフは負の数値を持つことができません。
- 二重Yグラフには2セットのデータが必要です。
パレート・グラフ:
- パレート・グラフには最低2グループのデータが必要です。
- パレート・グラフは負の数値を持つことができません。
- パレート・グラフに複数セットのデータを渡した場合、最初のデータ・セットのみが使用されます。
- パレート・グラフに対するデータの一部としてパーセンテージ値を渡さないでください。グラフは渡されたデータを基にパーセンテージを計算します。
円グラフとドーナツ・グラフ:
- 円またはドーナツ・グラフには最低1グループのデータが必要です。データ構造は次のとおりです。
  - 各円またはドーナツは1グループのデータを表し、月の名前などのラベルが付きます。1グループのデータのみの場合、複数円または複数ドーナツ・グラフ・タイプを選択しても、1つの円またはドーナツのみが表示されます。また、すべてのデータがゼロのグループがある場合、そのグループに対する円またはドーナツは表示されません。
  - データの系列またはセットは、すべて同じ色のスライスで示されます。各データ・セットの凡例テキストが表示されます。たとえば、国別のデータ・セットがある場合、各国の名前が凡例テキストに表示されます。
- 円グラフは負の数値を持つことができません。
- 複数の円グラフには最低2セットのデータが必要です。
極グラフ:

極グラフは、方向性のアスペクトを持つ円形の散布図です。極グラフの各マーカーには最低2つのデータ値が必要です。各データ・マーカーは次の値を表します。
- X軸上のマーカーの位置を決めるX値で、円の周りの右回りの位置です。
- Y軸上のマーカーの位置を決めるY値で、グラフの中心からの距離です。
レーダー・グラフ:

レーダー・グラフには最低3グループのデータが必要です。データ構造は次のとおりです。
- 多角形の辺の数とデータのグループの数は同数です。多角形の各角がグループを表します。
- データの系列またはセットは、線またはすべて同じ色のマーカー、あるいはその両方で示されます。凡例テキストでラベル付けされます。
散布図:
- 散布図の各マーカーには最低2つのデータ値が必要です。散布図は単一Y軸または二重Y軸にできます。各データ・マーカーは次の値を表します。
  - マーカーのX軸上の位置を決めるX値。
  - マーカーのY軸上の位置を決めるY値。
- 複数グループのデータの場合、データは2の倍数である必要があります。
スパークチャート:
- スパークチャートでは、表のデータやgraphDataModelは使用できません。
- 折れ線、棒および面スパークチャートには、1系列のデータ値が必要です。
- 浮動棒スパークチャートには、2系列のデータ値(フロート・オフセットの系列と棒値の系列)が必要です。
株価チャート:
- 株価: 高値-安値-終値
  - 各株価マーカーには、高値、安値、終値の順の3つのデータ値のグループが必要です。2日以上の株価データを表示する場合、月曜日に3つのデータ値、火曜日に3つのデータ値のように、データは3の倍数である必要があります。
  - データの系列(セット)は、1つの株を表す同じ色のマーカーで示されます。系列はA株のように凡例テキストでラベル付けされます。1つの株のみの場合でも、ローソク足チャートを除き、凡例が表示されます。大半の高値-安値-終値株価チャートの系列は1つのみです。複数の系列を表示し、異なる株の値が重なる場合、株価マーカーによって他の株価マーカーが覆われます。
- 株価: 高値-低値-終値と出来高:
  - 各株価マーカーには、高値、安値、終値、出来高の順の4つのデータ値のグループが必要です。1日以上の株価データを表示する場合、データは4の倍数で、月曜日の高値、月曜日の安値、月曜日の終値、月曜日の出来高(他の曜日に続く)の順である必要があります。
  - 出来高も表示する高値-安値-終値株価チャートでは、1つの株のみのデータを表示できます。この株のラベルはグラフの凡例に表示されます。
- 株価: 始値-高値-低値-終値
  - 各株価マーカーには、始値、高値、安値、終値の順の4つのデータ値のグループが必要です。1日以上の株価データを表示する場合、月曜日に4つのデータ値、火曜日に4つのデータ値のように、データは4の倍数である必要があります。
  - データの系列(セット)は、1つの株を表す同じ色のマーカーで示されます。系列はA株のように凡例テキストでラベル付けされます。1つの株のみの場合でも凡例は表示されます。大半の始値-高値-安値-終値株価チャートの系列は1つのみです。複数の系列を表示し、異なる株の値が重なる場合、株価マーカーによって他の株価マーカーが覆われます。
- 株価: 始値-高値-低値-終値と出来高
  - 各株価マーカーには、始値、高値、安値、終値、出来高の順の5つのデータ値のグループが必要です。1日以上の株価データを表示する場合、データは5の倍数で、月曜日の始値、月曜日の高値、月曜日の安値、月曜日の終値、月曜日の出来高(他の曜日に続く)の順である必要があります。
  - 出来高も表示する始値-高値-安値-終値株価チャートでは、1つの株のみのデータを表示できます。この株のラベルはグラフの凡例に表示されます。
- ローソク: 始値-終値
  - 各株価マーカーには、始値、終値の順の2つのデータ値のグループが必要です。1日以上の株価データを表示する場合、月曜日に2つのデータ値、火曜日に2つのデータ値のように、データは2の倍数である必要があります。
  - 1つの系列(データのセット)は、1つの株のマーカーで表されます。ローソク足チャートでは、1つの株のみの値を表示できます。このため、これらのグラフには凡例は表示されず、グラフのタイトルに系列のラベル(株式名)を示します。
- ローソク: 始値-終値と出来高
  - 各株価マーカーには、始値、終値、出来高の順の3つのデータ値のグループが必要です。1日以上の株価データを表示する場合、月曜日に3つのデータ値、火曜日に3つのデータ値のように、データは3の倍数である必要があります。
  - 1つの系列(データのセット)は、1つの株のマーカーで表されます。ローソク足チャートでは、1つの株のみの値を表示できます。このため、これらのグラフには凡例は表示されず、グラフのタイトルに系列のラベル(株式名)を示します。
- ローソク: 始値-高値-低値-終値
  - 各株価マーカーには、始値、高値、安値、終値の順の4つのデータ値のグループが必要です。1日以上の株価データを表示する場合、月曜日に4つのデータ値、火曜日に4つのデータ値のように、データは4の倍数である必要があります。
  - 1つの系列(データのセット)は、1つの株のマーカーで表されます。ローソク足チャートでは、1つの株のみの値を表示できます。このため、これらのグラフには凡例は表示されず、グラフのタイトルに系列のラベル(株式名)を示します。
- ローソク: 始値-高値-低値-終値と出来高
  - 各株価マーカーには、始値、高値、安値、終値、出来高の順の5つのデータ値のグループが必要です。1日以上の株価データを表示する場合、月曜日に5つのデータ値、火曜日に5つのデータ値のように、データは5の倍数である必要があります。
  - 1つの系列(データのセット)は、1つの株のマーカーで表されます。ローソク足チャートでは、1つの株のみの値を表示できます。このため、これらのグラフには凡例は表示されず、グラフのタイトルに系列のラベル(株式名)を示します。

23.2.2 グラフの構成

多くのグラフ・タイプとグラフ・コンポーネントの高い柔軟性のために、グラフには多数のDVTタグがあります。接頭辞dvt:は、各グラフ・タグ名の先頭に付いて、そのタグがADFデータ視覚化ツール(DVT)のタグ・ライブラリに属することを示します。次のリストに、グラフ・コンポーネントに関連するタグのグループを示します。

グラフ・コンポーネント・タグ: 13個のグラフ・コンポーネント・タグは、よく使用されるグラフ・タイプを作成する簡便な方法です。それらは、「コンポーネント」ウィンドウにグラフのカテゴリとして、1つ以上のタイプ・バリエーションとともに表示されます。

表23-1では、グラフ・コンポーネント・タグと、そのグラフ・コンポーネントのsubType属性で指定されているバリエーションについて説明しています。

表23-1 グラフ・コンポーネントのタグおよびサブ・タイプ

グラフ・タグ	説明	サブ・タイプ
`areaGraph`	データを塗りつぶされた面として表します。	`AREA_VERT_ABS` `AREA_VERT_ABS_SPLIT2Y` `AREA_VERT_PERCENT` `AREA_VERT_STACK` `AREA_VERT_STACK_SPLIT2Y`
`barGraph`	データを一連の縦棒で表します。	`BAR_VERT_CLUST` `BAR_VERT_CLUST_SPLIT2Y` `BAR_VERT_CLUST2Y` `BAR_VERT_FLOAT_STACK` `BAR_VERT_PERCENT` `BAR_VERT_STACK` `BAR_VERT_STACK_SPLIT2Y` `BAR_VERT_STACK2Y`
`bubbleGraph`	円形のデータ・マーカー(バブル)の位置とサイズでデータを表します。	`BUBBLE` `BUBBLE_2Y`
`comboGraph`	異なるタイプのデータ・マーカー(棒、線または面)を使用して、異なる種類のデータ・アイテムを表示します。	`COMBINATION_VERT_ABS` `COMBINATION_VERT_ABS_2Y`
`funnelGraph`	プロセスの段階に関連するデータを視覚的に表します。ステップは、横向きの円錐形のセクションに対する縦向きのスライスとして表されます。	`FUNNEL`
`horizontalBarGraph`	データをY軸に沿った横向きの棒として表示します。	`BAR_HORIZ_CLUST` `BAR_HORIZ_CLUST_SPLIT2Y` `BAR_HORIZ_CLUST2Y` `BAR_HORIZ_PERCENT` `BAR_HORIZ_STACK` `BAR_HORIZ_STACK_SPLIT2Y` `BAR_HORIZ_STACK2Y`
`lineGraph`	データを線、一連のデータ・ポイントまたは線で結ばれたデータ・ポイントとして表します。	`LINE_VERT_ABS` `LINE_VERT_ABS_2Y` `LINE_VERT_ABS_SPLIT2Y` `LINE_VERT_PERCENT` `LINE_VERT_STACK` `LINE_VERT_STACK_SPLIT2Y` `LINE_VERT_STACK2Y`
`paretoGraph`	棒と棒の累積割合を示すパーセンテージ線でデータを表します。	`PARETO`
`pieGraph`	1つのグループのデータが円のセクションとして表され、円が切り分けられたパイのように見えます。円グラフは、円またはドーナツ型(各円の中心が穴となり、その中に円の合計値が表示される)として表示できます。	`PIE` `PIE_BAR` `PIE_MULTI` `RING` `RING_BAR` `RING_MULTI`
`radarGraph`	円形の折れ線グラフとして表されます。	`RADAR_LINE`
`scatterGraph`	データをデータ・マーカーの位置で表します。散布図では、極グラフとして方向性を持ってデータを表示できます。	`SCATTER` `SCATTER_2Y` `POLAR`
`sparkChart`	傾向や変化を1つのデータ値で表す簡単な縮小グラフで、通常、表の列内や関連テキストの行中に表示されます。	`area` `bar` `floatingBar` `line`
`stockGraph`	株価を表示し、必要に応じてグラフに1つ以上の株式の取引出来高も表示できます。株価またはローソク足株価チャートが出来高を含む場合、出来高はグラフの下部に棒で表示されます。	`STOCK_CANDLE` `STOCK_CANDLE_VOLUME` `STOCK_HILO_CLOSE` `STOCK_HILO_CLOSE_VOLUME` `STOCK_OHLC_CANDLE` `STOCK_OHLC_CANDLE_VOLUME` `STOCK_OPEN_HILO_CLOSE` `STOCK_VOLUME`

一般的なグラフの子タグ: これらのタグは、様々なカスタマイズ・オプションを提供するために、大部分のグラフ・コンポーネント・タグでサポートされます。

表23-2は、これらのタグのリストと説明です。

表23-2 一般的なグラフの子タグ

子タグ	説明
`animationOnDisplay` `animationOnDataChange`	グラフのアニメーション効果の構成。
`background` `graphFont` `graphFootnote` `graphPlotArea` `graphSubTitle` `graphTitle`	タイトルを含むグラフ要素の外観のカスタマイズ。
`attributeFormat`	順序軸およびマーカー・ツールチップでカテゴリの属性をフォーマット。
`legendArea` `legendText` `legendTitle`	グラフの凡例のカスタマイズ。
`markerText` `x1Format` `y1Format` `y2Format` `zFormat`	各軸関連のマーカーのカスタマイズ。
`o1Axis` `o1MajorTick` `o1TickLabel` `o1Title`	棒、面、組合せ、折れ線、レーダーおよび株価チャートとともに使用する順序軸(カテゴリ軸)をグループ・ラベルでカスタマイズ。
`x1Axis` `x1MajorTick` `x1TickLabel` `x1MinorTick` `x1Title`	散布図およびバブル・グラフとともに使用するX軸を数値ラベルでカスタマイズ。
`y1Axis` `y1MajorTick` `y1TickLabel` `y1MinorTick` `y1Title`	Y1軸のカスタマイズ。

子セット・タグ:これらのタグは、無数の関連するタグのセットをラップします。

表23-3は、これらのタグのリストと説明です。

表23-3 グラフの子セット・タグ

子セット・タグ	説明
`alertSet`	エラーや警告など、個別の記号で強調表示する必要のある追加データ・ポイントを定義する`dvt:alert`タグをラップします。
`annotationSet`	グラフ上に注釈を定義する`dvt:annotation`タグをラップします。注釈は、グラフ上の特定のデータ・ポイントと関連付けられます。
`referenceObjectSet`	グラフに対する参照線または参照領域を定義する`dvt:referenceObject`タグをラップします。指定したグラフに対して参照オブジェクトをいくつでも定義できます。
`seriesSet`	グラフ上のデータ・マーカーまたは系列のセットを定義する`dvt:series`タグをラップします。
`shapeAttributesSet`	グラフのサブコンポーネントに相互作用プロパティを指定する`dvt:shapeAttributes`タグをラップします。

いずれの場合にも、設計中にまずラッパー・タグを作成し、その後にセット内の各アイテムの関連タグを作成する必要があります。例23-1に、面グラフの2つのアラート・ポイントを定義するアラート・タグのセットを作成する場合のタグのシーケンスを示します。

例23-1 アラート・タグのセットのサンプル・コード

<dvt:areaGraph id="areaGraph1" subType="AREA_VERT_ABS">
  <dvt:background>
    <dvt:specialEffects/>
  </dvt:background>
  <dvt:graphPlotArea/>
  <dvt:alertSet>
    <dvt:alert xValue="Boston" yValue="3.50"
               yValueAssignment="Y1AXIS" imageSource="myWarning.gif"/>
    <dvt:alert xValue="Boston" yValue="5.50"
               yValueAssignment="Y1AXIS" imageSource="myError.gif"/>
  </dvt:alertSet>
  <dvt:o1Axis/>
  <dvt:y1Axis/>
  <dvt:legendArea automaticPlacement="AP_NEVER"/>
</dvt:areaGraph>

グラフ固有の子タグ: これらのタグは、特定のグラフ・タイプまたはグラフの特定部分に使用します。

表23-4は、これらのタグのリストと説明です。

表23-4 グラフ固有の子タグ

子タグ	説明
`specialEffects` `gradientStopStyle`	`dvt:background`、`dvt:legendArea`、`dvt:graphPlotArea`、`dvt:graphPieFrame`、`dvt:series`、`dvt:referenceObject`または`dvt:timeSelector`子コンポーネントとの組合せでのみグラフに使用されるグラデーション。
`sliceLabel` `x1TickLabel` `y2TickLabel` `y1TickLabel` `x1Format` `y1Format` `y2Format` `zFormat` `stockVolumeFormat`	グラフの数値データの値の書式設定。
`timeAxisDateFormat` `timeSelector`	面、棒、組合せ、折れ線および積上げ棒グラフの時間軸のカスタマイズ。
`timeSelector`	マスター/ディテール・グラフの時間軸上の範囲の選択。
`paretoLine` `paretoMarker`	パレート・グラフのカスタマイズ。
`graphPieFrame` `slice` `sliceLabel`	円グラフのカスタマイズ。
`sparkItem`	スパークチャートのカスタマイズ。
`stockMarker` `stockVolumeformat` `volumeMarker`	株価チャートのカスタマイズ。

すべてのタグとその属性の詳細、および有効な値のリストは、DVTタグのドキュメントを参照してください。JDeveloperで特定のグラフ・タグのこのドキュメントにアクセスするには、構造ウィンドウでタグを選択し、[F1]キーを押すか、「ヘルプ」をクリックします。

23.2.3 ページへのグラフの追加方法

簡単なUI優先開発を使用してページを設計しているときには、「コンポーネント」ウィンドウを使用してグラフをJSFページに追加します。ページにグラフ・コンポーネントをドラッグ・アンド・ドロップすると、「グラフの作成」ダイアログに使用可能なグラフ・タイプのカテゴリが説明とともに表示され、グラフの作成を視覚的に支援します。グラフのタイトルおよび凡例のクイックスタート・レイアウトも指定できます。図23-36に、デフォルトの縦方向の集合棒グラフ・タイプが選択された棒グラフ用「棒グラフの作成」ダイアログを示します。

図23-36 縦方向の集合棒グラフ用の「棒グラフの作成」ダイアログ

ダイアログが完了して、ページにグラフが追加されると、「プロパティ」ウィンドウを使用して、データ値を指定し、グラフに追加の表示属性を構成できます。

「プロパティ」ウィンドウで、プロパティ・フィールドにマウス・カーソルを合わせると表示されるアイコンをクリックすることで、プロパティの説明や編集オプションを表示できます。図23-37に、棒グラフ・コンポーネントのvalue属性のドロップダウン・メニューを示します。

図23-37 棒グラフ・コンポーネントのValue属性のドロップダウン・メニュー

注意:

アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用してグラフを作成でき、バインドが自動的に行われます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「データ・バインドされたグラフの作成」の章を参照してください。

始める前に:

グラフの属性やグラフの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、23.2.2項「グラフの構成」を参照してください。

他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、23.1.3項「グラフ・コンポーネントの追加機能」を参照してください。

ページにグラフを追加する手順:

「コンポーネント」ウィンドウで、「ADFデータ視覚化」ページの「グラフとゲージ」パネルから希望するグラフのカテゴリをページにドラッグ・アンド・ドロップし、「グラフの作成」ダイアログを開きます。
ダイアログを使用して、グラフ・タイプと、グラフ・タイトル、凡例およびラベルの表示用クイック・スタート・レイアウトを選択します。ダイアログのヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
「OK」をクリックしてグラフをページに追加します。
「プロパティ」ウィンドウで、グラフの属性を確認します。ヘルプ・ボタンを使用して、グラフ・タイプ・コンポーネントの完全なタグ・ドキュメントを表示します。
「共通」セクションを開きます。このセクションを使用して、次の属性を設定します。
- SubType: グラフ・タイプのバリエーションを変更する場合は、属性ドロップダウン・メニューから希望するタイプを選択します。グラフによって有効な値は異なります。
  
  たとえば、棒グラフに対する有効な値は次のとおりです。
  - BAR_VERT_CLUST: 縦向きの集合棒グラフ。
  - BAR_VERT_CLUST_SPLIT2Y: 集合縦棒分割二重Yグラフ。
  - BAR_VERT_CLUST2Y: 集合縦棒二重Yグラフ。
  - BAR_VERT_FLOAT_STACK: フローティング積み上げ縦棒グラフ。
  - BAR_VERT_PERCENT: パーセント縦棒グラフ。
  - BAR_VERT_STACK: 積上げ縦棒グラフ。
  - BAR_VERT_STACK_SPLIT2Y: 積上げ縦棒分割二重Yグラフ。
  - BAR_VERT_STACK2Y: 積上げ縦棒二重Yグラフ。
「グラフ・データ」セクションを開きます。次のフィールドの値を設定して、グラフのデータ値を指定します。
- Value: EL式を使用してデータ・モデル(DataModelのインスタンス)を指定します。または、メトリック値をJava.lang.NumberオブジェクトまたはStringのいずれかとして設定します。
- TabularValue: または、表形式のデータ・セットをJava.util.Listオブジェクトとして指定します。詳細は、23.2.5項「表形式のデータを使用したグラフの作成方法」を参照してください。
「外観」セクションを開きます。次のフィールドの値を設定して、表示属性を指定します。
- ShortDesc: グラフの目的およびスクリーン・リーダーで使用するための構造の説明を入力します。
- EmptyText: グラフにデータがない場合に表示するエラー・テキストを指定します。

クライアントがサポートしている場合、グラフはクライアントにHTML5イメージ形式で表示されます。グラフのイメージ形式の詳細は、第23.2.6項「グラフのイメージ形式に関する必知事項」を参照してください。

23.2.4 ページにグラフを追加する場合の処理

「グラフの作成」ダイアログを使用してグラフ・コンポーネントをJSFページに挿入すると、グラフのカスタマイズをサポートする子タグのセットが自動的に挿入されます。例23-2に、図23-36のクイック・スタート・レイアウトを選択した棒グラフ用にJSFページに挿入されたコードを示します。

例23-2 グラフのサンプル・コード

<dvt:barGraph id="graph1" subType="BAR_VERT_CLUST">
  <dvt:background>
    <dvt:specialEffects/>
  </dvt:background>
  <dvt:graphPlotArea/>
  <dvt:seriesSet>
    <dvt:series/>
  </dvt:seriesSet>
  <dvt:o1Axis/>
  <dvt:y1Axis/>
  <dvt:legendArea automaticPlacement="AP_NEVER"/>
</dvt:barGraph>

ページにグラフ・コンポーネントを挿入した後、ビジュアル・エディタの専用コンテキスト・メニューや「プロパティ」ウィンドウのボタンが使用可能になり、グラフ機能のカスタマイズをサポートします。詳細は、23.2.7項「ビジュアル・エディタおよび「プロパティ」ウィンドウでのグラフの編集」を参照してください。

23.2.5 表形式データを使用したグラフの作成方法

グラフ・コンポーネントにデータのグリッドが使用される場合、グラフが作成されます。グラフ・コンポーネントのtabularData属性には、グリッドの作成やデータの移入にグラフで使用する値のリストを指定できます。表形式のデータを使用してグラフを作成するには、グラフのマネージドBeanのメソッドにデータを格納し、グラフ・コンポーネントのtabularData属性を使用してデータを参照する必要があります。

たとえば、図23-38の表には、2006、2007および2008の3つの列と、ShoesおよびBootsの2つの行があります。このデータから、3年間のブーツと靴の年間売上げを比較するグラフが生成されます。

図23-38 年間売上高の比較

マネージドBeanでは、表形式のデータを含むリストは、グラフに渡すデータ値ごとに3メンバーのObject配列で構成されます。各配列のメンバーは次のように編成される必要があります。

1つ目のメンバー(索引0)は、データ値のグリッドの列ラベルです。これは通常Stringです。グラフに時間軸がある場合は、JavaのDate型で指定する必要があります。列ラベルは、通常、グラフのグループを識別します。
2つ目のメンバー(索引1)は、データ値のグリッドの行ラベルです。これは通常Stringです。行ラベルはグラフで系列ラベルとして、通常、凡例に表示されます。
3つ目のメンバー(索引2)はデータ値で、通常Doubleです。

例23-3に、3年間の靴とブーツの年間売上げを比較するグラフに必要なデータのリストを作成するコードを示します。

例23-3 グラフ用のデータのリストを作成するコード

public List getTabularData() 
{
    ArrayList list = new ArrayList();
    String[] rowLabels  = new String[] {"Boots", "Shoes"};
    String[] colLabels  = new String[] {"2006", "2007", "2008"};
    Double [] [] values = new Double[][]{
        {120000.0, 122000.0, 175000.0},
        {90000.0, 110000.0, 150000.0}
        };
    for (int c = 0; c < colLabels.length; c++)
    {
     for (int r = 0; r < rowLabels.length; r++)
       {
        list.add (new Object [] {colLabels[c], rowLabels[r], 
            new Double (values[r][c])});
       }
    }
    return list;
}

図23-39に、例23-3のメソッドを集合縦棒グラフのtabularData属性に追加した場合にページでレンダリングされるグラフを示します。

図23-39 表形式データを使用して年間売上高を比較する棒グラフ

始める前に:

他のADF Faces機能を使用して追加できる他の機能について理解しておくことをお薦めします。詳細は、23.1.3項「グラフ・コンポーネントの追加機能」を参照してください。

ページにすでにグラフが存在している必要があります。ない場合は、この章の指示に従ってグラフを作成します。詳細は、23.2.3項「ページへのグラフの追加方法」を参照してください。

データを供給するメソッドを作成し、それをグラフのマネージドBeanに追加する必要もあります。詳細なヘルプが必要な場合は、3.6項「マネージドBeanの作成と使用」を参照してください。

マネージドBeanからのデータを使用するグラフを作成する手順:

「構造」ウィンドウで「dvt:typeGraph」ノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、「グラフ・データ」セクションを展開します。
「TabularData」属性のドロップダウン・メニューから、「式ビルダー」を選択します。
「式ビルダー」ダイアログで検索ボックスを使用してグラフのマネージドBeanを検索します。
マネージドBeanのノードを展開し、表形式データのリストを含むメソッドを選択します。
「OK」をクリックします。

式が作成されます。

たとえば、sampleGraphというマネージドBeanとgetTabularDataというメソッドの場合、式ビルダーによりグラフのtabularData属性の値として、コード#{sampleGraph.tabularData}が生成されます。

23.2.6 グラフのイメージ形式に関する必知事項

グラフでは、HTML5、FlashおよびPNGなどのイメージ形式がサポートされています。使用されるイメージ形式は、アプリケーションの設定およびクライアント環境によって異なります。

次のパラメータを設定または変更することで、特定のイメージ形式を使用するようにアプリケーションを構成できます。

oracle.adf.view.rich.dvt.DEFAULT_IMAGE_FORMAT

このコンテキスト初期化パラメータは、新しいすべてのアプリケーションのweb.xmlに自動的に追加され、デフォルトではHTML5に設定されます。詳細は、A.2.3.28項「グラフとゲージのイメージ形式」を参照してください。
スキン・スタイル

Skyrosスキンを使用している場合、グラフはHTML5イメージ形式で表示されます。新しいアプリケーションでは、デフォルトでこのスキンが使用されます。スキニングおよびスタイルの詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
flash-player-usage

adf-config.xmlでflash-player-usageコンテキスト・パラメータを設定すれば、アプリケーション全体にわたってFlashコンテンツの使用を無効にできます。詳細は、A.4.3項「コンポーネント出力形式としてのFlashの構成」を参照してください。

指定したイメージ形式がクライアントで使用できない場合、アプリケーションでは使用可能な形式がデフォルトになります。たとえば、クライアントがHTML5をサポートしていない場合、アプリケーションでは次が使用されます。

Flash (Flash Playerが使用可能な場合)。
Portable Network Graphics (PNG)出力形式。PNG出力形式は、グラフの印刷時にも使用されます。静的レンダリングは、PNG出力形式使用時には完全にサポートされますが、次のような一部のインタラクティブ機能は使用できません。
- アニメーション
- コンテキスト・メニュー
- ドラッグ・アンド・ドロップ・ジェスチャ
- 円グラフのスライスのインタラクティブ動作
- 参照オブジェクトのホバー動作
- ポップアップのサポート
- 選択項目
- 系列のロールオーバー動作

23.2.7 ビジュアル・エディタおよび「プロパティ」ウィンドウでのグラフの編集

ビジュアル・エディタおよび「プロパティ」ウィンドウでグラフ・コンポーネントを編集する場合、専用コンテキスト・メニューやボタンが利用でき、グラフ機能のカスタマイズをサポートします。タイトル、凡例エリア、描画エリア、背景、軸ラベルおよびグラフ系列(棒など)の表示といったグラフの子コンポーネントを選択すると、編集を選択できるコンテキスト・メニューが表示されます。図23-40に、ビジュアル・エディタに表示された横棒グラフを示します。

図23-40 ビジュアル・エディタ内の横棒グラフ

ビジュアル・エディタ内のポップアップでは、カスタマイズするグラフ機能の選択を確認します。たとえば、図23-41では、折れ線グラフの描画エリアに表示されたポップアップを示しています。

図23-41 折れ線グラフでのビジュアル・エディタのポップアップ

ビジュアル・エディタでグラフ機能を選択すると、専用の編集コンテキスト・メニューが使用できるようになります。図23-42に示す折れ線グラフの描画エリアのコンテキスト・メニューからは、横のグリッド・マークのデフォルト表示の削除など、様々なオプションを選択できます。コンテキスト・メニューや「プロパティ」ウィンドウのボタンを使用すると、描画エリアの特殊塗りつぶし効果を構成することもできます。グラフ・タグの選択は、ビジュアル・エディタ、「構造」ウィンドウ、「プロパティ」ウィンドウおよびソース・エディタで同期化されます。

図23-42 折れ線グラフの描画エリアのコンテキスト・メニュー

折れ線グラフの構成の詳細は、23.5.3項「グラフでの折れ線の外観の変更」を参照してください。特殊塗りつぶし効果の詳細は、23.4.3項「グラフでのグラデーション特殊効果の使用」を参照してください。

23.3 グラフ表示要素のカスタマイズ

サイズ変更、背景および描画エリアの外観、タイトル、軸、ラベル、凡例およびツールチップなどのグラフの表示要素は構成できます。

23.3.1 グラフのサイズとスタイルの変更

グラフの幅と高さはカスタマイズでき、コンテナのサイズ変更に基づいて動的にサイズ変更することができます。グラフで使用されるスタイルシートを制御することもできます。グラフのこれらの2つの側面は、ともにグラフのinlineStyle属性を使用するという点で関連性があります。

23.3.1.1 グラフが初めて表示される際のサイズの指定方法

dvt:typeGraphタグの属性に値を指定すると、グラフの初期サイズを指定できます。グラフの動的サイズ変更を指定しない場合、初期サイズが、グラフの唯一の表示サイズです。

始める前に:

グラフが初めて表示される際のサイズを指定する手順:

「構造」ウィンドウで「dvt:typeGraph」ノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウの「スタイル」セクションで、グラフ・タグのInlineStyle属性に値を入力します。

たとえば、幅200ピクセル、高さ200ピクセルのグラフを作成するには、InlineStyle属性にwidth:200px;height:200pxと設定します。

23.3.1.2 グラフの動的サイズ変更の指定方法

JSFページでコンテナのサイズが変更されたときにグラフがサイズ変更されるようにするには、dvt:typeGraphタグの2つの属性のそれぞれに値を入力する必要があります。この機能用に指定する値は、サイズの異なるブラウザ・ウィンドウの領域を使用するグラフ・コンポーネントの作成にも有用です。

始める前に:

グラフの動的サイズ変更を有効にする手順:

「構造」ウィンドウで「dvt:typeGraph」ノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウの「動作」セクションで、DynamicResize属性のドロップダウン・リストから値DYNAMIC_SIZEを選択します。
「スタイル」セクションで、InlineStyle属性の幅と高さに、ピクセルの定数または相対的割合を入力します。

たとえば、コンテナの50%の幅で200ピクセルの高さのグラフを作成するには、InlineStyle属性にwidth:50%;height:200pxという設定を使用します。

ベスト・プラクティスのヒント:

100%の幅を指定する場合は、StyleClassをAFStretchWidthに設定します。

23.3.1.3 特定のスタイルシートをグラフに使用する方法

dvt:typeGraphタグに使用できる標準スタイルを選択できます。グラフに使用するカスタム・スタイルシートを指定することもできます。

始める前に:

グラフのスタイルシートを選択する手順:

「構造」ウィンドウで「dvt:typeGraph」ノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、「スタイル」セクションを展開します。
StyleClass属性に、グラフに使用するCSSスタイル・クラスの名前を入力します。
プロパティ・エディタで、グラフに使用するCSSスタイル・クラスを選択します。

たとえば、グラフに薄い灰色の背景を設定するには、OraBGGrayLightクラスを選択します。

スタイルシートおよびCSSスタイル・クラスの詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。

23.3.2 グラフの背景、描画エリアおよびタイトルの変更

グラフでは、使用しているスタイルに基づいて、背景と描画エリアにデフォルト設定が自動的に指定されます。これらの設定は、グラフの子タグを使用してカスタマイズできます。

グラフには、タイトル、サブタイトル、脚注のオプションも指定できます。デフォルトでは、タイトルと脚注にはテキストは指定されていません。この情報を入力する際、テキストに使用するフォントとフォント特性も指定できます。

23.3.2.1 グラフの背景と描画エリアのカスタマイズ方法

グラフの背景と描画エリアに関連する次の箇所をカスタマイズできます。

背景:グラフがプロットされる領域。
描画エリア:円グラフ以外のすべてのグラフでデータがプロットされるフレーム。描画エリアの最低2つの境界に軸が表示されます。
円フレーム:軸を使用しない円グラフがプロットされるフレーム。

始める前に:

グラフの背景と描画エリアをカスタマイズする手順:

グラフの背景をカスタマイズする場合は、次のようにします。
1. 構造ウィンドウでdvt:backgroundノードを右クリックし、「プロパティに移動」を選択します。
2. 背景の塗りつぶしの色を変更するには、FillColor属性のドロップダウンから「編集」を選択し、プロパティ・エディタで使用する色を選択します。
円グラフ以外のグラフの描画エリアをカスタマイズする場合は、次のようにします。
1. 構造ウィンドウでdvt:graphPlotAreaノードを右クリックし、「プロパティに移動」を選択します。
2. 「プロパティ」ウィンドウで、属性ドロップダウン・メニューを使用して、描画エリアのBorderColorおよびFillColor属性に対してカスタマイズする色を選択します。
円グラフの描画エリアをカスタマイズする場合は、次のようにします。
1. 構造ウィンドウでdvt:graphPieFrameノードを右クリックし、「プロパティに移動」を選択します。
2. 「プロパティ」ウィンドウで、属性ドロップダウン・メニューを使用して、描画エリアのBorderColorおよびFillColor属性に対してカスタマイズする色を選択します。

注意:

グラフの背景と描画エリアの色にグラデーション特殊効果を追加してカスタマイズすることもできます。詳細は、23.4.3項「グラフでのグラデーション特殊効果の使用」を参照してください。

23.3.2.2 グラフのタイトルと脚注の指定方法

グラフのタイトル、サブタイトルおよび脚注を指定できます。これらのテキスト・エントリに、グラフの個別の子タグを使用します。これらの各子タグの属性では、テキスト・フィールドの水平方向の位置合せ、テキストの内容と、テキストをレンダリングするかどうかを定義できます。

タイトル、サブタイトルおよび脚注のタグでは、子グラフ・フォント・タグの使用がサポートされ、各テキスト・フィールドに使用するフォント特性を指定できます。

始める前に:

グラフのタイトルと脚注を指定する手順:

グラフのタイトルを入力する場合は、次のようにします。
1. 「構造」ウィンドウで、「dvt:typeGraph」ノードを右クリックし、「グラフ・タイプの中に挿入」→「ADFデータ視覚化」→「タイトル」を選択します。
2. 「プロパティ」ウィンドウを使用して、dvt:graphTitleタグの属性に値を指定します。
3. テキストに特定のフォント特性を指定する場合は、「構造」ウィンドウで「dvt:graphTitle」ノードを右クリックし、「タイトルの中に挿入」→「フォント」を選択します。
4. 「プロパティ」ウィンドウを使用して、dvt:graphFontタグの属性に値を指定します。
グラフのサブタイトルを入力する場合は、次のようにします。
1. 「構造」ウィンドウで、「dvt:typeGraph」ノードを右クリックし、「グラフ・タイプの中に挿入」→「ADFデータ視覚化」→「サブタイトル」を選択します。
2. 「プロパティ」ウィンドウを使用して、dvt:graphSubtitleタグの属性に値を指定します。
3. テキストに特定のフォント特性を指定する場合は、「構造」ウィンドウで「dvt:graphSubtitle」ノードを右クリックし、「サブタイトルの中に挿入」→「フォント」を選択します。
4. 「プロパティ」ウィンドウを使用して、dvt:graphFontタグの属性に値を指定します。
グラフの脚注を入力する場合は、次のようにします。
1. 「構造」ウィンドウで、「dvt:typeGraph」ノードを右クリックし、「グラフ・タイプの中に挿入」→「ADFデータ視覚化」→「脚注」を選択します。
2. 「プロパティ」ウィンドウを使用して、dvt:graphFootnoteタグの属性に値を指定します。
3. テキストに特定のフォント特性を指定する場合は、「構造」ウィンドウで「dvt:graphFootnote」ノードを右クリックし、「脚注の中に挿入」→「フォント」を選択します。
4. 「プロパティ」ウィンドウを使用して、dvt:graphFontタグの属性に値を指定します。

23.3.3 グラフの軸およびラベルのカスタマイズ方法

グラフには次の軸を使用できます。

順序軸(o1軸とも呼ばれる):グラフの順序(カテゴリ)軸は、レーティングやステージなどの順序付けされたデータを示したり、異なる都市や異なる製品などの名前のデータを示します。順序軸は、棒グラフ、折れ線グラフ、組合せグラフまたはレーダー・グラフに表示されます。順序軸が水平で時間データを含む場合は、時間軸と呼ばれます。

順序軸の例は、縦棒グラフの描画エリアの下部を横切る線です。この軸上の値は、標示されているデータの程度は示しません。そのかわり、データが属する異なるグループを示します。
X1軸:X1軸は、グラフの横軸に沿って表示される値を示します。この軸は、グループ・ラベルではなく、一定間隔の数値を持ちます。X軸とも呼ばれます。X1軸は、バブル・グラフおよび散布図で表示されます。
Y1軸:Y1軸は、第1Y軸です。通常、描画エリアの左側の縦方向の値軸です。一定間隔の数値を持ちます。
Y2軸:Y2軸は、第2Y軸です。通常、描画エリアの右側の縦軸です。一定間隔の数値を持ちます。

各軸には、カスタマイズをサポートするいくつかのグラフ子タグがあります。次の項で、軸の様々なカスタマイズに使用できるオプションについて説明します。

23.3.3.1 軸のタイトル、外観およびスケーリングの指定方法

次のグラフ子タグで、軸のタイトルと外観のカスタマイズがサポートされます。

タイトル:軸のタイトルのテキストと位置合せを指定します。dvt:o1Title、dvt:x1Title、dvt:y1Titleおよびdvt:y2Titleのタグがあります。適切なタイトル・タグを使用しないと、軸にタイトルは表示されません。
軸: 色、線幅、スケーリング、ティック・マーク間の増分、軸の可視性および特定のグラフ・タイプでのスクロールを制御します。dvt:o1Axis、dvt:x1Axis、dvt:y1Axisおよびdvt:y2Axisのタグがあります。

注意:

順序軸には数値は表示されないため、dvt:o1Axisタグにはスケーリング属性はありません。

始める前に:

軸のタイトルと外観を指定する手順:

「構造」ウィンドウで、「dvt:typeGraph」ノードを右クリックし、「グラフ・タイプの中に挿入」→「ADFデータ視覚化」→軸タイプのタイトルを選択します。

たとえば、棒グラフのo1軸のタイトルを設定するには、「棒の中に挿入」→「ADFデータ視覚化」→「O1タイトル」を選択します。
「プロパティ」ウィンドウで、軸のタイトルを入力し、必要に応じてこのタグの他の属性に値を指定します。
タイトルのフォント属性を指定する場合は、次のようにします。
1. 「構造」ウィンドウで、「dvt:typeTitle」ノードを右クリックし、「タイトルの中に挿入」→「フォント」を選択します。
2. 「プロパティ」ウィンドウで、フォント特性に目的の値を入力します。

23.3.3.2 軸でのスクロールの指定

グラフ軸上のスクロールは、次のグラフ・タイプに対して指定できます。

dvt:o1Axis、dvt:y1Axisおよびdvt:y2Axisタグの面、棒および折れ線グラフ。
dvt:x1Axis、dvt:y1Axisおよびdvt:y2Axisタグのバブル・グラフおよび散布図。

デフォルトでは、グラフ軸のscrolling属性はoffに設定されています。scrolling属性には次の値を指定できます。

off: スクロールは無効です(デフォルト)。
on: スクロールは有効で、スクロールバーが常に表示されます。
asNeeded: スクロールは有効ですが、スクロールバーは最初表示されません。グラフでズームすると、スクロールバーが表示され、そのセッション中は表示されたままになります。
hidden: スクロールは有効ですた、スクロールバーは常に非表示です。ユーザーはパン・スクローリングを使用できます。

23.3.3.3 軸のティック・マークとティック・ラベルの外観の制御方法

ティック・マークは、グラフのスケール上の特定の値を示すために使用されます。次のグラフ子タグで、軸のティック・マークとラベルのカスタマイズがサポートされます。

主ティック:軸のティック・マークの色、幅とスタイルを制御します。dvt:o1MajorTick、dvt:x1MajorTick、dvt:y1MajorTickおよびdvt:y2MajorTickのタグがあります。主ティックの増分は、デフォルトでは自動的に計算されますが、majorIncrement属性でティックの段階を指定できます。
副ティック: 軸上の副ティック・マークの色、幅およびスタイルを制御します。dvt:x1MinorTick、dvt:y1MinorTickおよびdvt:y2MinorTickのタグがあります。副ティックの増分は、デフォルトでは主ティックの増分の半分ですが、minorIncrement属性でティックの段階を指定できます。副ティックにはラベルは付けられません。
ティック・ラベル: 主ティックのラベルの向きを制御し、ラベルのフォント特性を指定できます。dvt:o1TickLabel、dvt:x1TickLabel、dvt:y1TickLabelおよびdvt:y2TickLabelのタグがあります。これらのタグは、ラベルのフォント特性を変更するdvt:graphFont子タグを持つこともできます。

始める前に:

順序軸のティック・ラベルの外観を制御する手順:

ビジュアル・エディタで、グラフ上の「O1ティック・ラベル」要素を選択します。

または、「構造」ウィンドウで「dvt:o1Axis」ノードを選択し、「プロパティ」ウィンドウでO1軸の構成をクリックし、「値ラベル」を選択することもできます。

「プロパティ」ウィンドウで、次のプロパティに必要な値を入力します:

TextRotation: ティック・ラベルを読みやすくするために、テキストの回転度数の指定に使用します。

ヒント:

最良の結果を得るには、90度の倍数の回転角度を使用します。他の角度はレンダリング・テクノロジで適切にサポートされず、お薦めできません。

TickLabelSkipMode: 順序軸上でティック・ラベルを表示するかどうか、およびどのように表示するかの指定に使用します。TLS_MANUALで値を設定すると、必要に応じてtickLabelSkipCount属性を使用してティック・ラベル間に表示するティック・ラベルの数を設定すること、およびtickLabelSkipFirst属性を使用してスキップする最初のティック・ラベルのインデックスを設定することができます。

必要に応じて、「プロパティ」ウィンドウで「フォントの構成」ボタンをクリックし、子のdvt:graphFontタグのプロパティを設定します。

X軸のティック・マークとティック・ラベルの外観を制御する手順:

「構造」ウィンドウで、「dvt:typeGraph」ノードを右クリックし、「グラフ・タイプの中に挿入」→「ADFデータ視覚化」→「X1主ティック」を選択します。
「プロパティ」ウィンドウで、このタグの属性に希望の値を入力し、「ティック・ラベルの構成」ボタンをクリックしてグラフに「X1ティック・ラベル」タグを追加します。
「プロパティ」ウィンドウで、「X1ティック・ラベル」に希望の値を入力し、必要な場合は「フォントの構成」ボタンをクリックしてティック・ラベルのフォント特性を指定します。
グラフで副ティックを指定する場合は、次のようにします。
1. 「構造」ウィンドウで、グラフ・ノードを右クリックし、「グラフ・タイプの中に挿入」→「ADFデータ視覚化」→「X1副ティック」を選択します。
2. 「プロパティ」ウィンドウで、フォント特性に目的の値を入力します。
  
  注意:
  
  tickStyle属性には、GS_NONEまたはGS_AUTOMATIC以外の値を指定する必要があります。

他のグラフの軸のティック・マークの外観を制御する手順は、X軸に対する手順と似ています。ただし、主ティックとラベルのタグをカスタマイズし、カスタマイズする特定の軸に関連付けられた副ティックを挿入します。

23.3.3.4 軸の数値の書式設定

dvt:markerTextタグで、軸の数値の書式を制御できます。dvt:markerTextの子タグ(dvt:x1Format、dvt:y1Formatおよびdvt:y2Format)で特定の軸の数値書式をラップします。

注意:

順序軸には数値は含まれないため、この軸には書式はありません。

これらの軸の数値の書式を設定するには、23.4.4項「グラフのデータ値の書式設定」に示すように、該当する軸に対する子タグを挿入します。

23.3.3.5 データ軸の最小値および最大値の設定方法

Y軸にはdvt:y1Axisとdvt:y2Axisというグラフの子タグがあり、軸の最初の値がサポートされます。二重Yグラフの各Y軸に異なるスケーリングを指定できます。たとえば、Y1軸は売上数量(単位: 100)を表し、Y2軸は売上高(単位: 1000ドル)を表すことができます。

散布図やバブル・グラフなどの一部のグラフには、最小値や最大値も設定可能なdvt:x1Axis子タグが含まれています。

始める前に:

Y1軸の最初の値を指定する手順:

「構造」ウィンドウで「dvt:y1Axis」ノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、AxisMinValueフィールドにY1軸の最初の値を入力します。
AxisMinAutoScaledフィールドで、属性ドロップダウン・リストから「false」を選択します。

最小値が適用されるようにするには、この属性を設定する必要があります。

Y2軸の最初の値を設定するには、同様の手順を使用しますが、グラフの子としてdvt:y2Axisタグを最初に挿入します。

23.3.4 グラフの凡例のカスタマイズ方法

グラフ・コンポーネントには、凡例をカスタマイズする次の種類の子タグが用意されています。

グラフに関連する凡例エリアの色、枠、可視性、位置およびスクロール可能性を指定するdvt:legendAreaタグ。
凡例の色付けされた各エントリに関連するテキストのフォント特性と位置を指定するdvt:legendTextタグ。
凡例エリアのオプションのタイトルとフォント特性を指定するdvt:legendTitleタグ。

始める前に:

凡例エリア、凡例テキストとタイトルをカスタマイズする手順:

構造ウィンドウでdvt:legendAreaノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウを使用して、このタグの属性に値を指定します。たとえば、凡例エリアには次の属性を指定できます。
- AutomaticPlacementおよびPosition: グラフの右または下部での凡例エリアの自動配置を、デフォルト値AP_ALWAYSで指定します。AP_NEVERでの値の設定には、凡例エリアの配置に使用されるposition属性の値が必要です。
- Scrolling: 使用可能なスペースより大きなスペースが必要な場合、asNeededの値を使用して、汎用エリアでのスクロールを指定します。デフォルトではこの値はoffに設定されています。
- PositionHint: 円グラフ、極グラフおよびレーダー・グラフで、値alignToCenterを使用して、描画エリアの中央方向に凡例の位置を指定します。デフォルトでは、値は、グラフ枠のエッジ方向へ凡例を配置するalignToEdgeに設定されます。
- MaxWidth: 凡例エリアの最大幅をグラフ・エリアのパーセンテージとして指定します。デフォルトでは、この値は空の文字列に設定されており、この場合は幅がグラフの設定値に基づいて自動的に設定されます。
  
  たとえば、凡例の最大幅をグラフ・エリアの50%に設定するには、50%と入力します。
凡例テキストをカスタマイズする場合は、次のようにします。
1. 「構造」ウィンドウで、「dvt:typeGraph」ノードを右クリックし、「グラフ・タイプの中に挿入」→「ADFデータ視覚化」→「凡例テキスト」を選択します。
2. 「プロパティ」ウィンドウを使用して、このタグの属性に値を入力します。
3. 「dvt:legendText」ノードを右クリックし、「凡例テキストの中に挿入」→「フォント」を選択します。
4. 「プロパティ」ウィンドウを使用して、フォント・タグの属性に値を指定します。
凡例のタイトルを入力する場合は、次のようにします。
1. 「構造」ウィンドウで、「dvt:typeGraph」ノードを右クリックし、「グラフ・タイプの中に挿入」→「ADFデータ視覚化」→「凡例タイトル」を選択します。
2. 「プロパティ」ウィンドウを使用して、このタグの属性に値を入力します。
3. 「dvt:legendTitle」ノードを右クリックし、「凡例タイトルの中に挿入」→「フォント」を選択します。
4. 「プロパティ」ウィンドウを使用して、フォント・タグの属性に値を指定します。

23.3.5 グラフのツールチップのカスタマイズ

ツールチップは、データ・マーカーのIDや詳細情報を表示するのに便利です。markerTextを表示する領域のない小さいグラフには非常に便利です。タイトル、サブタイトル、脚注、凡例テキスト、注釈などのテキストが切り捨てられている場合は、そのコンポーネントのツールチップがグラフに自動的に表示されます。

ほとんどのグラフで、データ・マーカー上にカーソルを置くと、ツールチップが表示されます。折れ線または面グラフでは、単に線上または面上ではなく、データ・マーカー上、あるいは線または面の隅にカーソルを置く必要があります。

各グラフ・マーカー(棒など)で情報付きのツールチップが表示されるように指定できます。グラフのツールチップのカスタマイズには、次のグラフの属性が使用できます。

markerTooltipType: マーカー(棒など)に対するツールチップを表示するかどうかを指定し、ツールチップに表示する情報の種類を特定します。テキストのみ、値のみ、あるいはテキストと値の情報を表示できます。特定のグラフ・タイプでは、積上げグラフ・マーカーごとに累積データ値を表示したり、円グラフのスライス・マーカーごとに割合のデータを表示できます。
seriesTooltipLabelType: 凡例に表示される値のセットごとにツールチップを表示するかどうかを指定します。この属性では、系列ツールチップに表示される情報の種類も制御されます。たとえば、系列全体を示す一般的な語(「製品」など)のテキストを表示するか、系列の特定のメンバーを示す特定の語(特定の製品名など)のテキストを表示するかを選択できます。

注意:

グラフでは、グラフのmarkerTooltipType属性にテキストを含む設定が行われている場合のみ、系列のツールチップ・ラベルが表示されます。
groupTooltipLabelType: 軸上のデータ・グループに対するツールチップ・ラベルを表示するかどうかを指定します。たとえば、特定の製品の売上げが年ごとまたは四半期ごとにまとめられているとします。グループ全体を示す一般的な語(「時間」など)のテキストを表示するか、グループの各メンバーを示す特定の語(四半期を表すQ1、Q2、Q3、Q4など)のテキストを表示するかを選択できます。

グラフのmarkerTooltipTemplate属性をトークン化された文字列に設定することにより、グラフ内のすべてのマーカー・ツールチップの書式をすばやく設定できます。この属性には1つの文字列を指定でき、これには事前に定義されたトークンのセットをいくつでも含めることができます。次に例を示します。

<dvt:lineGraph markerTooltipTemplate="Template Based Tooltip NEW_LINE SERIES_LABEL GROUP_LABEL NEW_LINE Value: Y_VALUE"/>

表23-5に、サポートされるトークンのリストを示します。

表23-5 markerTooltipTemplate文字列トークン

トークン	説明
`NEW_LINE`	新しい行を挿入します。
`SERIES_LABEL`	このマーカーの系列の系列ラベル。
`GROUP_LABEL`	このマーカーのグループのグループ・ラベル。
`X_VALUE`	散布図またはバブル・マーカーあるいは連続時間軸マーカーのX値。
`Y_VALUE`	このマーカーのY値(このマーカーにY値がある場合)。
`Z_VALUE`	バブル・マーカーのZ値(バブルのサイズ)。
`PIE_VALUE`	円グラフのスライスの値。
`PIE_PERCENT`	円グラフのスライスのパーセント値。
`ACTUAL_VALUE`	ファンネル・セクションの実際の値。
`TARGET_VALUE`	ファンネル・セクションのターゲット値。
`HIGH_VALUE`	株価マーカーの高値。
`LOW_VALUE`	株価マーカーの低値。
`CLOSE_VALUE`	株価マーカーの終値。
`OPEN_VALUE`	株価マーカーの始値。
`VOLUME_VALUE`	株の出来高マーカーの出来高値。
`CUM_VALUE`	積上げグラフの累積積上げ値。
`CUM_PERCENT`	積上げパーセント・グラフまたはパレート・グラフの累積パーセント値。

23.4 グラフのテキスト、色およびデータ値の書式設定

すべてのグラフ・タイプに対して、テキスト、色およびデータ値の書式を設定できます。

23.4.1 グラフのテキストの書式設定

次のグラフのサブコンポーネントのテキストを書式設定できます。

注釈: dvt:annotationタグのみ。
軸のタイトル: dvt:o1Title、dvt:x1Title、dvt:y1Titleおよびdvt:y2Titleタグ。
軸のティック・ラベル: dvt:o1TickLabel、dvt:x1TickLabel、dvt:y1TickLabelおよびdvt:y2TickLabelタグ。
グラフのタイトル: dvt:graphFootnote、dvt:graphSubtitleおよびdvt:graphTitleタグ。
凡例: dvt:legendTextタグのみ。
マーカー: dvt:markerTextタグのみ。

dvt:graphFontタグを、テキストに書式設定する特定のサブコンポーネントの子として使用します。グラフのテキストの書式設定の例としては、23.3.2.2項「グラフのタイトルと脚注の指定方法」を参照してください。

23.4.1.1 スキンを使用したグラフ・フォントの全体的な設定方法

カスケード・スタイル・シート(CSS)を使用してスキンを作成し、アプリケーションでそのスキンを使用するように構成することにより、アプリケーション内のすべてのページにわたり、グラフ・コンポーネントのfont属性を設定できます。グラフ・コンポーネントで使用フォントを定義するスキンを適用することで、アプリケーション内のページは、CSSファイルの変更で簡単に変更できる一貫したスタイルで、より小さく整理されたものになります。

ADFデータ視覚化ツールのスキン・セレクタを使用すれば、グラフ・コンポーネントのフォント・スタイルを定義できます。グラフ・コンポーネントのスキン・セレクタは、次のものがあります。

af|dvt-graphFootnote
af|dvt-graphSubtitle
af|dvt-graphTitle
af|dvt-o1Title
af|dvt-x1Title
af|dvt-y1Title
af|dvt-y2Title
af|dvt-pieLabel
af|dvt-ringTotalLabel
af|dvt-legendTitle
af|dvt-legendText
af|dvt-markerText
af|dvt-o1TickLabel
af|dvt-x1TickLabel
af|dvt-y1TickLabel
af|dvt-y2TickLabel
af|dvt-annotation
af|dvt-sliceLabel
af|dvt-tooltips

ADFデータ視覚化ツールの汎用スキン・セレクタを使用すれば、複数のグラフ・コンポーネントにわたるfont属性も使用できます。汎用スキン・セレクタ名は:alias擬似クラスで終わり、複数のコンポーネントのスキンに影響を与えます。汎用グラフ・スキン・セレクタには、次のものがあります。

.AFDvtGraphFont:alias: すべてのグラフ・コンポーネントのfont属性を指定します。
.AFDvtGraphTitlesFont:alias: すべてのグラフ・タイトル・コンポーネントのfont属性を指定します。
.AFDvtGraphLabelsFont:alias: すべてのグラフ・ラベル・コンポーネントのfont属性を指定します。

始める前に:

カスタム・スキンを使用してグラフ・フォントを設定する手順:

グラフ・サブコンポーネント用に定義されたスキン・スタイル・セレクタを含むアプリケーションに、カスタム・スキンを追加します。次の属性の値を指定できます。
- -tr-font-family: フォント・ファミリ(名前)を指定します。複数のフォントを指定できない場合があります。複数のフォントが指定されている場合、最初のフォントが使用されます。
- -tr-font-size: フォントのサイズを指定します。絶対サイズの単位は次のように定義されます。
  - pt: ポイントは、CSS2で使用される標準フォント・サイトで、1ポイントは1/72インチに相当します。
  - in: インチで、1インチは72ポイントに相当します。
  - cm: センチメートルで、1センチメートルは約28ポイントに相当します。
  - mm: ミリメートルで、1ミリメートルは約2.8ポイントに相当します。
  - pc: パイカで、1パイカは12ポイントに相当します。
  この属性には、次のフォント・サイズ名も使用できます。
  - xx-small: 8ポイント
  - x-small: 9ポイント
  - small: 10ポイント
  - medium: 12ポイント
  - large: 14ポイント
  - x-large: 16ポイント
  - xx-large: 18ポイント
- -tr-font-style: フォントのスタイルを指定します。有効な値は、normalまたはitalicです。
- -tr-font-weight: フォントの太さを指定します。有効な値は、normalまたはboldです。
- -tr-text-decoration: 下線強調を描画するかどうかを指定します。有効な値は、noneまたはunderlineです。
- -tr-color: フォントの色を指定します。有効な値は、HTMLおよびCSSの色名です。World Wide Web Consortiumでは、aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange (CSS 2.1)、purple、red、silver、teal、whiteおよびyellowの17色を有効色名としています。
  
  この他、3、6または8桁のHEX (アルファ・チャネルは8桁HEXの最初の2桁)、RGBまたはRGBAも使用できます。
たとえば、mySkin.cssファイルのすべてのグラフ・タイトル用フォント・ファミリは次のように指定します。
```
af|dvt-graphTitle
{
  -tr-font-family: Comic Sans MS;
}
```
カスタム・スキン作成のヘルプが必要な場合は、『Oracle ADFスキン・エディタによるADFスキンの作成』のADFスキン・ファイルの作成に関する項を参照してください。
trinidad-config.xmlファイルでカスタム・スキンを使用するようにアプリケーションを構成します。

アプリケーションの構成のヘルプが必要な場合は、『Oracle ADFスキン・エディタによるADFスキンの作成』の「完成したADFスキンのWebアプリケーションへの適用」の章を参照してください。

スタイルおよびスキンの使用の詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。

23.4.2 グラフの一部への透明色の指定

グラフの各箇所に関連する子タグにborderTransparentおよびfillTransparent属性を設定することで、これらの箇所で透明色を表示するよう指定できます。デフォルトでは、これらの属性はtrueに設定されています。次のリストに、透明色をサポートするグラフの各部分を示します。

グラフの背景: dvt:backgroundタグを使用します。この要素には棒は含まれず、borderTransparent属性は適用されません。
グラフの凡例エリア: dvt:legendAreaタグを使用します。
グラフの円フレーム: dvt:graphPieFrameタグを使用します。
グラフの描画エリア: dvt:graphPlotAreaタグを使用します。

23.4.3 グラフでのグラデーション特殊効果の使用

グラデーションは、オブジェクトの色が段階的に変わる特殊効果です。グラデーションの各色は、ストップで表します。最初のストップはストップ0、2番目はストップ1のようになります。特殊効果をサポートするグラフのサブコンポーネントには、特殊効果のストップをいくつでも指定できます。

グラフの次のサブコンポーネントにグラデーション特殊効果を定義できます。

グラフの背景: dvt:backgroundタグを使用します。
グラフの描画エリア: dvt:graphPlotAreaタグを使用します。
グラフの円フレーム: dvt:graphPieFrameタグを使用します。
凡例エリア: dvt:legendAreaタグを使用します。

系列: dvt:seriesタグを使用します。

注意:

デフォルトでは、グラフの系列グラデーションは、seriesEffect属性でSE_AUTO_GRADIENTの値に設定されており、データ・マーカーはより滑らかな外観で、グラフィックのアンチエイリアス処理が適用されます。カスタム系列グラデーションを指定するには、属性をSE_NONEに設定する必要があります。

時間セレクタ: dvt:timeSelectorタグを使用します。
参照エリア: dvt:referenceObjectタグを使用します。

グラデーション特殊効果を使用する方法は、この効果がサポートされるグラフの各部分で同じです。

23.4.3.1 グラデーション特殊効果のグラフへの追加方法

特殊効果を追加するグラフのサブコンポーネントごとに、dvt:specialEffectsタグをサブコンポーネントの子タグとして挿入する必要があります(まだ存在しない場合)。たとえば、グラデーションをグラフの描画エリアに追加する場合は、dvt:graphPlotAreaタグの子であるdvt:specialEffectsタグを1つ作成します。

その後、オプションでサブコンポーネントの塗りつぶし色の変化の割合を制御する場合は、コンポーネントの塗りつぶしの色と変化の割合の制御に必要な数のdvt:gradientStopStyleタグを挿入します。このdvt:gradientStopStyleタグは、1つのdvt:specialEffectsタグの子タグとして挿入する必要があります。

始める前に:

グラデーション特殊効果をグラフに追加するには:

構造ウィンドウで、グラデーション特殊効果を持たせるコンポーネントに対応するグラフの子ノードを見つけ、必要に応じて開きます。

たとえば、グラデーション特殊効果をグラフの描画エリアに設定するには、dvt:graphPlotAreaノードを見つけて、必要に応じて開きます。
選択した子ノードにdvt:specialEffects子ノードが含まれていない場合は、ノードを右クリックし、「子ノードの中に挿入」→「特殊効果」を選択します。

たとえば、グラデーション特殊効果をグラフの描画エリアに設定するには、dvt:graphPlotAreaを右クリックし、「描画エリアの中に挿入」→「特殊効果」を選択します。
「プロパティ」ウィンドウを使用して、dvt:specialEffectsタグの属性に値を入力します。
1. FillType: FT_GRADIENTを選択します。
  
  GradientDirectionでは、グラデーションの塗りつぶしに使用する変化の方向を選択します。
2. NumStops: グラデーションに使用するストップの数を入力します。
オプションで各グラデーション・ストップの色と変化の割合を制御する場合は、「構造」ウィンドウで「dvt:specialEffects」ノードを右クリックし、「特殊効果の中に挿入」→「グラデーション終了スタイル」を選択します。
「プロパティ」ウィンドウを使用して、dvt:gradientStopStyleタグの属性に値を入力します。
1. StopIndex: specialEffectsタグ内に含まれるdvt:gradientStopStyleタグ内の索引としてゼロベースの整数を入力します。
2. GradientStopColor: グラデーション内のこの部分に使用する色を入力します。
3. GradientStopPosition: 指定した停止色のグラデーションでの相対的距離を入力します。グラデーションのスケールは0から100です。0または100が指定されない場合、これらのポイントにはデフォルトの位置が使用されます。
指定するグラデーション・ストップごとに、ステップ4とステップ5を繰り返します。

23.4.3.2 グラデーション特殊効果をグラフに追加する場合の処理

例23-4に、グラデーションの塗りつぶしをグラフの背景に追加し、2つのストップを指定する場合に生成されるXMLコードを示します。

例23-4 グラデーションをグラフの背景に追加する場合に生成されるXMLコード

<dvt:graph>
  <dvt:background borderColor="#848284">
    <dvt:specialEffects fillType="FT_GRADIENT" gradientDirection="GD_RADIAL"
                        gradientNumStops="2">
      <dvt:gradientStopStyle stopIndex="0" gradientStopPosition="60"
                             gradientStopColor="FFFFCC"/>
      <dvt:gradientStopStyle stopIndex="1" gradientStopPosition="90"
                             gradientStopColor="FFFF99"/>
    </dvt:specialEffects>
  </dvt:background>
</dvt:graph>

23.4.4 グラフ内のデータ値の書式設定

データ・コレクション内の属性には、データ値またはデータ値のカテゴリを指定できます。データ値は、棒の高さや散布図のポイントなどのマーカーで表される数値です。データ値のカテゴリは、順序軸ラベルとして表されるメンバーか、またはツールチップ内の追加プロパティとして表示されます。数値属性とカテゴリ属性はどちらも、ADF Facesコンバータ・タグ(数値データ値の場合はaf:convertNumber、カテゴリ・データ値の場合はaf:convertNumber、af:convertDateTimeおよびaf:convertColor)を使用して書式設定できます。

コンバータ・タグの属性で、パーセントの書式設定、数値の位取り、小数部の桁の制御、記号の配置などが行えます。ADF Facesコンバータの詳細は、第7章「入力の検証および変換」を参照してください。

23.4.4.1 カテゴリ・データ値の書式設定方法

グラフ内のカテゴリ・データ値は、グラフのデータ・モデルを定義するページ定義ファイル(<pagename>PageDef.xml)内の名前で表されます。例23-5に、従業員の雇用日およびボーナス・コストのカテゴリ・データ値を表示するグラフがあるページのページ定義ファイル内のXMLコードを示します。

例23-5 ページ定義ファイル内のカテゴリ・データ値名

<graph IterBinding="EmpView1Iterator" id="EmpView1"
       xmlns="http://xmlns.oracle.com/adfm/dvt" type="BAR_VERT_CLUST">
  <graphDataMap leafOnly="true">
    <series>
      <data>
        <item value="Bonus"/>
      </data>
    </series>
    <groups>
        <item value="Hiredate"/>
    </groups>
  </graphDataMap>
</graph>

書式設定するカテゴリ属性ごとに、dvt:attributeFormatタグを使用して、カテゴリ・データ値の名前を指定し、属性の書式設定時に使用される子コンバータ・タグを指定します。カテゴリ属性の書式設定の指定には、af:convertNumber、af:convertDateTimeおよびaf:convertColorを使用できます。

たとえば、ページ定義ファイル(<pagename>PageDef.xml)で定義されているHiredateおよびBonusのカテゴリ・データ値の書式を設定できます。

始める前に:

ページ定義ファイルで定義されるカテゴリ・データ値の書式設定の手順:

「構造」ウィンドウで、「dvt:typeGraph」ノードを右クリックし、「グラフ・タイプの中に挿入」→「ADFデータ視覚化」→「属性フォーマット」を選択します。
「プロパティ」ウィンドウで、Name属性に情報を入力します。

たとえば、例23-5の雇用日の値を指定するには、Name属性にHiredateを入力します。
「構造」ウィンドウで、指定した属性フォーマット・タグを右クリックし、「属性フォーマットの中に挿入」→「型の変換」を選択します。

たとえば、引き続きHiredateの書式を設定するには、「dvt:attributeFormat」ノードを右クリックして、「属性フォーマットの中に挿入」→「日時の変換」を選択します。
「構造」ウィンドウで「af:convertType」ノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウを使用して、コンバータの値を入力します。詳細は、第7章「入力の検証および変換」を参照してください。
追加の属性ごとに、手順1から手順5を繰り返します。

たとえば、例23-5のカテゴリ・データ値の書式設定を完了するには、手順1から手順5を繰り返して、属性名にBonusを設定し、af:convertNumberコンバータを追加して、通貨の属性の書式を設定します。

例23-6に、棒グラフのカテゴリ・データ値の書式を設定する場合に生成されるXMLコードを示します。

例23-6 棒グラフのカテゴリ・データ値の書式設定

<dvt:barGraph id="barGraph1" value="#{bindings.EmpView1.graphModel}"
              subType="BAR_VERT_CLUST">
  <dvt:attributeFormat id="af1" name="Hiredate">
    <af:convertDateTime pattern = "yyyy-MM-dd hh:mm:ss a"  timeZone="US/Pacific"/>
  </dvt:attributeFormat>
  <dvt:attributeFormat id="af2" name="Bonus">
    <af:convertNumber type = "currency" currencySymbol = "$"
  </dvt:attributeFormat>
</dvt:barGraph

注意:

順序(01)軸上に表示されているカテゴリ・データ属性が1つある場合、グラフには時間軸が表示されます。時間軸には、単一のラベル(「June 27, 2001」など)とは対照的に、階層形式で日付が表示されます。順序軸に単一ラベルを表示するには、時間軸をオフにし(たとえばtimeAxisType="TAT_OFF")、dvt:attributeFormatタグを使用して日付の書式を指定する必要があります。

23.4.4.2 数値データ値の書式設定方法

ADF Faces af:convertNumberタグを使用して、次のgraphタグに関連する数値データ値の書式設定を指定します。

dvt:sliceLabel
dvt:stockVolumeFormat
dvt:x1TickLabel
dvt:x1Format
dvt:y1TickLabel
dvt:y1Format
dvt:y2TickLabel
dvt:y2Format
dvt:zFormat

たとえば、デフォルトでは円グラフは、全体に対する各部分の関係を円のスライスとして表して、各スライスのラベルには各スライスが表す割合が表示されます。定価を決める材料費、労務費および利益などの値として各スライスが表示されるように円グラフを構成できます。スライス内の値を表示し、それに応じて数値の書式を設定するには、dvt:sliceLabelタグのtextType属性を指定します。

始める前に:

ページにすでに円グラフが存在している必要があります。ない場合は、この章の指示に従ってグラフを作成します。詳細は、23.2.3項「ページへのグラフの追加方法」を参照してください。

円グラフのスライス・ラベルで数値の書式を設定する手順:

「構造」ウィンドウで「dvt:sliceLabel」ノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、TextType属性のドロップダウン・リストから「LD_VALUE」を選択し、グラフ内の円のスライスが1つの値を表すことを指定します。
「プロパティ」ウィンドウで、「区分ラベルの構成」をクリックし、ドロップダウン・メニューから「数値書式」を選択します。
「プロパティ」ウィンドウで、Type属性のドロップダウン・リストからcurrencyを選択して値を通貨として指定し、CurrencySymbol属性にドル記号($)を入力して通貨記号としてドル記号を使用します。

例23-7に、グラフの区分ラベル内の数値を書式設定する場合に生成されるXMLコードを示します。

例23-7 円グラフの区分ラベルでの数値の書式設定

<pieGraph>
...
  <dvt:sliceLabel textType="LD_VALUE">
    <af:convertNumber type="currency" currencySymbol="$"/>
  </dvt:sliceLabel>
...
</pieGraph>

ADF Faces af:convertNumberタグを使用すれば、グラフのマーカー・テキスト内の数値の書式も設定できます。

たとえば、グラフの各軸のマーカー・テキストに異なる書式を指定できます。この手順では、af:convertNumberタグを使用してdvt:y1axisのマーカー・テキストを書式設定します。

始める前に:

グラフのY1軸に関連付けられたマーカー・テキストの数値データ値の書式を設定する手順:

「構造」ウィンドウで、「dvt:typeGraph」ノードを右クリックし、「グラフ・タイプの中に挿入」→「ADFデータ視覚化」→「マーカー・テキスト」を選択します。
「プロパティ」ウィンドウで、必要に応じてdvt:markerTextの属性に値を入力します。たとえば、グラフ内のテキストを表示するために、Rendered属性にtrueを選択します。
「プロパティ」ウィンドウで、「マーカーの構成」をクリックし、「Y1フォーマット」を選択します。
「プロパティ」ウィンドウで、必要に応じてdvt:y1Format属性に必要な値を入力します。
「プロパティ」ウィンドウで、「数値書式の構成」をクリックし、af:convertNumberタグの属性に必要な値を指定します。たとえば、マーカー・テキストの後にパーセント記号を配置するには、Type属性にpercent値を選択します。

例23-8に、グラフのY1軸のマーカー・テキストの数値を書式設定する場合に生成されるXMLコードを示します。この例では、数値の後にパーセント記号が続き、マーカーの上にテキストが表示されるよう指定します。たとえば、棒グラフの場合、棒の上にテキストが表示されます。

例23-8 グラフのマーカー・テキストの数値の書式設定

<dvt:barGraph>
  <dvt:markerText rendered="true" markerTextPlace="MTP_OUTSIDE_MAX">
    <dvt:y1Format>
      <af:convertNumber type="percent"/>
    </dvt:y1Format>
  </dvt:markerText>
</dvt:barGraph>

注意:

円グラフのスライスのラベルのtextType属性がパーセント(LD_PERCENT)に、またはグラフ・ツールチップのmarkerTooltipType属性がパーセント(MTT_PERCENT_XXX)に設定されている場合、子のaf:convertNumberタグは、使用されていれば、そのtype属性のpercentに自動的に設定されます。af:convertNumberがpercentに強制的に指定されると、グラフではパターン属性が消去されます。これは、グラフでパーセントの書式設定が強制されると、パターンが無視されることを意味します。これは、円、パレート、ファンネルおよび棒、折れ線または面パーセント・グラフに当てはまります。

23.4.4.3 自動位取りおよび精度に関する必知事項

コンパクトできれいな表示を実現するために、グラフでは、軸ラベル、マーカー・テキストおよびツールチップに表示される値のスケールおよび精度が自動的に決まります。たとえば、40,000の値は40Kと書式設定され、0.230546は小数点以下2桁の0.23として表示されます。

af:convertNumberが指定されている場合でも、自動書式設定は行われます。af:convertNumber子タグをサポートするグラフ・タグには、グラフの自動数値書式設定の制御に使用できるscaling属性およびautoPrecision属性があります。デフォルトでは、これらの属性値はscaling="auto"およびautoPrecision="on"に設定されています。af:convertNumberで指定される小数部の桁の設定(minFractionDigits、maxFractionDigitsまたはpatternなど)は、autoPrecisionがoffに設定されていないかぎり無視されます。

23.5 データの系列およびグループの外観のカスタマイズ

データの系列およびグループの外観を色、スタイル、表示についてカスタマイズできます。折れ線グラフの線、円グラフのスライス、バブル・グラフおよび散布図グラフのマーカーの外観もカスタマイズできます。グラフに参照線も追加できます。

23.5.1 グラフ・データ値の色、スタイルおよび表示の変更

ほとんどのグラフ・タイプで、グラフの棒、折れ線、面、ポイントおよびスライスとして表されるデータ値のセットごとにエントリが凡例に表示されます。このエントリは関連するデータ値のセットを識別し、グラフ内でのセットの色を示します。たとえば、棒グラフでは、黄色の棒を使用して靴の売上げを示し、緑色の棒を使用してブーツの売上げを示します。グラフ・コンポーネントでは、関連のデータ値の各セットを系列として参照します。

グラフでは、データ値の各セットに異なる色が自動的に割り当てられます。塗りつぶしや枠の色などの各系列に割り当てられた色はカスタマイズできます。一部のグラフ・タイプでは、グラフの凡例で系列の非表示または表示により、グラフ内のデータ値の表示をフィルタ処理できます。

特定のグラフ・タイプでは、折れ線グラフの線の幅やスタイルなどの追加属性を、実線、点線、ダッシュ線などの選択肢で指定できます。詳細は、23.5.3項「グラフでの線の外観の変更」を参照してください。

散布図の場合、データ値の相互依存関係を表すために、データ・マーカーの形状や色を系列と区別することができます。詳細は、23.5.5項「散布図の系列マーカー・データ値のカスタマイズ」を参照してください。

グラフ内の各系列の色にグラデーション特殊効果を追加してカスタマイズすることもできます。詳細は、23.4.3項「グラフでのグラデーション特殊効果の使用」を参照してください。

23.5.1.1 個々の系列アイテムの色とスタイルの指定方法

1つのdvt:seriesSetタグを使用して、グラフの個々のdvt:seriesタグをすべてラップし、グラフ・データ・マーカーの色およびスタイルの属性を設定します。

始める前に:

グラフの系列アイテムに色とスタイルを指定する手順:

構造ウィンドウでグラフ・ノードの「dvt:seriesSet」子タグを右クリックし、「プロパティに移動」を選択します。
必要に応じて、「プロパティ」ウィンドウを使用してdvt:seriesSetタグの属性に値を指定します。

このタグの属性によって、セット内のすべての系列タグのデフォルト設定が決まります。ただし、指定した系列のこの設定を、dvt:seriesタグの対応する属性に値を入力することでオーバーライドできます。
構造ウィンドウで、dvt:seriesSetノードを開きます。
「構造」ウィンドウで、「dvt:series node」を右クリックし、「プロパティに移動」を選択します。

最初のdvt:seriesタグが「グラフ・バインディングの作成」ダイアログに表示される最初の系列を表します。
「プロパティ」ウィンドウを使用して、dvt:seriesタグに必要な色およびその他の特性を指定します。
追加の系列アイテムを構成するには、「構造」ウィンドウで、「seriesSet」ノードを右クリックし、「系列セットの中に挿入」→「系列」を選択します。
「プロパティ」ウィンドウを使用して、dvt:seriesタグに必要な色およびその他の特性を指定します。
系列アイテムごとに、ステップ6とステップ7を繰り返します。

23.5.1.2 系列アイテムの非表示および表示を有効にする方法

面、棒、バブル、組合せ、折れ線、円、レーダーおよび散布図のグラフ・タイプについては、実行時にグラフ内の系列の非表示または表示を有効にできます。グラフでは少なくとも1系列を表示する必要がありますが、ユーザーは対応する凡例アイテムをクリックすることにより、データの表示をフィルタ処理できます。

始める前に:

系列アイテムの非表示および表示を有効にする手順:

「構造」ウィンドウで「dvt:typeGraph」ノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウの「外観」属性カテゴリの「系列」セクションで、グラフのHideAndShowBehavior属性を設定します。有効な値は、次のとおりです。
- none: デフォルト値で、系列の非表示および表示の動作は無効です。
- withRescale: 見える系列のみが表示されるようにグラフのサイズを変更します。
- withoutRescale: 系列は非表示なりますが、グラフのサイズは変わりません。

23.5.2 円グラフの外観の変更

円グラフの外観をカスタマイズできます。また、円グラフの1つのスライスを他のスライスから切り離すよう指定できます。

23.5.2.1 円グラフ全体の外観のカスタマイズ方法

円グラフの外観は、グラフ・タグ内に次の子タグを挿入することでカスタマイズできます。

dvt:pieFeelerタグ: 円グラフのスライスからスライス・ラベルへ延びる線(引出線と呼ばれる)の色を指定します。
dvt:sliceタグ: 円グラフのスライスのラベルの位置を指定します。
dvt:sliceLabelタグ: 円グラフまたはドーナツ・グラフの各スライスを説明するラベルの特性を指定します。各スライスはデータ値を表します。このタグのtextType属性を使用して、スライス・ラベルにテキストのみを表示するか、割合のみを表示するか、テキストと割合を表示するかを示します。数値を書式設定する場合またはフォント特性を指定する場合は、dvt:sliceLabelタグ内にdvt:graphFontおよびaf:convertNumberタグを追加します。

円スライスをアニメーション化することもでき、これによりユーザーは、スライスをクリックしてそれらを切り離すことや、オプションを含むコンテキスト・メニューを表示して、円グラフ内のすべてのスライスを開くことまたは閉じることができます。

始める前に:

円グラフ全体の外観をカスタマイズする手順:

円グラフに子タグを追加するには、「構造」ウィンドウで「dvt:pieGraph」ノードを右クリックし、「円の中に挿入」→「ADFデータ視覚化」→「円引出線」または「区分」または「区分ラベル」を選択します。
「プロパティ」ウィンドウを使用して、必要に応じて属性に値を設定します。プロパティのヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
円グラフのスライスをアニメーション化するには、「プロパティ」ウィンドウで、dvt:pieGraphタグのInteractiveSliceBehavior属性を設定します。次の値の組合せが有効です。
- none: インタラクティブなスライスの動作は無効です。
- explode: ユーザーは円グラフのスライスをクリックして切り離すことができます。
- explodeAll: コンテキスト・メニューに「すべて開く」および「すべて閉じる」のオプションを追加します。
たとえば、次のコードで、ユーザーが円グラフ内のスライスを切り離すことができ、またコンテキスト・メニューを表示して、グラフ内のすべてのスライスを開くこと、または閉じることができるように指定できます:
```
<dvt:pieGraph interactiveSliceBehavior="explode explodeAll"/>
```

注意:

interactiveSliceBehavior属性がFlashイメージ形式でのみ使用可能であるのに対し、pieSliceExplode属性はすべてのイメージ形式で使用可能です。

23.5.2.2 円グラフのスライスの切離しのカスタマイズ方法

円グラフで1つのスライスが他のスライスから切り離されている場合、この表示は円グラフのスライスの切離しと呼ばれます。1つのスライスを切り離すのはそのスライスを強調表示するためで、グラフ内で最も大きい分量が割り当てられていることもあります。

円グラフのスライスは、グラフの凡例で示されるデータのセットです。したがって、スライスは円グラフの系列アイテムです。

始める前に:

23.5.1.1項「個々の系列アイテムの色とスタイルの指定方法」の手順に従い、個々の系列アイテムをラップする系列セットを作成します。

円グラフで1つのスライスをカスタマイズする手順:

「構造」ウィンドウで、「dvt:seriesSet」ノードを展開し、円から切り離す円スライスを表す「dvt:series」ノードを見つけます。
dvt:seriesノードを右クリックして、「プロパティに移動」を選択します。
「プロパティ」ウィンドウの「共通」セクションで、PieSliceExplode属性を0と100の間の値に設定します。100が使用できる最大の切離し距離です。

23.5.3 グラフでの線の外観の変更

グラフのdvt:seriesSet子の属性を使用して、グラフの線の外観を変更できます。

23.5.3.1 グラフでのデータ線またはデータ・マーカーの表示

折れ線、組合せまたはレーダー・グラフには、データ線またはデータ・マーカーを表示できます。データ線ではなく、マーカーを表示する場合、マーカーが凡例に自動的に表示されます。

「プロパティ」ウィンドウで、dvt:seriesSetタグの次の属性を設定して、データ線またはデータ・マーカーを表示します。

LineDisplayed: グラフにデータ線を表示するかどうかを指定します。次の値を設定できます。
- trueは、グラフにデータ線が表示されることを示します。
- falseは、グラフにデータ線ではなく、マーカーが表示されることを示します。
MarkerDisplayed: グラフにマーカーまたはデータ線を表示するかどうかを指定します。次の値を設定できます。
- trueは、グラフにマーカーが表示されることを示します。
- falseは、グラフにデータ線が表示されることを示します。

注意:

lineDisplayed属性とmarkerDisplayed属性の両方にfalseを設定しないでください。

23.5.3.2 グラフ系列の線の外観の変更

次のリストで説明するように、dvt:seriesSetタグとdvt:seriesタグを使用して線の外観をカスタマイズできます。

dvt:seriesSetタグで次の属性に値を指定すると、タグ内のすべてのdvt:seriesタグに作用します。
- defaultMarkerShape: 折れ線グラフ、散布図、極グラフ、バブル・グラフおよび組合せグラフにのみ使用されます。系列セット内のすべての系列のデフォルト・マーカーの形状を示します。
- defaultMarkerType: 組合せグラフおよび折れ線グラフにのみ使用されます。有効な値は、MT_AREA、MT_BAR、MT_MARKERおよびMT_DEFAULTです。
dvt:seriesタグで、次の線属性を使用して個々の系列の設定を指定できます。
- lineWidth: 線の幅をピクセルで指定します。
- lineStyle: グラフで実線、点線、ダッシュ線、ダッシュと点の組合せの線のいずれを使用するかを指定します。

dvt:seriesSetタグとdvt:seriesタグの使用の詳細は、23.5.1.1項「個々の系列アイテムの色とスタイルの指定方法」の手順を参照してください。

23.5.4 パレート・グラフのカスタマイズ方法

パレート・グラフは、一連の棒を使用して不具合の原因を示します。棒は値の大きい方から小さい方に順に並べられます。パレート線は、グラフのすべての棒の合計値に対する棒の累積割合を示します。線は常に100%で終わります。

パレート線とパレート・マーカーは、次のグラフの子タグを使用してカスタマイズできます。

dvt:paretoLineタグ: 色、線幅と線のスタイル(実線、ダッシュ線、点線、ダッシュと点の組合せなど)を指定できます。
dvt:paretoMarkerタグ: パレート・マーカーの形状を指定できます。

始める前に:

ページにすでにパレート・グラフが存在している必要があります。ない場合は、この章の指示に従ってグラフを作成します。詳細は、23.2.3項「ページへのグラフの追加方法」を参照してください。

パレート・グラフをカスタマイズする手順:

構造ウィンドウでdvt:paretoLineノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、Color、WidthまたはLineStyle属性に値を指定します。
構造ウィンドウでdvt:paretoMarkerノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、MarkerShape属性に値を選択します。

23.5.5 散布図の系列マーカー・データ値のカスタマイズ

散布図では、1系列の関連データ値は、データ・マーカーの形状と色で表されます。データ値の相互依存関係を表すために、データ・マーカーの形状や色を系列と区別することができます。

たとえば、図23-43に、Product属性やBrand属性をまとめて使用して、データ・マーカーの形や色で表される系列を決定する散布図を示します。

図23-43 系列マーカーのある散布図

行ヘッダーの属性を使用して、デフォルト系列の指定をオーバーライドできます。図23-44に、Brand属性のデータ値が形にマップされ、Product属性が色にマップされて表示される散布図を示します。

図23-44 系列アイテム・マーカーのある散布図

次の属性を使用して、散布図の系列マーカー・データ値をカスタマイズします。

markerShapeAttribute: マーカーの形状を設定するために使用する行ヘッダー属性名を指定します。この属性が指定されていない場合、グラフにはデフォルトのインデックス・ベース系列のマーカーの形状が表示されます。
markerColorAttribute: マーカーの色を設定するために使用する行ヘッダー属性名を指定します。この属性が指定されていない場合、グラフにはデフォルトのインデックス・ベース系列のマーカーの色が表示されます。

たとえば、次のコードを使用して、ProductとBrandを散布図の別の系列アイテム・マーカーとして指定します。

<dvt:scatterGraph id="scatter" markerColorAttribute="Product" markerShapeAttribute="Brand" value="#{bindings.View1.graphModel}"/>

dvt:scatterGraphノードの「プロパティ」ウィンドウの「拡張」セクションで、markerShapeAttributeおよびmarkerColorAttributeを設定することもできます。

23.5.6 グラフ・マーカーの形状のカスタマイズ

折れ線グラフ、散布図、極グラフ、組合せグラフおよびバブル・グラフのマーカーの形状は、グラフseriesコンポーネントのmarkerShape属性で指定します。デフォルトでは、折れ線グラフ、散布図、極グラフまたは組合せグラフのマーカーの形状は、四角、円、ひし形、プラス記号および三角形で循環して各系列に割り当てられます。markerShapeのデフォルト値はMS_AUTOMATICです。

seriesコンポーネントのmarkerShape属性に次のいずれかの値を設定することで、あらかじめ作成されたグラフ・マーカーの形状を指定できます。

MS_NONE: 系列マーカーを使用しません。
MS_AUTOMATIC: デフォルト設定です。デフォルトのマーカーを使用します。
MS_SQUARE: 四角いマーカーの指定に使用します。
MS_CIRCLE: 円のマーカーの指定に使用します。
MS_DIAMOND: ひし形のマーカーの指定に使用します。
MS_PLUS: プラス記号のマーカーの指定に使用します。
MS_TRIANGLE_DOWN: 下向きの三角形のマーカーの指定に使用します。
MS_TRIANGLE_UP: 上向きの三角形のマーカーの指定に使用します。
MS_HUMAN: 人型のマーカーの指定に使用します。markerSizeを指定すると、人型のマーカーは幅がmarkerSizeの値と一致するようにスケール調整されます。

カスタム・グラフ・マーカーの場合、shapePath属性を使用してSVGファイルのパスを指定すると、事前定義の形状のかわりに表示されます。次に例を示します。

<dvt:series shapePath="/resources/shapes/house.svg" />

マーカーの形状は、ADFスキン内のCSSスタイル・プロパティを使用して指定することもできます。グラフ・スタイルのプロパティを使用すれば、事前定義のマーカーの形状は上書きでき、カスタム・マーカーのSVGファイルのパスは、shapePath属性を使用せずに定義できます。スタイル・プロパティを使用する場合、事前定義とカスタムの両方の形状の定義にseriesコンポーネントのshape属性が使用されます。

その形状の汎用またはコンポーネント固有のスタイル・プロパティがADFスキンで指定されている場合、事前定義の形状は上書きされます。たとえば、グラフ・コンポーネントのスタイル・プロパティで次のようにnewCircle.svgファイルを指定することにより、事前定義のcircle形状を上書きできます。

af|dvt-graph::shape-circle{
  -tr-path: url(/resources/path/newCircle.svg);
}

JSFページでは、seriesコンポーネントのshape属性が次のように設定されます。

<dvt:series id="s1" shape="circle"/>

seriesコンポーネントのshape属性でカスタム形状を指定するには、形状スタイル・プロパティ名でcustomの接頭辞を使用する必要があります。たとえば、カスタム形状がcustomNameという名前の場合、ADFスキン・ファイルで汎用の.AFDVTShapeCustomName:aliasスタイル・プロパティか、次のようにSVGファイルを指す-tr-pathプロパティを指定したグラフ固有のaf|dvt-graph::shape-customNameのいずれかを定義する必要があります。

af|dvt-graph::shape-customName{
  -tr-path: url(/resources/path/newCShape.svg);
}

JSFページでは、マーカー・コンポーネントの形状属性は次のように設定されます。

<dvt:series id="s1" shape="customName"/>

スキンおよびスタイル・プロパティの使用の詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。

23.5.7 参照線または領域のグラフへの追加

参照線および領域は、系列や軸の数や関連付けにかかわらず、常に表示する、ロールオーバーのみに表示する、または表示しない設定が可能です。

系列(グラフの凡例で1つの色で表示されるデータ値のセット)に関連付けられる参照線を作成できます。参照線付きの系列が複数ある場合、カーソルを系列マーカーまたは対応する系列凡例アイテム上に移動したときのみ参照線が表示されます。これは、複数の参照線はユーザーにとって紛らわしいからです。

軸に関連付ける参照領域を作成することもできます。通常、これらの領域はY軸に関連付けられます。複数の参照領域がある場合、カーソルを関連する軸上に移動すると、これらの領域も表示されます。

実行時までアプリケーションで必要な参照線と領域の数がわからない場合、参照線と領域を実行時に動的に作成することができます。

たとえば、グラフに表示されている値を参照するために、棒グラフに領域を追加できます。図23-45に、グラフの高い値と低い値に対する2つの参照領域がある棒グラフを示します。

図23-45 参照領域のある棒グラフ

23.5.7.1 設計時に参照線または領域を作成する方法

参照線も参照領域も、次のタグを使用して作成されます。

referenceObjectSet: このグラフの参照線または参照領域のすべての参照オブジェクト・タグをラップします。
referenceObject: タグが参照線を表すか、参照領域を表すかを示し、タグの特性を指定します。

始める前に:

設計時に参照線または領域をグラフに追加する手順:

「構造」ウィンドウで、「dvt:typeGraph」ノードを右クリックし、「グラフ・タイプの中に挿入」→「ADFデータ視覚化」→「参照オブジェクト・セット」を選択します。
dvt:referenceObjectSetノードを右クリックして、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、特定の軸に関連付けられている参照領域を定義する場合、適切な軸を表示するための値または軸の属性(displayX1、displayY1またはdisplayY2)の値を指定します。

値RO_DISPLAY_AUTOMATICは、関連付けられている軸上にマウスが移動したときにのみ参照領域が表示されるようにします。これを選択すると、複数の参照領域が同時に表示されて混乱を招くことがなくなります。

オプションで、参照領域にグラデーション特殊効果を適用できます。詳細は、23.4.3項「グラフでのグラデーション特殊効果の使用」を参照してください。
参照線を定義する場合、線を表示するための値を指定します。

値RO_DISPLAY_AUTOMATICは、カーソルが系列アイテム(棒など)またはグラフの凡例の対応する下位列エントリの上に移動したときにのみ参照線が表示されるようにします。これを選択すると、複数の系列の参照線が一度に表示されて混乱を招くことがなくなります。
「構造」ウィンドウで、dvt:referenceObjectSetノードを右クリックし、「参照オブジェクト・セットの中に挿入」→「参照オブジェクト」を選択します。
dvt:referenceObjectノードを右クリックして、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、以下を実行します。
1. 「共通」セクションで、参照オブジェクトのIndex属性に値を指定し、参照オブジェクトのType属性にRO_LINEまたはRO_AREAを指定し、Association属性に関連付けるオブジェクト(参照線の場合は系列、参照領域の場合は特定の軸)を指定します。また、DisplayedInLegend属性を使用してオブジェクトを凡例に表示するかどうかを指定し、凡例に表示するテキストがある場合はこれを指定します。
2. 参照線を作成する場合、「参照線」セクションで線に関連する属性に値を指定します。これには、線の値および線が関連付けられる系列の系列番号の指定も含まれます。系列番号は、グラフ・データ・バインディング・ダイアログに系列が表示される順番のことです。
3. 参照領域を作成する場合、指定した軸の参照領域を示す高低の値を「参照面」セクションで指定します。
4. 必要に応じて追加の属性を構成します。
  
  たとえば、Color属性のドロップダウン・メニューを使用して参照線または参照領域の色を入力します。詳細なヘルプを参照するには、[F1]を押すか、「ヘルプ」をクリックします。

23.5.7.2 設計時に参照線または領域を作成する場合の処理

設計時に参照線または領域を作成すると、JSFページのグラフのXML内にXMLコードが生成されます。参照オブジェクト(線も領域も)は、dvt:referenceObjectSetタグでラップされます。例23-9に、図23-45の棒グラフに関連付けられた2つの参照領域のコードを示します。

例23-9 グラフの参照線と領域のXMLコード

<dvt:barGraph shortDesc="Graph" id="bg1">
  <dvt:referenceObjectSet>
    <dvt:referenceObject type="RO_AREA" association="Y1AXIS"
                         location="RO_BACK" color="#55FFFF00"
                         lowValue="10" highValue="30"
                         displayedInLegend="true" text="Low">
      <dvt:specialEffects fillType="FT_GRADIENT"
                          gradientDirection="GD_DOWN"
                          gradientNumStops="2">
        <dvt:gradientStopStyle stopIndex="0" gradientStopPosition="0" 
                               gradientStopColor="#FFFF00"/>
        <dvt:gradientStopStyle stopIndex="1"
                               gradientStopPosition="100"
                               gradientStopColor="#FF0000"/>
      </dvt:specialEffects>
    </dvt:referenceObject>
    <dvt:referenceObject type="RO_LINE" association="Y1AXIS"
                         location="RO_BACK" color="#99cc66"
                         lineValue="50"
                         displayedInLegend="true" text="High"/>
  </dvt:referenceObjectSet>
</dvt:barGraph>

23.5.7.3 参照線または領域の動的作成方法

参照オブジェクトを実行時に動的に作成する場合、referenceObjectSetタグのみを使用します。このタグのreferenceObjectMap属性に、子コンポーネント参照オブジェクトのマップを作成するコードへのメソッド参照を設定します。このマップを作成するメソッドは、マネージドBeanに格納する必要があります。

例23-10に、参照線を動的に作成するメソッドを作成するためのサンプル・コードを示します。

始める前に:

参照線または領域を動的に作成する手順:

マネージドBeanを作成して、実行時に動的に作成する子コンポーネント参照オブジェクトのマップを作成します。詳細なヘルプが必要な場合は、3.6項「マネージドBeanの作成と使用」を参照してください。
「構造」ウィンドウで、グラフ・ノードを右クリックし、「グラフ・タイプの中に挿入」→「ADFデータ視覚化」→「参照オブジェクト・セット」を選択します。
dvt:referenceObjectSetノードを右クリックして、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、ReferenceObjectMap属性に、子コンポーネント参照オブジェクトのマップを作成するコードへのメソッド参照を指定します。

たとえば、例23-10に示されている(sampleGraph)マネージドBeanとgetReferenceObjectMapListメソッドの場合、属性にreferenceObjectMap="#{sampleGraph.referenceObjectMapList}"という値を設定します。

例23-10 子参照オブジェクトのマップのコード

Managed bean sampleGraph.java : 
   public Map getReferenceObjectMapList() {
     HashMap map = new HashMap();
     ReferenceObject referenceObject = new ReferenceObject();
     referenceObject.setIndex(1);
     referenceObject.setColor(Color.red);
     referenceObject.setLineValue(30);
     referenceObject.setLineWidth(3);
     map.put(new Integer(1), referenceObject);
     return map;
    }

23.6 グラフへのアニメーションの使用

グラフ・コンポーネントは、グラフ・コンポーネントの初期表示のスライドショー遷移、部分ページ・リフレッシュ(PPR)イベントのスライドショー遷移など、アニメーション効果をサポートしています。アニメーション効果は、グラフのanimationOnDisplayおよびanimationOnDataChangeプロパティに次の値を指定します。

none (デフォルト)
alphaFade
conveyorFromLeft
conveyorFromRight
cubeToLeft
cubeToRight
flipLeft
flipRight
slideToLeft
slideToRight
transitionToLeft
transitionToRight
zoom

アニメーション効果は、アクティブ・データをサポートするグラフ・タイプでアクティブ・データを使用して実行することもできます。アクティブ・データ・サービス(ADS)では、ADFモデル・レイヤーを使用して、ADF Facesコンポーネントをアクティブ・データ・ソースにバインドできます。このためには、Fusionテクノロジ・スタックを使用し、コンポーネントとバインディングを構成して、コンポーネントがソースで更新されたデータを表示できるようにする必要があります。あるいは、あらかじめ決められた間隔で変更のデータ・ソースをポーリングするようにアプリケーションを構成することもできます。詳細は、23.6.1項「アクティブ・データを表示するデータ・バインドされたグラフ・コンポーネントの構成方法」を参照してください。

23.6.1 アクティブ・データを表示するデータ・バインドされたグラフ・コンポーネントの構成方法

アクティブ・データ・サービスは、次のグラフ・タイプに対しサポートされます。

表23-6 アクティブ・データをサポートするグラフ・コンポーネント

グラフ・コンポーネント	グラフ・タグ	サブタイプ	3Dサポートの有無
面	`dvt:areaGraph`	`AREA_VERT_ABS`	いいえ
棒	`dvt:barGraph`	`BAR_VERT_CLUST`(矩形バー形状のみ) `BAR_VERT_STACK`(矩形バー形状のみ)	はい
バブル	`dvt:bubbleGraph`	`BUBBLE`	いいえ
組合せ	`dvt:comboGraph`	`COMBINATION_VERT_ABS`(矩形バー形状のみ)	いいえ
折れ線	`dvt:lineGraph`	`LINE_VERT_ABS`	いいえ
円	`dvt:pieGraph`	`PIE`	はい
散布	`dvt:scatterGraph`	`SCATTER`	いいえ

アクティブ・データ・サービスを使用するには、データが変更されたときにイベントを公開するデータ・ソースが必要であり、それらのイベントに反応するビジネス・サービスと、それらのサービスを表示するための関連のデータ・コントロールを作成する必要があります。ADSおよびアプリケーションの構成の詳細は、第38章「非同期バックエンドでのアクティブ・データ・サービスの使用方法」を参照してください。

データ・バインドされたグラフを構成し、対応するページ定義ファイルでバインディング要素に値を設定することによってアクティブ・データを表示します。

始める前に:

次のタスクを完了する必要があります。

ページにデータ・バインドされたグラフを追加します。詳細は、23.2.3項「ページへのグラフの追加方法」を参照してください。
データ変更時にイベントを発行するデータ・ソース、関連するビジネス・サービスおよびデータ・コントロールを作成します。詳細は、第38章「非同期バックエンドでのアクティブ・データ・サービスの使用方法」を参照してください。

アクティブ・データを表示するデータ・バインドされたグラフを構成する手順:

「構造」ウィンドウで「dvt:typeGraph」ノードを右クリックし、「ページ定義に移動」を選択してページの関連するページ定義ファイルを開きます。
ページ定義ファイルの構造ウィンドウで、コンポーネントにバインドされた属性を表すノードを選択します。
「プロパティ」ウィンドウで、ChangeEventPolicy属性にpushを選択します。

23.6.2 グラフのアニメーション効果の指定

アニメーションを使用するグラフの「プロパティ」ウィンドウで、次の属性を設定します。

animationOnDisplay: オプション。適用する初期レンダリング効果のタイプの指定に使用します。有効な値は次のとおりです。
- none (デフォルト): 初期レンダリング効果を表示しません。
- auto: グラフ・タイプに基づいて自動的に選択された初期レンダリング効果を適用します。
- alphaFade
- conveyorFromLeftまたはconveyorFromRight
- cubeToLeftまたはcubeToRight
- flipLeftまたはflipRight
- slideToLeftまたはslideToRight
- transitionToLeftまたはtransitionToRight
- zoom
animationOnDataChange: オプション。適用するデータ変化のアニメーションでデータ・タイプの指定に使用します。有効な値はグラフ・タイプにより異なります。有効な値を以下に示します。
- none: データ変更のアニメーション効果は適用されません。
- activeData(デフォルト): アクティブ・データ・サービス(ADS)のデータ変更のアニメーション・イベントが適用されます。グラフ・タイプがアクティブ・データをサポートする場合、これがデフォルト値です。
- auto: 部分ページ・リフレッシュ(PPR)およびADSデータ変更アニメーション・イベントを適用します。
- alphaFade
- conveyorFromLeftまたはconveyorFromRight
- cubeToLeftまたはcubeToRight
- flipLeftまたはflipRight
- slideToLeftまたはslideToRight
- transitionToLeftまたはtransitionToRight
- zoom
animationDuration: アニメーション効果をミリ秒で指定するために使用します。
animationIndicators: 表示するデータ変化のインジケータのタイプを指定するために使用します。有効な値は次のとおりです。
- none: データ変更のインジケータは表示されません。
- all(デフォルト): すべてのデータ変更のインジケータを表示します。
animationUpColor: データ値が増加したことを示すために使用するRGB16色の指定に使用します。
animationDownColor: データ値が減少したことを示すために使用するRGB16色の指定に使用します。

23.7 インタラクティブな機能のグラフへの追加

マーカーと凡例の淡色表示、ズームとスクロール、ドリル、インタラクティブな時間軸、注釈とアラート、ドラッグ・アンド・ドロップ、ポップアップ、選択サポート、コンテキスト・メニューなどのインタラクティブ機能をグラフに追加できます。

23.7.1 マーカーと凡例の淡色表示の追加方法

マーカーには線、棒、面、散布マーカー、バブルおよび円グラフのスライスが含まれます。特定のデータのセット内の1つのデータ・マーカーまたはグラフの凡例の対応するエントリの上にカーソルを移動すると、そのセットのすべてのデータ・マーカーが強調表示されるようにすることができます。強調表示効果は、セットの他のデータ・マーカーを淡色表示することによって視覚的に実現します。たとえば、棒グラフに4つの製品(P1、P2、P3、P4)の月ごとの売上げを表示する場合、製品P2の1月にカーソルを移動すると、P2のすべての棒が強調表示され、P1、P3およびP4の棒は淡色表示されます。

グラフでは特定のデータのセットのすべてのデータ・マーカー(P2のすべての棒など)を系列として参照するため、系列内のデータ・マーカーを強調表示する機能は、グラフの系列ロールオーバー動作機能の一部です。

系列ロールオーバー動作は、棒グラフ、折れ線グラフ、面グラフ、円グラフ、散布図、極グラフ、レーダー・グラフおよびバブル・グラフでのみ使用できます。

始める前に:

系列内のすべてのデータ・マーカーを淡色表示する手順:

「構造」ウィンドウで「dvt:typeGraph」ノードを右クリックし、「プロパティに移動」を選択します。
「外観」セクションのSeriesRolloverBehaviorフィールドで、属性ドロップダウン・リストを使用してRB_DIMを選択します。

23.7.2 ズームとスクロール・レベルの変更に対応する方法

23.3.3.2項「軸でのスクロールの指定」の説明に従い、1つ以上のグラフ軸でスクロールを構成すると、ズームが有効になります。

グラフでズームおよびスクロール・レベルが変更されたときに実行されるカスタム・コードを指定できます。たとえば、メソッドを記述して、ズームされる軸およびズームされた軸の現在の範囲を決定できます。

このメソッドは、ZoomEventまたはScrollEventを入力として受け入れるマネージドBeanに格納します。例23-11に、グラフのズームおよびスクロール・イベントを処理するメソッドを作成するためのサンプル・コードを示します。

始める前に:

グラフでのズームとスクロールに対応するカスタム動作を指定する手順:

マネージドBeanを作成し、ズームおよびスクロール・イベントに応答するメソッドを追加します。詳細なヘルプが必要な場合は、3.6項「マネージドBeanの作成と使用」を参照してください。

たとえば、例23-11のサンプル・コードを使用するには、sampleGraphという名前のマネージドBeanを作成し、例のメソッドを追加します。
「プロパティ」ウィンドウで、まだ有効にしていない場合は、メソッドで管理される軸のスクロールを構成します。

たとえば、例23-11のサンプル・コードを使用する場合は、dvt:o1Axisノードのスクロールを有効にします。スクロールの構成の詳細は、23.3.3.2項「軸でのスクロールの指定」を参照してください。
「構造」ウィンドウで「dvt:typeGraph」ノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、「動作」セクションを展開し、次の一方または両方を実行します。
- ZoomListenerフィールドに、マネージドBeanに格納したメソッドへの参照を指定します。
  
  たとえば、setZoomメソッドがsampleGraphマネージドBeanに格納されている場合、"#{sampleGraph.setZoom}"という設定になります。
- ScrollListenerフィールドに、マネージドBeanに格納したメソッドへの参照を指定します。
  
  たとえば、setScrollメソッドがsampleGraphマネージドBeanに格納されている場合、"#{sampleGraph.setScroll}"という設定になります。

例23-11 ズームとスクロールを設定するためのサンプル・コード

Managed bean sampleGraph.java:
public void setZoom(ZoomEvent event) {
        System.out.println("Start Group: " + event.getAxisStartGroup(ZoomEvent.O1AXIS));
        System.out.println("Group Count: " + event.getAxisGroupCount(ZoomEvent.O1AXIS));
        System.out.println("Start Group Label: " + event.getAxisStartGroupLabel(ZoomEvent.O1AXIS));
}
public void setScroll(ScrollEvent event) {
        System.out.println("End Group Label: " + event.getAxisEndGroupLabel(ScrollEvent.O1AXIS));
        System.out.println("Axis Min: " + event.getAxisMin(ScrollEvent.O1AXIS));
        System.out.println("Axis Max: " + event.getAxisMax(ScrollEvent.O1AXIS));
}

23.7.3 インタラクティブな時間軸のグラフへの追加

時間データを表示する相対的範囲と明示的範囲を定義できます。また、時間セレクタを追加して、ユーザーが時間軸上で時間範囲を選択できるようにすることもできます。

23.7.3.1 時間データを表示する相対的範囲の定義方法

時間データを表示する単純な相対範囲(過去7日間など)を定義できます。これによって、新しいデータ・ポイントがアクティブ・データ・グラフの表示に追加され、古いデータがグラフの左端からはみ出ることになります。相対時間範囲の指定は、アクティブ・データ・グラフでの使用に限定されません。

始める前に:

時間値に基づいて軸を表示するグラフがページにある必要があります。ない場合は、この章の指示に従ってグラフを作成します。詳細は、23.2.3項「ページへのグラフの追加方法」を参照してください。

時間データを表示する相対範囲を指定する手順:

「構造」ウィンドウで「dvt:typeGraph」ノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、「外観」セクションを展開し、次の属性に値を指定します。
1. TimeRangeMode: 相対範囲を時間範囲の終わりに適用する(最後の7日間など)か、始めに適用する(最初の7日間など)かに応じて、値TRM_RELATIVE_LASTまたはTRM_RELATIVE_FIRSTを指定します。
2. TimeRelativeRange: 相対範囲をミリ秒で指定します。
  
  たとえば、7日間の範囲を指定する場合は、日数(7)に1日をミリ秒にした数(86400000)を掛けた、604800000となります。

23.7.3.2 時間データを表示する明示的範囲の定義方法

時間データを表示する明示的範囲(3月15日から3月25日など)を定義できます。この例では、開始と終了の値に指定されていないため、年、時間、分および秒にはデフォルト値が使用されます。

明示的範囲の開始日および終了日を指定するためのメソッドを、グラフのマネージドBeanに格納します。

始める前に:

次のタスクを完了する必要があります。

マネージドBeanに、時間範囲の開始日と終了日を返すメソッドを作成します。マネージドBeanの詳細は、3.6項「マネージドBeanの作成と使用」を参照してください。

例23-12に、時間範囲の開始日と終了日を返す2つのサンプル・メソッドを示します。

例23-12 明示的時間範囲の開始日と終了日を設定するサンプル・コード

// Add the following imports to your bean
import java.util.Date;
import java.util.Calendar;
import java.util.GregorianCalendar;

// Add the following variables to your bean
private static Calendar cal1 = new GregorianCalendar (2011,0,2);
private static Calendar cal2 = new GregorianCalendar (2011,0,4);
private static Date m_startDate = cal1.getTime();
private static Date m_endDate = cal2.getTime();

// Add the following methods to your bean
public Date getStartDate(){
  return m_startDate;
}
public Date getEndDate(){
  return m_endDate;
}

時間値に基づいて軸を表示するグラフをページに作成します。詳細は、第23.2.3項「ページへのグラフの追加方法」を参照してください。

時間データを表示する明示的範囲を指定する手順:

「構造」ウィンドウで「dvt:typeGraph」ノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、「外観」セクションを展開し、次の属性に値を指定します。
1. TimeRangeMode: 属性のドロップダウン・メニューからTRM_EXPLICITを選択します。
2. TimeRangeStart: 時間範囲の開始日を返すメソッドへの参照を指定します。
  
  たとえば、timeAxisSampleという名前のマネージドBeanと、例23-12で参照されているgetStartDate()メソッドの場合は、初期日付に#{timeAxisSample.startDate}と入力します。
3. TimeRangeEnd: 時間範囲の終了日を返すメソッドへの参照を指定します。

23.7.3.3 グラフへの時間セレクタの追加方法

時間軸を表示するように構成されているグラフには、時間セレクタを追加できます。時間セレクタを使用すると、ユーザーは時間軸でデータの範囲を選択できます。通常、時間セレクタは、ディテールが時間セレクタの日付範囲に基づいて表示される、マスター/ディテール・グラフで使用されます。

グラフに時間セレクタを追加するには、グラフにdvt:timeSelectorコンポーネントを追加し、マネージドBeanまたはバッキングBeanに範囲の開始日と終了日を返すためのメソッドを追加します。マスター/ディテール・グラフを構成する場合は、ユーザーが時間セレクタを移動したときにディテール・グラフを更新するためのリスナーを時間セレクタに追加します。

図23-46に、時間セレクタを使用するように構成されたマスター/ディテール・グラフの簡単な例を示します。ユーザーがマスター・グラフで時間セレクタを別の日付範囲に移動すると、棒グラフの表示が自動的に更新されます。

図23-46 マスター/ディテール・グラフの時間セレクタ

始める前に:

次のタスクを完了する必要があります。

時間値に基づいて軸を表示するグラフをページに作成します。詳細は、第23.2.3項「ページへのグラフの追加方法」を参照してください。

面、棒、折れ線、組合せの各グラフおよび株価チャートには、列ラベルにオブジェクト・タイプがjava.util.Dateの日付が指定された場合に、時間軸が表示されます。時間セレクタを使用するには、日付を昇順でソートし、日、週、月などの一定の間隔を使用するようにします。

たとえば、図23-46の折れ線グラフでは、o1軸に販売日付を、系列に総売上げを使用しています。図23-47に、サンプル・データを示します。

図23-47 時間セレクタの例のサンプル・データ
マスター/ディテール・グラフを構成する場合は、ディテールが時間セレクタの開始日と終了日に基づいて表示されるグラフを作成します。

たとえば、図23-46の棒グラフでもo1軸に販売日付が使用されていますが、総売上げに加えて純売上げのデータも表示されています。

マネージドBeanまたはバッキングBeanに、時間範囲の開始日と終了日を返すメソッドを作成します。マネージドBeanの詳細は、3.6項「マネージドBeanの作成と使用」を参照してください。

例23-13に、時間セレクタの時間範囲の開始日と終了日を返す2つのサンプル・メソッドを示します。

例23-13 時間セレクタの開始日と終了日を返すサンプル・メソッド

// Include these imports in your bean
import java.util.Calendar;
import java.util.Date;
import java.util.GregorianCalendar;

// Add these variables to your bean
private static Calendar cal1 = new GregorianCalendar (2011,0,2);
private static Calendar cal2 = new GregorianCalendar (2011,0,4);
private static Date m_startDate = cal1.getTime();
private static Date m_endDate = cal2.getTime();

// Add these methods to your bean
public Date getTimeAxisStartDate() {
  return m_startDate;
}
public Date getTimeAxisEndDate() {
  return m_endDate;
}

オプションで、マネージドBeanに時間セレクタのリスナー用のメソッドを追加します。

例23-14に、図23-46に表示されている時間セレクタのサンプル・リスナーを示します。
例23-14 時間セレクタのリスナーのサンプル・コード
```
// Include these imports in your bean
import java.util.Date;
import java.util.Calendar;
import java.util.GregorianCalendar;
import oracle.adf.view.faces.bi.event.TimeSelectorEvent;
import javax.faces.event.AbortProcessingException;

// Add this method to your bean
public void processTimeSelectorEvent(TimeSelectorEvent event) throws AbortProcessingException
{
  Date startDate = new Date(event.getStartDate().getTime());
  Date endDate = new Date(event.getEndDate().getTime());
  if (graph2 != null)
  {
    graph2.setTimeRangeStart(startDate);
    graph2.setTimeRangeEnd(endDate);
  }
}
```
この例では、graph2変数はページのバッキングBeanでUIGraphとして宣言されています。ユーザーがマスター・グラフで時間セレクタの範囲を変更すると、リスナーのコードによってディテール・グラフに新しい時間範囲が設定されます。

グラフに時間セレクタを追加するには:

「構造」ウィンドウで、「dvt:typeGraph」ノードを右クリックし、「グラフ・タイプの中に挿入」→「ADFデータ視覚化」→「時間セレクタ」を選択します。
dvt:timeSelectorノードを右クリックして、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、次の属性に値を入力します。
- ExplicitStart: 時間範囲の初期の開始日を返すメソッドへの参照を指定します。
  
  たとえば、timeSelectorDemoという名前のBeanと、例23-13で参照されているgetTimeAxisStartDate()メソッドの場合は、初期日付に#{timeSelectorDemo.timeAxisStartDate}と入力します。
- ExplicitEnd: 時間範囲の初期の終了日を返すメソッドへの参照を指定します。
- Mode: 属性のドロップダウン・リストから「EXPLICIT」を選択して、時間セレクタの表示を有効にします。デフォルトでは、この属性はOFFに設定されています。
- FillColor: 属性のドロップダウン・リストから、時間セレクタの塗りつぶしの色を選択します。
- 時間セレクタの背後にデータ・ポイントを表示するには、「透明度」スライダを使用して100%未満の値を選択します。
  
  たとえば、「透明度」スライダを53%に設定すると、図23-46の時間セレクタが複製されます。これにより、塗りつぶしの色の値が6桁の16進数値から8桁の値に変更されます。最初の2桁は、塗りつぶしの色の透明度を表します。デフォルトでは、塗りつぶしの色は#000000に設定されており、時間セレクタの塗りつぶしの色は不透明です。
- オプションで透明色を有効にするには、FillTransparentドロップダウン・リストからtrueを選択します。
  
  FillTransparentとBorderTransparentをtrueに設定すると、時間セレクタは表示されなくなりますが、ユーザーはこれを選択できます。
- BorderColor: 属性のドロップダウン・リストから、時間セレクタの枠線の色を選択します。
- オプションで透明色を有効にするには、BorderTransparentドロップダウン・リストからtrueを選択します。
- オプションで、「TimeSelectorListener」フィールドに、時間セレクタのリスナーを返すメソッドへの参照を指定します。
  
  たとえば、timeSelectorDemoという名前のBeanと、例23-14で参照されているprocessTimeSelectorEventメソッドの場合は、時間セレクタのリスナーに#{timeSelectorDemo.processTimeSelectorEvent}と入力します。
例23-15に、時間セレクタの例に対応するJSFページのコードを示します。
例23-15 JSFページの時間セレクタのコード
```
<dvt:timeSelector explicitStart="#{timeSelectorDemo.timeAxisStartDate}"
                  explicitEnd="#{timeSelectorDemo.timeAxisEndDate}"
                  fillColor="#88c6d6ff" borderColor="#a5c6ff" mode="EXPLICIT"
             timeSelectorListener="#{timeSelectorDemo.processTimeSelectorEvent}"/>
```
ディテール・グラフを作成した場合は、ディテール・グラフが明示的な時間範囲を使用するように更新し、時間セレクタが変更されると時間範囲が更新されるように構成します。
1. 構造ウィンドウで、ディテール・グラフのノードを右クリックして、「プロパティに移動」を選択します。
2. 「プロパティ」ウィンドウで「外観」セクションを開きます。
3. TimeRangeMode属性のドロップダウン・リストからTRM_EXPLICITを選択します。
4. 「TimeRangeStart」フィールドに、時間範囲の開始時間を返すメソッドへの参照を指定します。
  
  たとえば、timeSelectorDemoという名前のBeanと、例23-13で参照されているgetTimeAxisStartDate()メソッドの場合は、初期日付に#{timeSelectorDemo.timeAxisStartDate}と入力します。
5. 「TimeRangeEnd」フィールドに、時間範囲の終了時間を返すメソッドへの参照を指定します。
6. 「プロパティ」ウィンドウで、「動作」セクションを展開します。
7. PartialTriggersフィールドにマスター・グラフのIDを入力して、ユーザーが時間セレクタの範囲を変更したときにディテール・グラフを更新できるようにします。
  
  たとえば、図23-46の折れ線グラフのIDを参照する場合は、::graph1と入力します。また、PartialTriggersのドロップダウン・メニューから「編集」を選択して、部分トリガーを選択することもできます。

23.7.4 アラートおよび注釈のグラフへの追加

アラートは、エラーや警告など、個別の記号で強調表示する必要のあるデータ・ポイントをグラフ上に定義します。アイコンはアラートの場所を示します。カーソルをアラート・アイコン上に移動すると、そのアラートのテキストが表示されます。

注釈は、カーソルがデータ値上に移動するときに情報を提供するために、グラフ上のデータ値に関連付けられています。

23.7.4.1 グラフへのアラートの追加方法

アラートは、dvt:alertタグを使用してグラフにいくつでも定義できます。アラートはグラフ・タグの子であるdvt:alertSetタグにラップされます。アラートごとに、イメージ・ソース(imageSource)、およびアラートを表示するX軸または順序軸(xValue)とY軸(yValue)上の場所を指定する必要があります。グラフでY2軸を使用する場合、YValueAssignment属性を使用してyValueをY2軸に関連付けることができます。ユーザーがアラートにマウス・カーソルを合わせたときに表示されるテキストも指定できます。

例23-16に、折れ線グラフに表示されるアラートのコードを示します。この例では、alertBeanマネージドBeanでxValueおよびyValue属性が定義されています。実行時に、ユーザーは、スピン・ボックスまたは日付セレクタを変更することで、両方の軸上のアラートの場所を変更できます。

例23-16 グラフ・アラートのサンプル・コード

<af:panelGroupLayout>
  <af:outputText value="Use spin box and date selector to change alert location."
                 id="ot2"/>
  <af:panelGroupLayout id="pgl2" layout="horizontal">
    <dvt:lineGraph id="graph1"
                   subType="LINE_VERT_ABS"
                   tabularData="#{alertBean.lineList}"
                   timeAxisType="TAT_MIXED_FREQUENCY_STRICT"
                   partialTriggers="::al1 ::yValue"
                   shortDesc="Line Graph">
      <dvt:graphTitle text="Line Graph"/>
      <dvt:alertSet>
        <dvt:alert xValue="#{alertBean.alertDate}"
                   yValue="#{alertBean.alertYValue}"
                   imageSource="#{resource['images:alert_icon.png']}"
                   text="Alert Example"/>
      </dvt:alertSet>
      <dvt:graphFootnote text="Alerts assigned to location and date"/>
    </dvt:lineGraph>
    <af:panelGroupLayout layout="vertical" id="pgl8">
      <af:inputDate label="Date" id="al1" value="#{alertBean.alertDate}"
                    autoSubmit="true"/>
      <af:inputNumberSpinbox label="Y Value" id="yValue"
                             value="#{alertBean.alertYValue}"
                             autoSubmit="true" stepSize="10"/>
    </af:panelGroupLayout>
</af:panelGroupLayout>

「プロパティ」ウィンドウで、アラートの場所属性に値を指定します。xValue属性には、string、doubleまたはdate型の値を指定できます。yValueには、double型の値を指定する必要があります。

xValueがdate型の場合、グラフのマネージドBeanでアラートのxValueを設定するメソッドを定義する必要があります。例23-17に、表形式データのサンプル配列を作成し、ユーザーの選択に合わせてアラートの日付および値を変更するアラートのメソッドを定義するコードを示します。表形式データの詳細は、23.2.5項「表形式データを使用したグラフの作成方法」を参照してください。マネージドBeanのヘルプが必要な場合は、3.6項「マネージドBeanの作成と使用」を参照してください。

例23-17 グラフ・アラートのサンプル・マネージドBean

import java.util.Date;
import java.util.ArrayList;
import java.util.Random;
import java.util.List;
import java.util.Calendar;
import java.util.GregorianCalendar;

public class alertBean {
  private List m_lineList;
  private Double m_alertYValue;
  private static Calendar cal1 = new GregorianCalendar (2010,0,1);
  private static Calendar cal2 = new GregorianCalendar (2010,0,1);
  private Date m_date;
  public alertBean(){
     m_alertYValue = new Double(100);
     m_date = cal1.getTime();
     Random random = new Random();
       m_lineList = new ArrayList();
       Date newDate = cal2.getTime();
       for (int i = 0; i < 100; i ++){
          double number = random.nextDouble() * 20+90;
          m_lineList.add(new Object[]{"Group "+i,"Series 1", newDate});
          m_lineList.add(new Object[]{"Group' "+i,"Series 1", 
                        new Double(number)});
          newDate = new Date(newDate.getTime() + 86400000);
       }
   }
     public List getLineList(){
         return m_lineList;
     }
     public Date getAlertDate(){
         return m_date;
     }
     public void setAlertDate(Date date){
         m_date = date;
     }
     public Double getAlertYValue(){
         return m_alertYValue;
     }
     public void setAlertYValue(Double value){
         m_alertYValue = value;
     }
}

図23-48に、アプリケーション起動時にレンダリングされる初期ページを示します。日付を変更すると、またはY軸に異なる値を入力すると、アラートが新しい場所に移動します。

図23-48 カスタマイズ可能なアラートの場所を備えた折れ線グラフ

始める前に:

グラフにアラートを追加する手順:

オプションで、マネージドBeanを作成し、アラート値を設定および取得するコードを追加します。詳細なヘルプが必要な場合は、3.6項「マネージドBeanの作成と使用」を参照してください。

たとえば、図23-48に表示されているアラートを複製するには、例23-17のコードを使用してpopupSample.javaという名前のマネージドBeanを作成します。
「構造」ウィンドウで、「dvt:typeGraph」ノードを右クリックし、「グラフ・タイプの中に挿入」→「ADFデータ視覚化」→「アラート・セット」を選択します。
「dvt:alert」ノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで次の属性を設定します。
- ImageSource: 既存イメージを選択する属性のドロップダウン・メニューを使用して、アラートのアイコンへのパスを指定するか、「編集」を選択して新しいイメージをアプリケーションに追加します。
- Text: アイコンにマウス・ポインタを合わせたときにツールチップに表示されるオプションのテキストを指定します。
- XValue: X軸または順序軸の値を指定します。オプションで、属性のドロップダウン・メニューを使用してEL式ビルダーにアクセスし、アラートのxValueを設定するメソッドを選択します。
  
  たとえば、例23-17のalertBeanマネージドBeanおよびsetAlertDateメソッドでは、xValueを値#{alertBean.alertDate}に設定します。
- YValue: Y軸の値を指定します。オプションで、属性のドロップダウン・メニューを使用してEL式ビルダーにアクセスし、アラートのyValueを設定するメソッドを選択します。
  
  たとえば、例23-17のalertBeanマネージドBeanおよびsetAlertYValueメソッドでは、yValueを値#{alertBean.alertDate}に設定します。
- YValueAssignment: yValue属性に関連付ける軸を指定します。有効な値は、Y1AXIS(デフォルト)またはY2AXIS(構成済の場合)です。
  
  例23-17のマネージドBeanの例では、yValueがY1AXISに関連付けられるため、デフォルトを変更する必要はありません。
アラートを追加するには、新しいアラートごとに「構造」ウィンドウで「dvt:alertSet」を右クリックし、「アラート・セットの中に挿入」→「アラート」を選択します。
ステップ3とステップ4を繰り返して新しいアラートを構成します。

23.7.4.2 グラフへの注釈の追加

1つのグラフにはdvt:annotationタグを使用していくつでも注釈を定義でき、複数の注釈を1つのデータ値に関連付けることができます。注釈は、グラフ・タグの子であるdvt:annotationSetタグにラップされます。

注釈に関連付けられたデータ・マーカーは、dvt:annotationタグの次の属性を使用して定義されます。

series: グラフの系列のゼロベースの索引を指定します。ほとんどのグラフでは、各系列が同じ色のマーカー・セットとして表示されます。たとえば、複数円グラフでは、黄色の各区分が靴の売上を表し、緑の各区分がブーツの売上を表す場合があります。棒グラフでは、黄色の棒がすべて靴の売上を表し、緑の棒がブーツの売上を表す場合があります。
group: グラフのグループのゼロベースの索引を指定します。グループの表示は、グラフ・タイプによって異なります。集合棒グラフでは、棒の各集合が1つのグループになります。積上げ棒グラフでは、各積層がグループです。複数円グラフでは、各円がグループです。

例23-18に、面グラフの注釈のセットを示します。

例23-18 注釈のセットのサンプル・コード

<dvt:areaGraph> 
  <dvt:annotationSet>
    <dvt:annotation series="0" group="0" text="annotation #1"/>
    <dvt:annotation series="0" group="7" fillColor="#55FFFF00"
                    borderColor="#55FF0000" text="second annotation"/>
  </dvt:annotationSet>
</dvt:areaGraph>

グラフの描画エリアでは次の属性を使用して注釈の位置を制御できます。

position: 注釈に使用する配置のタイプを指定します。有効な値は次のとおりです。
- dataValue(デフォルト): seriesおよびgroup属性で定義されるデータ値で注釈を配置します。他の注釈との重なりは避けられます。
- absolute: X軸とY軸の両方があるグラフのxValueとyValueにより定義された正確な位置に注釈を配置します。他の注釈との重なりは避けられません。
- percentage: X軸とY軸の両方があるグラフの描画エリアの0から100のパーセンテージとしてxValueとyValueを使用して定義された正確な位置に注釈を配置します。他の注釈との重なりは避けられません。
xValue: 注釈を配置するX値を指定します。この設定は、注釈のpositionがabsoluteまたはpercentageの場合にのみ適用されます。
yValue: 注釈を配置するY値を指定します。この設定は、注釈のpositionがabsoluteまたはpercentageの場合にのみ適用されます。
horizontalAlignment: 注釈の水平配置を指定します。この設定は、注釈のposition属性がabsoluteまたはpercentageの場合にのみ適用されます。有効な値は、LEFT (デフォルト)、CENTER、LEADINGまたはRIGHTです。
verticalAlignment: 注釈の垂直配置を指定します。この設定は、注釈のposition属性がabsoluteまたはpercentageの場合にのみ適用されます。有効な値は、CENTER (デフォルト)、TOPまたはBOTTOMです。

23.7.5 ドリル可能なグラフの作成

アプリケーションでFusionテクノロジ・スタックが使用される場合、ドリル可能なグラフを作成できます。ドリル可能なグラフはADFデータ・コントロールにバインドされ、面、線またはマーカーで表示されるデータの詳細なビューを表示します。グラフをドリル可能にするには、<type>GraphコンポーネントのdrillingEnabled属性をtrueに設定します。デフォルト値はfalseです。

また、グラフのページ定義ファイルを更新してドリル階層を定義し、集計データの表示方法を指定する必要があります。データ・バインドされたグラフへのドリル・サポートの追加の詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータ・バインドされたグラフの作成に関する項を参照してください。

23.7.6 グラフへのドラッグ・アンド・ドロップの追加

ADF Facesフレームワークには、ページ上の場所から別の場所へアイテムをドラッグ・アンド・ドロップする機能があります。バブル・グラフと散布図は、子のaf:dragSourceコンポーネントを追加し構成することにより、マーカーをグラフの描画エリアのある位置から別の位置へ移動できるドラック・ソースとして構成できます。X位置およびY位置を備えたすべてのデータ軸グラフをドロップ・ターゲットとして構成できます。たとえば、子af:dropTargetコンポーネントを追加および構成することで、棒グラフにバブル・グラフ・マーカーを挿入できます。

23.7.6.1 グラフにドラッグ・アンド・ドロップを追加する方法

グラフは、次の操作をサポートするように構成できます。

グラフ間のドラッグ
グラフから別のADFコンポーネントへのドラッグ
グラフの描画エリア内での散布/バブル・マーカーのドラッグ
別のコンポーネントへの散布/バブル・マーカーのドラッグ
複数のマーカーのドラッグ

たとえば、バブル・グラフ内のデータ・マーカーをドラッグして表ビューでそれらの値を表示したり、逆に、表からバブル・グラフで表示するためにデータ値をドラッグしたりできます。図23-49に、ドラッグ元として構成されたバブル・グラフと、この機能を果たすためのドロップ・ターゲットを示します。

図23-49 ドラッグ元としてのバブル・グラフとドロップ・ターゲット

マネージドBeanでドラッグ・アンド・ドロップ・イベントに応答するメソッドを定義します。例23-19に、図23-49で使用されているドラッグ・アンド・ドロップ・リスナーを追加するためのサンプル・コードを示します。マネージドBeanの使用の詳細は、3.6項「マネージドBeanの作成と使用」を参照してください。

例23-19 ドラッグ・アンド・ドロップ・ターゲットを処理するためのマネージドBeanのサンプル

public class dragAndDrop {
  public DnDAction fromGraphDropListener(DropEvent event) {
    // Get the ComponentHandle from the transferable
    Transferable transferable = event.getTransferable();
    GraphSelectionSet selectionSet =  transferable.getData(GraphSelectionSet.class);
    // Now change each marker based on the DropEvent's proposed action
    DnDAction proposedAction = event.getProposedAction();
   for(GraphSelection selection : selectionSet) {
      Employee emp = findEmployee(m_graphList, selection);
      if(emp == null)
        return DnDAction.NONE;
      if(proposedAction == DnDAction.COPY) {
        m_tableModel.add(new Employee("Copy of " + emp.getName(), emp));  
      }
      else if(proposedAction == DnDAction.LINK) {
        m_tableModel.add(new Employee("Link to " + emp.getName(), emp));  
      }
      else if(proposedAction == DnDAction.MOVE) {
        m_graphList.remove(emp);
        m_tableModel.add(emp);
      }
    }
 RequestContext.getCurrentInstance().addPartialTarget(event.getDragComponent());
        return proposedAction;
  }
  public DnDAction fromTableDropListener(DropEvent event) {
    Transferable transferable = event.getTransferable();
    DataFlavor<RowKeySet> dataFlavor = DataFlavor.getDataFlavor(RowKeySet.class, "fromTable");
    RowKeySet set = transferable.getData(dataFlavor);
    Employee emp = null;
    if(set != null && !set.isEmpty()) {
      int index = (Integer) set.iterator().next();
      emp = m_tableModel.get(index);
    }
    if(emp == null)
        return DnDAction.NONE;
    DnDAction proposedAction = event.getProposedAction();
    if(proposedAction == DnDAction.COPY) {
      m_graphList.add(emp);  
    }
    else if(proposedAction == DnDAction.LINK) {
      m_graphList.add(emp);
    }
    else if(proposedAction == DnDAction.MOVE) {
      m_graphList.add(emp);
      m_tableModel.remove(emp);
    }
    else
        return DnDAction.NONE;
  RequestContext.getCurrentInstance().addPartialTarget(event.getDragComponent());
    return event.getProposedAction();
  }

始める前に:

グラフの属性やグラフの子コンポーネントが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、23.2.2項「グラフの構成」を参照してください。

次のタスクを完了する必要があります。

ページにバブル・グラフを作成します。詳細は、23.2.3項「ページへのグラフの追加方法」を参照してください。

ドラッグ・ソースおよびドロップ・ターゲットとして表コンポーネントを作成および構成します。例23-20に、表作成のサンプル・コードを示します。表作成の詳細は、第12章「表へのデータの表示」を参照してください。ドラッグ・ソースおよびドロップ・ターゲットの作成の詳細は、第36章「ドラッグ・アンド・ドロップ機能の追加」を参照してください。

例23-20 表のドラッグ元およびドロップ・ターゲットのサンプル・コード

<af:table id="table" value="#{dragAndDrop.tableModel}"
                     var="row" width="420" inlineStyle=" height:300px;"
                     columnStretching="last">
  <af:dragSource actions="COPY MOVE LINK" defaultAction="MOVE"
                 discriminant="fromTable"/>
  <af:dropTarget dropListener="#{dragAndDrop.fromGraphDropListener}"
                 actions="COPY MOVE LINK">
    <af:dataFlavor
          flavorClass="oracle.adf.view.faces.bi.component.graph.GraphSelectionSet"
          discriminant="fromGraph"/>
  </af:dropTarget>
  <af:column headerText="Name" id="c1">
    <af:outputText value="#{row.name}" id="ot5"/>
  </af:column>
  <af:column headerText="Performance" id="c2">
    <af:outputText value="#{row.performance}" id="ot6"/>
  </af:column>
  <af:column headerText="Salary" id="c3">
    <af:outputText value="#{row.salary}" id="ot7"/>
  </af:column>
  <af:column headerText="Experience" id="c4">
    <af:outputText value="#{row.experience}" id="ot8"/>
  </af:column>
</af:table>

マネージドBeanでドラッグ・アンド・ドロップ・イベントに応答するメソッドを作成します。例23-19に、ドラッグ・アンド・ドロップ・イベントを処理するためのサンプル・コードを示します。マネージドBeanの詳細は、3.6項「マネージドBeanの作成と使用」を参照してください。

バブル・グラフにドラッグ・アンド・ドロップを追加する手順:

「構造」ウィンドウで「dvt:bubbleGraph」コンポーネントを右クリックし、「バブルの中に挿入」→「ADF Faces」→「ドラッグ元」を選択します。
「プロパティ」ウィンドウで次の属性を設定します。
- Actions: このドラッグ元でサポートされるドラッグ・アンド・ドロップ・アクションを指定します。アクションは、使用可能な値(COPY、LINKまたはMOVE)をどの順序でも、空白区切りですべて大文字のリストにする必要があります。デフォルト値はCOPYです。
- DefaultAction: このドラッグ元でサポートされるデフォルトのドラッグ・アンド・ドロップ・アクションを指定します。指定可能なアクションは、COPY、LINKまたはMOVEです。
- Discriminant: このドラッグ元により生成されるデフォルトのデータ・フレーバの識別値を指定します。識別値は、このドラッグ元からのドラッグを識別するために使用されます。ドラッグ・アンド・ドロップは、互換性のあるドラッグ元とドロップ・ターゲット間でのみ実行できることに注意してください。識別値は、互換性維持の目的で使用されます。デフォルトのドラッグ・ソースによって生成されるデータ・フレーバの識別値は、ドロップ・ターゲットの許容データ・フレーバの許容識別値と一致する必要があります。
「構造」ウィンドウで「dvt:bubbleGraph」ノードを右クリックし、「バブルの中に挿入」→「ADF Faces」→「ドロップ・ターゲット」を選択します。

「ドロップ・ターゲットの挿入」ダイアログで、コンポーネントでドロップが発生したときに呼び出されるoracle.adf.view.rich.event.DropEventメソッドへの参照を評価するEL式として「DropListener」を指定します。

例23-21に、図23-49のバブル・グラフにドラッグ・アンド・ドロップ操作を追加するためのサンプル・コードを示します。この例で使用されているDropListenerを指定するには、#{dragAndDrop.fromTableDropListener}と入力します。

例23-21 バブル・グラフのドラッグ・アンド・ドロップのサンプル・コード

<dvt:bubbleGraph shortDesc="Graph" dataSelection="multiple"
                 markerTooltipTemplate="GROUP_LABEL NEW_LINEPerformance: X_VALUE
                 NEW_LINESalary: Y_VALUE NEW_LINEExperience: Z_VALUE"
                 value="#{dragAndDrop.graphModel}" id="bg1">
  <dvt:x1Title text="Performance"/>
  <dvt:y1Title text="Salary"/>
  <dvt:x1Axis axisMaxValue="120" axisMaxAutoScaled="false"/>
  <dvt:y1Axis axisMaxValue="120000" axisMaxAutoScaled="false"/>
  <dvt:legendArea rendered="false"/>
  <af:dragSource actions="COPY MOVE LINK" defaultAction="MOVE"
                 discriminant="fromGraph"/>
  <af:dropTarget actions="COPY MOVE LINK"
                 dropListener="#{dragAndDrop.fromTableDropListener}">
    <af:dataFlavor flavorClass="org.apache.myfaces.trinidad.model.RowKeySet"
                   discriminant="fromTable"/>
  </af:dropTarget>
</dvt:bubbleGraph>

「データ・フレーバの挿入」ダイアログで、このdataFlavorの完全修飾Javaクラス名であるflavorClassを指定します。ドロップがこのdataFlavorを含むとき、ドロップ・ターゲットではdataFlavorを使用して、このJavaタイプを持つドロップからオブジェクトを取得することが保証されます。

たとえば、例23-21で使用されているflavorClassを指定するには、org.apache.myfaces.trinidad.model.RowKeySetと入力します。

23.7.6.2 グラフへのドラッグ・アンド・ドロップの追加に関する必知事項

図23-49のグラフおよび表データは、グラフおよび表のvalue属性で指定されています。この例では、マネージドBeanに簡単なEmployeeクラスを設定するためのコードが含まれます。グラフおよび表へのデータの指定の詳細は、22.3項「ADFデータ視覚化コンポーネントへのデータの指定」を参照してください。

例で使用されているEmployeeクラスおよびサンプル・メソッドを作成するマネージドBeanの完全バージョンは、F.2項を参照してください。

グラフでのドラッグ・アンド・ドロップの構成の詳細は、第36章「ドラッグ・アンド・ドロップ機能の追加」を参照してください。

23.7.7 グラフへのポップアップの追加方法

グラフの子コンポーネントseriesSetは、情報を提供したり、エンド・ユーザーからの入力を要求したりするポップアップのダイアログ、ウィンドウおよびメニューが表示されるように構成できます。af:popupコンポーネントを他のADF Facesコンポーネントで使用すると、セカンダリ・ウィンドウでの情報の表示および非表示、追加データの入力、コンテキスト・メニューなどの機能の呼出しを、エンド・ユーザーに許可する機能を構成できます。

ADF Facesのコンポーネントでは、ポップアップの表示または非表示にJavaScriptは不要です。af:showPopupBehaviorタグは宣言的ソリューションとなるため、popupコンポーネントを開くためのJavaScriptの作成や、スクリプトのpopupコンポーネントへの登録の必要がありません。これらのコンポーネントの詳細は、第15章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。

たとえば、ノート・ウィンドウで情報を表示するポップアップを散布図の系列内のデータ・マーカーと関連付けることができます。図23-50に、データ・マーカーをクリックして、ノート・ウィンドウに特定のマーカーに関するデータを示すゲージを表示した散布図を示します。

図23-50 散布図のデータ・マーカー・ポップアップ・ノート・ウィンドウ

始める前に:

次のタスクを完了する必要があります。

ページにグラフを追加します。詳細は、23.2.3項「ページへのグラフの追加方法」を参照してください。

図23-50のゲージ・ポップアップの例を複製するには、散布図を作成します。

グラフの系列でデータ・ポイントが参照するポップアップ・コンポーネントを作成します。図23-50に、図23-50に表示されているグラフ系列のデータ・ポイントをユーザーがクリックすると参照されるポップアップのサンプル・コードを示します。

例23-22 グラフ・データ・マーカー・ポップアップ・ウィンドウのサンプル・コード

<af:popup id="graphPopup" launcherVar="source"
          eventContext="launcher"
          clientComponent="true" contentDelivery="lazyUncached">
  <af:setPropertyListener from="#{source.seriesKey}"
                          to="#{popupSample.seriesKey}" type="popupFetch"/>
  <af:setPropertyListener from="#{source.groupKeys}"
                          to="#{popupSample.groupKeys}" type="popupFetch"/>
  <af:panelWindow title="Graph Popup" id="pw1">
    <dvt:gauge shortDesc="Gauge" value="#{popupSample.gaugeValue}"
               gaugeType="DIAL" animationOnDisplay="auto"
               inlineStyle="width:150px;height:120px;" minValue="0"
               maxValue="100" contentDelivery="immediate" id="g3">
      <dvt:bottomLabel text="Sales" position="LP_NONE"/>
      <dvt:metricLabel position="LP_NONE"/>
      <dvt:thresholdSet>
        <dvt:threshold thresholdMaxValue="#{popupSample.quotaValue}"
                       text="Under Quota"/>
        <dvt:threshold fillColor="#84AE31" text="Above Quota"/>
      </dvt:thresholdSet>
      <dvt:indicator useThresholdFillColor="true"/>
      <dvt:tickLabel content="TC_MIN_MAX TC_INCREMENTS"/>
      <dvt:tickMark content="TC_NONE" majorTickCount="5"/>
    </dvt:gauge>
  </af:panelWindow>
</af:popup>

マネージドBeanにメソッドを追加して、ポップアップ要求に応答するリスナー・メソッドを定義します。マネージドBeanの詳細は、3.6項「マネージドBeanの作成と使用」を参照してください。

例23-23に、ゲージ・ポップアップの例のポップアップ要求に応答するために使用するサンプル・コードを示します。この例では、散布図でデフォルトのデータ値が使用されています。グラフへのデータの指定の詳細は、22.3項「ADFデータ視覚化コンポーネントへのデータの指定」を参照してください。

例23-23 グラフ・データ・マーカー・ポップアップのマネージドBeanのサンプル・コード

import java.util.List;
import java.util.Set;
import oracle.adf.view.faces.bi.component.gauge.UIGauge;
import oracle.adf.view.faces.bi.component.graph.UIGraph;
import oracle.adf.view.faces.bi.model.KeyMap;
import oracle.dss.graph.DataType;
public class popupSample {    
  private UIGraph m_graph;
  private UIGauge m_gauge;
  private KeyMap m_seriesKey;
  private List<KeyMap> m_groupKeys;
  public UIGraph getGraph() {
      if(m_graph == null)
         m_graph = new UIGraph();
      return m_graph;
  }
  public void setGraph(UIGraph graph) { m_graph = graph; }
  public UIGauge getGauge() {
      if(m_gauge == null)
         m_gauge = new UIGauge();
      return m_gauge;
  }
  public void setGauge(UIGauge gauge) { m_gauge = gauge;}
  public KeyMap getSeriesKey() { return m_seriesKey; }
  
  public void setSeriesKey(KeyMap key) { m_seriesKey = key; }
  public List<KeyMap> getGroupKeys() { return m_groupKeys; }
  public void setGroupKeys(List<KeyMap> keys) { m_groupKeys = keys; }
  private int m_gaugeValue = 0;
  public int getGaugeValue() {
    // Reestablish context
    m_graph.setDataKey(m_seriesKey, m_groupKeys);
    // Fetch the x value
    Object val = m_graph.getDataValue(DataType.X_VALUE);
    if(val instanceof Number) {
      Number number = (Number) val;
      m_gaugeValue = (int) number.doubleValue();
    }
    return m_gaugeValue;
  }
  private int m_quotaValue = 0;
  public int getQuotaValue() {
    // Reestablish context
    m_graph.setDataKey(m_seriesKey, m_groupKeys);
    // Fetch the y value
    Object val = m_graph.getDataValue(DataType.Y_VALUE);
    if(val instanceof Number) {
      Number number = (Number) val;
      m_quotaValue = (int) number.doubleValue();
    }
    return m_quotaValue;
  }
}

グラフの系列セットにポップアップを追加する手順:

「構造」ウィンドウで、グラフの子の「dvt:seriesSet」コンポーネントを右クリックし、「系列セットの中に挿入」→「ポップアップ表示動作」を選択します。
af:showPopupBehaviorノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで次の属性を設定します。
- PopupId: 包含するコンポーネントに関連するポップアップのIDを入力します。コロン1つで始まるIDは、コロンを除いた後、絶対値として扱われます。
  
  たとえば、例23-22のゲージ・ポップアップを参照するには、::graphPopupと入力します。
- TriggerType: 表示されるポップアップをトリガーするイベント・タイプを入力します。グラフのseriesSetコンポーネントの有効な値は、action、clickおよびmouseHoverです。
  
  たとえば、ゲージ・ポップアップの例を続行するには、clickと入力します。
- Align: ドロップダウン・リストから、ポップアップをどのようにseriesSetコンポーネントと位置合せするかを選択します。
  
  この属性にはデフォルト設定がありませんが、この属性は通常必須です。ただし、ポップアップ・タイプがaf:panelWindowまたはaf:dialogの場合、この属性は設定する必要ありません。これらのタイプのポップアップは、ドラッグ・アンド・ドロップを使用して手動で再配置可能であり、デフォルトでブラウザ・ウィンドウの中央に開きます。
  
  ゲージ・ポップアップの例を続行するには、ゲージ・ポップアップの例でaf:panelWindowタイプを使用するため、このフィールドは空白のままにします。
- AlignID: 位置合せするポップアップに関連するコンポーネントのIDを入力します。コロン1つで始まるIDは、コロンを除いた後、絶対値として扱われます。
  
  ポップアップ・タイプがaf:panelWindowまたはaf:dialog以外の場合、この属性も通常必須です。ゲージ・ポップアップの例を続行するには、このフィールドは空白のままにします。

例23-24に、ポップアップ・コンポーネントをグラフの系列セットに関連付けるためのサンプル・コードを示します。

例23-24 系列セット・コンポーネントに関連付けられたポップアップのサンプル・コード

<dvt:scatterGraph dataSelection="single"
                  shortDesc="Scatter Graph with Click Popup"
                  binding="#{popupSample.graph}" 
                  inlineStyle="width:500px;height:350px;" id="g2">
  <dvt:seriesSet defaultMarkerShape="MS_HUMAN">
    <af:showPopupBehavior triggerType="click" popupId="::graphPopup"/>
  </dvt:seriesSet>
  <dvt:x1Title text="Sales in Millions"/>
  <dvt:y1Title text="Quota in Millions"/>
  <dvt:graphTitle text="Sales Performance"/>
  <dvt:graphSubtitle text="FY08"/>
</dvt:scatterGraph>

23.7.8 グラフのデータ・マーカー選択サポートの追加

選択サポートを追加して、ユーザーがグラフのデータ・マーカーを1つ以上選択したときにプログラムで応答します。

たとえば、図23-51に、単一および複数選択をサポートし、選択されたシリーズの情報を出力する棒グラフを示します。複数の選択を行うには、キーボードの[Ctrl]を押しながら複数のデータ・マーカーを選択します。

図23-51 複数選択サポートを表示する棒グラフ

23.7.8.1 グラフへの選択サポートの追加方法

選択サポートを追加するには、SelectionEventを処理して必要なロジックを実行するリスナーを、マネージドBean内に作成します。その後、グラフのdataSelection属性で選択サポートを有効にして、グラフのselectionListener属性をリスナーにバインドします。

例23-25に、選択状態を書式設定された文字列として図23-51の棒グラフの下に表示して返すマネージドBeanを作成するためのサンプル・コードを示します。

例23-25 グラフの選択サポート用マネージドBeanの例

import java.util.List;
import java.util.Set;
import oracle.adf.view.faces.bi.component.graph.DataSelection;
import oracle.adf.view.faces.bi.component.graph.GraphSelection;
import oracle.adf.view.faces.bi.event.graph.SelectionEvent;
import oracle.adf.view.faces.bi.model.KeyMap;
 
public class graphSelection {
  public void selectionListener(SelectionEvent selectionEvent) {
    StringBuilder eventInfo = new StringBuilder();
    Set<? extends GraphSelection> selectionSet = selectionEvent.getGraphSelection();
    eventInfo.append(convertSelectionStateToString(selectionSet));
    
    // Store on the selection string
    m_selectionInfo = eventInfo.toString();
  }
  
  /**
   * Returns the selection state as a formatted String with one selected data point per line.
   * @param selectionSet
   * @return
   */
  public static String convertSelectionStateToString(Set<? extends GraphSelection> selectionSet) {
    StringBuilder selectionState = new StringBuilder();
    for(GraphSelection selection: selectionSet) {
      if(selection instanceof DataSelection) {
        DataSelection ds = (DataSelection) selection;
        Set seriesKeySet = ds.getSeriesKey().keySet();
        for(Object key : seriesKeySet) {
          selectionState.append(key).append(": ").append(ds.getSeriesKey().get((String)key));
        }
        
        List<KeyMap> groupKeys = ds.getGroupKeys();
        for(KeyMap groupKey : groupKeys) {
          Set groupKeySet = groupKey.keySet();
          for(Object key : groupKeySet) {
            selectionState.append("; ").append(key).append(": ").append(groupKey.get((String)key));
          }
        }
        
        selectionState.append("<br>");
      }
    }
    
    return selectionState.toString();
  }
 
  private String m_selectionInfo = "Select a marker to see information here.  Multiple objects can be selected by holding CTRL while selecting.";
  public String getSelectionInfo() {
    return m_selectionInfo;
  }
}

例23-26に、複数選択サポート用のJDeveloperページを構成し、グラフのselectionListener属性を選択リスナーにバインドするためのサンプル・コードを示します。このサンプルでは、af:outputFormattedコンポーネントを使用して、選択された情報をページに表示しています。

例23-26 ページにグラフの選択サポートを構成するためのコード・サンプル

<af:panelGroupLayout id="pgl1">
  <dvt:barGraph id="graph1" subType="BAR_VERT_CLUST" shortDesc="BarGraph"
                selectionListener="#{graphSelection.selectionListener}"
                dataSelection="multiple">
    <dvt:background>
      <dvt:specialEffects/>
    </dvt:background>
    <dvt:graphPlotArea/>
    <dvt:seriesSet>
      <dvt:series/>
    </dvt:seriesSet>
    <dvt:o1Axis/>
    <dvt:y1Axis/>
    <dvt:legendArea automaticPlacement="AP_NEVER"/>
  </dvt:barGraph>
  <af:outputFormatted id="selectionText"
                      inlineStyle="font-size:120.0%;"
                      partialTriggers="graph1"
                      value="#{graphSelection.selectionInfo}"/>
</af:panelGroupLayout>

始める前に:

他のADF Faces機能を使用して追加できる機能について理解しておくことをお薦めします。詳細は、23.1.3項「グラフ・コンポーネントの追加機能」を参照してください。

また、ADF Facesのイベント処理について理解しておくことをお薦めします。詳細は、第6章「イベント処理」を参照してください。

次のタスクを完了する必要があります。

ページにグラフを追加します。詳細は、23.2.3項「ページへのグラフの追加方法」を参照してください。

この項の複数選択サポートの例と同じ構成を行う場合は、棒グラフを作成します。
マネージドBeanにメソッドを追加して、選択イベントに応答するリスナー・メソッドを定義します。マネージドBeanの詳細は、3.6項「マネージドBeanの作成と使用」を参照してください。

グラフに選択サポートを追加するには:

「構造」ウィンドウで「dvt:typeGraph」ノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、「動作」セクションを展開し、次の属性の値を指定します。
1. DataSelection: singleまたはmultipleを指定して、単一または複数のデータ・マーカーの選択サポートを有効にします。デフォルトはnoneで、選択はデフォルトでは有効になっていません。
2. SelectionListener: 選択リスナーへの参照を指定します。
  
  たとえば、graphSelection.javaという名前のマネージドBeanでselectionListenerメソッドを指定するには、SelectionListenerフィールドに#{graphSelection.selectionListener}と入力します。
必要に応じて追加の構成を行います。

たとえば、この項の複数選択の例を複製するには、ページに次のコードを追加します。
```
<af:outputFormatted id="selectionText"
    inlineStyle="font-size:120.0%;"
    partialTriggers="graph1" value="#{graphSelection.selectionInfo}"/>
```

23.7.8.2 グラフのデータ・マーカー選択に関する必知事項

選択リスナーはグラフのデータ・マーカーのみに対するクリック・イベントに応答します。

JDeveloperには、グラフの他のコンポーネントのクリック・イベントに応答できるclickListenerリスナーもあります。ただし、クリック・リスナーでは、単一選択サポートのみが提供され、ホバーとクリックのフィードバックがselectionListenerリスナーの場合とは異なります。また、新しいコンポーネントではclickListener属性を利用できないことからも、一般的はこのリスナーより選択リスナーの使用をお薦めします。

23.7.9 グラフのコンテキスト・メニューの構成

コンテキスト・メニューは、次のコンテキスト・メニュー・ファセットを使用して、グラフ・コンポーネント用に定義できます。

bodyContextMenu: グラフ・コンポーネントの選択できない要素に表示されるコンテキスト・メニューを指定します。
contextMenu: グラフ・コンポーネント内の選択可能要素で表示されるコンテキスト・メニューを指定します。
multiSelectContextMenu: グラフ・コンポーネント内で複数の要素が選択されるときに表示されるコンテキスト・メニューを指定します。

JSPまたはJSPXページの各ファセットでは、1つの子コンポーネントがサポートされます。Faceletは、複数の子コンポーネントをサポートします。これらのファセットすべてを機能させるには、特定のグラフ・タイプ用に選択を有効にし、サポートされるようにする必要があります。コンテキスト・メニューは、現在のところFlashでのみサポートされています。

技術的な制限のために、Flashのレンダリング形式の使用時には、現在のところコンテキスト・メニューのコンテンツはFlash Playerのコンテキスト・メニューを使用して表示されます。このため、Flash Playerにより定義されたいくつかの制限があります。詳細は、22.2.4項「グラフ、ゲージ、ツリーマップおよびサンバーストのコンテキスト・メニュー」を参照してください。

たとえば、図23-52は、カスタム・メニュー項目が表示された散布図のコンテキスト・メニューを示しています。

図23-52 散布図のカスタム・コンテキスト・メニュー

例23-27に、散布図のコンテキスト・メニューを構成するためのサンプル・コードを示します。

例23-27 散布図のコンテキスト・メニューのサンプル・コード

<dvt:scatterGraph binding="#{contextMenu.graph}" subType="SCATTER"
                  dataSelection="multiple" id="graph" shortDesc="ScatterGraph">
  <f:facet name="contextMenu">
    <af:popup contentDelivery="lazyUncached" id="p1">
      <af:menu id="m1">
        <af:commandMenuItem text="Show Details"
                            actionListener="#{contextMenu.menuItemListener}"
                            id="cmi1"/>
        <af:group id="g1">
          <af:commandMenuItem text="Add Task for #{contextMenu.currentSeriesId}"
                              actionListener="#{contextMenu.menuItemListener}"
                              id="cmi2"/>
          <af:commandMenuItem text="Add Task"
                              actionListener="#{contextMenu.menuItemListener}"
                              id="cmi3"/>
          <af:commandMenuItem text="Add Notes"
                              actionListener="#{contextMenu.menuItemListener}"
                              id="cmi4"/>
        </af:group>
      </af:menu>
    </af:popup>
  </f:facet>
  <f:facet name="bodyContextMenu">
    <af:popup contentDelivery="immediate" id="p2">
      <af:menu id="m2">
        <af:goMenuItem text="www.oracle.com"
                       destination="http://www.oracle.com"
                       id="gmi1"/>
      </af:menu>
    </af:popup>
  </f:facet>
  <f:facet name="multiSelectContextMenu">
    <af:popup contentDelivery="lazyUncached" id="p3">
      <af:menu id="m3">
        <af:commandMenuItem text="Compare Selected Objects"
                            actionListener="#{contextMenu.menuItemListener}"
                            id="cmi5"/>
      </af:menu>
    </af:popup>
  </f:facet>
</dvt:scatterGraph>

例23-28に、カスタム・コンテキスト・メニューを作成するマネージドBeanのサンプル・コードを示します。マネージドBeanの詳細は、3.6項「マネージドBeanの作成と使用」を参照してください。

例23-28 カスタム・コンテキスト・メニューを作成するためのマネージドBean

import java.util.Set;
import javax.faces.component.UIComponent;
import javax.faces.event.ActionEvent;
import oracle.adf.view.faces.bi.component.graph.DataSelection;
import oracle.adf.view.faces.bi.component.graph.GraphSelection;
import oracle.adf.view.faces.bi.component.graph.UIGraph;
import oracle.adf.view.faces.bi.model.KeyMap;
import oracle.adf.view.rich.component.rich.nav.RichCommandMenuItem;
import oracle.adf.view.rich.component.rich.output.RichOutputFormatted;
import org.apache.myfaces.trinidad.context.RequestContext;

public class ContextMenu {
  private RichOutputFormatted m_outputFormatted;
  public RichOutputFormatted getOutputFormatted() {
    if(m_outputFormatted == null)
      m_outputFormatted = new RichOutputFormatted();
    return m_outputFormatted;
  }
  public void setOutputFormatted(RichOutputFormatted text) {
    m_outputFormatted = text;
  }
  private String m_status = "Click Menu Item for Status";
  public String getStatus() {
    return m_status;
  }
  private UIGraph m_graph;
  public UIGraph getGraph() {
    if(m_graph == null)
      m_graph = new UIGraph();
    return m_graph;
  }
  public void setGraph(UIGraph graph) {
    m_graph = graph;
  } 
  public String getCurrentSeriesId() {
    if(m_graph != null) {
      Set<? extends GraphSelection> set = m_graph.getSelection();
      if(set != null && !set.isEmpty()) {
        GraphSelection selection = set.iterator().next();
        if(selection instanceof DataSelection) {
          DataSelection dataSelection = (DataSelection) selection;
          KeyMap seriesKey = dataSelection.getSeriesKey();
          Set seriesKeySet = seriesKey.keySet();
          for(Object key : seriesKeySet) {
            return seriesKey.get((String)key);
          }
        }
      }
    }
    return null;
  }
  /**
   * Called when a commandMenuItem is clicked.  Updates the outputText with information about the menu item clicked.
   * @param actionEvent
   */
  public void menuItemListener(ActionEvent actionEvent) {
    UIComponent component = actionEvent.getComponent();
    if(component instanceof RichCommandMenuItem) {
      RichCommandMenuItem cmi = (RichCommandMenuItem) component;
      // Add the text of the item into the status message
      StringBuilder s = new StringBuilder();
      s.append("You clicked on \"").append(cmi.getText()).append("\".  <br><br>");
      // If graph data is selected, add that too
      Set<? extends GraphSelection> selectionSet = m_graph.getSelection();
      if(!selectionSet.isEmpty()) {
        // Write out the selection state
        s.append("The current graph selection is: <br>");
        s.append(SelectionSample.convertSelectionStateToString(selectionSet));
      }
      m_status = s.toString();
      RequestContext.getCurrentInstance().addPartialTarget(m_outputFormatted);
    }
  }
}

前述の例のマネージドBeanは、例23-29に表示されるSelectionSampleクラスを呼び出します。

例23-29 カスタム・コンテキスト・メニューのSelectionSampleクラスのマネージドBean

import java.util.ArrayList;
import java.util.List;
import java.util.Set;
import javax.faces.model.SelectItem;
import oracle.adf.view.faces.bi.component.graph.DataSelection;
import oracle.adf.view.faces.bi.component.graph.GraphSelection;
import oracle.adf.view.faces.bi.event.graph.SelectionEvent;
import oracle.adf.view.faces.bi.model.KeyMap;
public class SelectionSample {
  public void selectionListener(SelectionEvent selectionEvent) {
    StringBuilder eventInfo = new StringBuilder();
    Set<? extends GraphSelection> selectionSet = 
                           selectionEvent.getGraphSelection();
    eventInfo.append(convertSelectionStateToString(selectionSet));
    // Store on the selection string
    m_selectionInfo = eventInfo.toString();
  }
  /**
   * Returns selection state formatted with one selected data point per line.
   * @param selectionSet
   * @return
   */
  public static String convertSelectionStateToString 
                       (Set<? extends GraphSelection> selectionSet) {
    StringBuilder selectionState = new StringBuilder();
    for(GraphSelection selection: selectionSet) {
      if(selection instanceof DataSelection) {
        DataSelection ds = (DataSelection) selection;
        Set seriesKeySet = ds.getSeriesKey().keySet();
        for(Object key : seriesKeySet) {
          selectionState.append(key).append(": ").
                                 append(ds.getSeriesKey().get((String)key));
        }
        List<KeyMap> groupKeys = ds.getGroupKeys();
        for(KeyMap groupKey : groupKeys) {
          Set groupKeySet = groupKey.keySet();
          for(Object key : groupKeySet) {
            selectionState.append("; ").append(key).append(": ").
                                        append(groupKey.get((String)key));
          }
        }
        selectionState.append("<br>");
      }
    }
    return selectionState.toString();
  }
  private String m_selectionInfo = "Select a marker to see information here.";
  public String getSelectionInfo() {
    return m_selectionInfo;
  }
  private String graphType = "bubbleGraph";
  public String getGraphType() {
      return graphType;
  }
  public void setGraphType(String type) {
      graphType = type;
  }
  private List graphList;
  public List getGraphList() {
      graphList = new ArrayList();
      SelectItem graph = new SelectItem("bubbleGraph", "Bubble Graph");
      graphList.add(graph);
      graph = new SelectItem("scatterGraph", "Scatter Graph");
      graphList.add(graph);
      return graphList;
  }
}