| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11g リリース2(11.1.2.4.0) B66719-05 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11g リリース2(11.1.2.4.0) B66719-05 |
|
前 |
次 |
この章では、ADFデータ視覚化コンポーネントのareaGraph、barGraph、horizontalBarGraph、bubbleGraph、comboGraph、funnelGraph、lineGraph、paretoGraph、pieGraph、radarGraph、scatterGraph、sparkChartおよびstockGraphを使用して、データをグラフに表示する方法について説明します。アプリケーションでFusionテクノロジ・スタックを使用する場合、データ・コントロールを使用してグラフを作成できます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたグラフの作成に関する項を参照してください。
この章では、次の項目について説明します。
グラフ・コンポーネントには、面グラフ、棒グラフ、バブル・グラフ、組合せグラフ、ファンネル・グラフ、折れ線グラフ、パレート・グラフ、円グラフ、レーダー・グラフ、散布図、スパークチャート、株価チャートなど、50種類以上のグラフを作成する機能が用意されています。このコンポーネントでは、複数軸の複数データ・ポイントを様々な方法で評価できます。たとえば、一群のグラフにより、あるグループからの結果と他のグループからの結果の比較が容易になります。
グラフには、データの系列およびグループが表示されます。系列とグループは、データのグリッドの行と列にたとえることができます。通常、グリッドの行はグラフの系列として表示され、グリッドの列はグラフのグループとして表示されます。
大半のグラフでは、系列は同じ色のマーカーのセットとして表示されます。通常、グラフの凡例に、各系列の識別子と対応する色が表示されます。たとえば、棒グラフで黄色の棒が靴の売上げを示し、緑色の棒がブーツの売上げを示す、などです。
グループの表示は、グラフ・タイプによって異なります。たとえば、集合棒グラフでは、各まとまりがグループです。積上げ棒グラフでは、各積層がグループです。複数円グラフでは、各円がグループです。グループは年などの期間を表す場合もあります。グループが地域などの地理上の場所を表す場合もあります。
グラフ・タイプのデータ要件に応じて、1つのグループに複数のデータ値が必要な場合があります。たとえば、散布図では、データ・マーカーごとに2つの値が必要です。1つ目の値はX軸上のマーカーの位置を決め、2つ目の値はY軸上のマーカーの位置を決めます。
グラフのエンド・ユーザー機能および構成可能なプレゼンテーション機能には、豊富なオプションが揃っています。
オプションのグラフ・タイトル、サブタイトル、脚注、凡例および軸タイトルの各コンポーネントは、配置や外観をカスタマイズできます。すべてのグラフに存在する描画エリアは、外観をカスタマイズできます。図22-1に、棒グラフ用のこれらグラフ・コンポーネントのデフォルト表示を示します。
グラフは、400 X 300ピクセルのデフォルト・サイズで表示されます。グラフのサイズをカスタマイズしたり、様々なブラウザ・ウィンドウ・サイズに領域がぴったり合うように、動的サイズ変更を指定したりできます。水平または垂直に制限された領域(Webページのサイドバーなど)にグラフが表示される場合、グラフは機能は揃っているものの、簡易表示で表示されます。
グラフでは、HTML5、FlashおよびPNGなどのイメージ形式がサポートされています。デフォルトでは、グラフはFlashで表示されますが、デフォルトのイメージ形式を変更できます。アプリケーションでFlashを無効にしたり、クライアント・プラットフォームで動作をカスタマイズすることもできます。
バブル・グラフのバブルや散布図の形状など、グラフではデータ・マーカーの選択を有効にできます。選択の有効化は、コンテキスト・メニューに必要です。
グラフでは、次の3タイプのいずれかのファセットを使用する右クリック・コンテキスト・メニューがサポートされます。
コンポーネント内の選択不可能な領域(描画エリアなど)で表示されるコンテキスト・メニュー
選択可能要素(散布図のマーカーなど)で表示されるコンテキスト・メニュー
複数選択可能要素で表示されるコンテキスト・メニュー
図22-2に、散布図で選択されたマーカーに表示されるコンテキスト・メニューを示します。
グラフは、データ参照面または参照線がグラフの系列または軸に関連付けられるように構成できます。これとは別に、エラーや警告など、個別の記号で強調表示する必要のある追加のデータ・ポイントを定義するように、グラフを構成することができます。図22-3に、グラフのアラート範囲内の棒ごとに警告アラート・アイコンの付いた棒グラフを示します。図には、参照面を変更するためにグラフと関連付けることのできるADF入力範囲スライダも示しています。
グラフは、グラフ・データ内で表示される1つ以上の系列を非表示にしたり、表示したりするように構成できます。これは、特に複数の系列が表示されている場合、比較や分析のために役立ちます。図22-4に、折れ線グラフでの非表示および表示を示します。非表示系列のデフォルトのアイコンは、空のボックスです。
データバインドされたグラフ内の系列およびグループは、データの集計合計とディテール・ビュー間でドリルアップおよびドリルダウンができるように構成できます。図22-5に、全車の合計販売台数と、メルセデス・ベンツの4タイプのロンドンおよびパリにおける販売台数のディテール・ビューを示します。ドリル・ビューには、アクティブなドリル・アイコンが表示されています。
グラフ・コンポーネントは、情報を提供したり、エンド・ユーザーからの入力を要求したりするポップアップのダイアログ、ウィンドウおよびメニューが表示されるように構成できます。図22-7に、グラフ内でゲージ・コンポーネントを表示するポップアップを示します。
時間軸のあるグラフは、グラフ上のデータ表示のために時間範囲を設定するように構成できます。図22-8に、グラフ内にマスター/ディテール・データを表示するためにユーザーが有効にした時間セレクタを示します。
グラフ用のHTML5、FlashおよびPNGイメージ形式では、双方向ロケールがサポートされます。図22-9に、複数の円グラフ内の双方向サポートを示します。
グラフは、次のドラッグ・アンド・ドロップ操作をサポートするように構成できます。
グラフ間のドラッグ・アンド・ドロップ
グラフから別のADFコンポーネントへのドラッグ・アンド・ドロップ
グラフの描画エリア内での散布/バブル・マーカーのドラッグ
別のコンポーネントへの散布/バブル・マーカーのドラッグ
複数のマーカーのドラッグ・アンド・ドロップ
スクリーン・リーダーでWebページを読む視覚障害のユーザーをサポートするために、そのアプリケーションに対してスクリーン・リーダーが有効であるとき、グラフは自動的にピボット・テーブルに置き換えられます。スクリーン・リーダーでは、グラフ内よりピボット・テーブル内の方がデータのナビゲートや読上げが容易になります。スクリーン・リーダー・モードの有効化の詳細は、30.2項「ADF Facesでのアクセシビリティ・サポートの構成」を参照してください。ADFピボット・テーブルの詳細は、24.1項「ピボット・テーブル・コンポーネントについて」を参照してください。
グラフ・コンポーネントには、データを表示するために使用できる13タイプのグラフがあり、合計50種を超えるグラフに1つ以上のバリエーションがあります。JDeveloperには、グラフの作成中に視覚的に支援するために、使用可能なグラフのカテゴリ、タイプおよび説明を表示するコンポーネント・ギャラリが用意されています。図22-10に、棒グラフのコンポーネント・ギャラリを示します。
グラフには次のタイプがあります。
面: データを塗りつぶされた面として表します。面グラフを使用して、過去12か月の売上げなど、ある期間の傾向を示します。面グラフでは、1つの軸上に最低2グループのデータが必要です。軸には、月などの時間の経過を表すラベルが付けられることがよくあります。
面グラフでは、次の種類のデータ値を表します。
絶対: 各面マーカーは、一連の(2つ以上の)データ値を結びます。この種のグラフのバリエーションとして、単一Yの絶対面グラフと分割二重Yの絶対面グラフがあります。
分割二重Yグラフでは、描画エリアが2つのセクションに分割され、異なるY軸に割り当てられたデータ・セットは異なる描画エリアに表示されます。
積上げ: 面マーカーが積み上げられます。各データ・セットの値は前のセットの値に加算されます。積層のサイズが累積合計を表します。この種のグラフのバリエーションとして、単一Y軸の積上げ面グラフと分割二重Y軸の積上げ面グラフがあります。
パーセンテージ:面マーカーは、すべてのデータ・セットの累積合計に対する割合を表します。
図22-11に、デフォルトのグラフが選択されてコンポーネント・ギャラリに表示されている面グラフ・タイプのバリエーションを示します。
図22-12に、面グラフの例を示します。
棒: データを一連の縦棒で表します。棒グラフを使用してある期間の傾向の確認や、複数の地域での異なる製品区分の売上げなど、同一時点での項目の比較を行います。
棒グラフでは、次の種類のデータ値を表します。
集合: 棒の各まとまりが1グループのデータを表します。たとえば、データが従業員で分類されている場合、特定の従業員の給与の棒と歩合の棒が1つのまとまりとなります。この種のグラフのバリエーションとして、集合縦棒グラフと集合横棒グラフがあります。集合棒グラフのすべてのバリエーションは、単一Yグラフ、二重Yグラフおよび分割二重Yグラフにできます。
積上げ: 各データ・セットの棒が前のデータ・セットに追加されます。積層のサイズがデータの累積合計を表します。この種のグラフのバリエーションとして、積上げ縦棒グラフと積上げ横棒グラフがあります。積上げ棒グラフのすべてのバリエーションは、単一Yグラフ、二重Yグラフおよび分割二重Yグラフにできます。
パーセンテージ: 棒が積み上げられ、すべてのデータ・セットの累積合計に対する特定のデータ・セットの割合が表されます。パーセンテージ棒グラフは、単一Yグラフにのみできます。
図22-13に、デフォルトのグラフが選択されてコンポーネント・ギャラリに表示されている棒グラフ・タイプのバリエーションを示します。
図22-14に、棒グラフの例を示します。
横棒: Y軸に沿って棒を横向きに表示します。横棒グラフを使用して向きを持たせて傾向を表示したり、値を比較します。
図22-15に、デフォルトのグラフが選択されてコンポーネント・ギャラリに表示されている横棒グラフ・タイプのバリエーションを示します。
図22-16に、横棒グラフの例を示します。
バブル: 円形のデータ・マーカー(バブル)の位置とサイズでデータを表します。(データ項目が多数で全体の関係を表示する場合は特に)バブル・グラフを使用して3種類の値の相関関係を示します。たとえば、バブル・グラフを使用して、従業員の給与(X軸)、経験年数(Y軸)と生産性(バブルのサイズ)をプロットします。このようなグラフでは、生産性を給与および経験と比較して調べることができます。
図22-17に、デフォルトのグラフが選択されてコンポーネント・ギャラリに表示されているバブル・グラフ・タイプのバリエーションを示します。
図22-18に、バブル・グラフの例を示します。
組合せ: 異なるタイプのデータ・マーカー(棒、線または面)を使用して、異なる種類のデータ・アイテムを表示するグラフ。組合せグラフを使用して、棒と線、棒と面、線と面あるいは3つすべての組合せを比較します。
図22-19に、デフォルトのグラフが選択されてコンポーネント・ギャラリに表示されている組合せグラフ・タイプのバリエーションを示します。
図22-20に、組合せグラフの例を示します。
ファンネル: プロセスの段階に関連するデータを視覚的に表します。ステップは、横向きの円錐形のセクションに対する縦向きのスライスとして表されます。特定のステップ(スライス)の実際の値がそのスライスの割当てに近づいた分、スライスが塗りつぶされます。通常、ファンネル・グラフには、時間などのステージ値に対する実績値と目標値が必要です。たとえば、ファンネル・グラフを使用して、ファンネルの異なるセクションが販売周期の異なる段階を表すプロセスを表示します。ファンネル・グラフのバリエーションはありません。
図22-21に、ファンネル・グラフの例を示します。
折れ線: データを線、一連のデータ・ポイントまたは線で結ばれたデータ・ポイントとして表します。折れ線グラフには、グループ内のメンバーごとに最低2つのポイントを表すデータが必要です。たとえば、月ごとの折れ線グラフには最低2か月必要です。通常、特定の色の線は、アメリカ、ヨーロッパ、アジアなどのデータの各グループに関連付けられています。折れ線グラフを使用して、同一期間の項目を比較します。
折れ線グラフでは、次の種類のデータ値を表します。
絶対: 各線セグメントは2つのデータ・ポイントを結びます。この種のグラフでは、軸を単一Y、二重Yおよび分割二重Yにできます。
積上げ: 各データ・セットの線が前のデータ・セットに追加されます。積層のサイズがデータの累積合計を表します。この種のグラフでは、軸を単一Y、二重Yおよび分割二重Yにできます。
パーセンテージ: 線が積み上げられ、各線がすべてのデータ・セットの累積合計に対する特定のデータ・セットの割合を表します。パーセンテージ折れ線グラフは、単一Y軸グラフにのみできます。
図22-22に、デフォルトのグラフが選択されてコンポーネント・ギャラリに表示されている折れ線グラフ・タイプのバリエーションを示します。
図22-23に、折れ線グラフの例を示します。
パレート: 棒と棒の累積割合を示すパーセンテージ線でデータを表します。各棒は、交通事故の原因など、異なる不具合の原因を表します。棒は、発生件数の多いものから少ないものの順に並べられます。パレート・グラフは常に二重Yグラフで、1つ目のY軸は棒が表す値に対応し、2つ目のY軸は0%から100%を表し、累積割合の値に対応します。パレート・グラフを使用して、不具合の原因を特定し、比較します。パレート・グラフにはバリエーションはありません。
図22-24に、パレート・グラフの例を示します。
円/ドーナツ: 1つのグループのデータが円のセクションとして表され、円が切り分けられたパイのように見えます。円グラフを使用して、各製品ラインからの収益など、全体に対する各部分の関係を表します。円グラフは、円またはドーナツ型(各円の中心が穴となり、その中に円の合計値が表示される)として表示できます。
図22-25に、デフォルトのグラフが選択されてコンポーネント・ギャラリに表示されている円グラフ・タイプのバリエーションを示します。
図22-26に、円グラフの例を示します。
レーダー: 円形の折れ線グラフとして表されるグラフ。過去3年間の月ごとの売上げなどの周期的に起こるパターンを表す場合に、レーダー・グラフを使用します。レーダー・グラフにはバリエーションはありません。
図22-27に、レーダー・グラフの例を示します。
散布/極: データをデータ・マーカーの位置で表します。散布図を使用して、上位製品の売上げとコストなど、異なる2種類のデータの相関関係を表します。多数の項目の全体的な関係を表す場合は特に散布図を使用します。散布図では、極グラフとして方向性を持ってデータを表示できます。
図22-28に、デフォルトのグラフが選択されてコンポーネント・ギャラリに表示されている散布図タイプのバリエーションを示します。
図22-29に、散布図の例を示します。
スパークチャート: 傾向や変化を1つのデータ値で表す簡単な縮小グラフで、通常、表の列内や関連テキストの行中に表示されます。スパークチャートには、基本的な条件付きフォーマットがあります。スパークチャートにはラベルがないため、表の隣接する列や周囲のテキストにより、スパークチャートのコンテンツのコンテキストが示されます。
図22-30に、デフォルトのグラフが選択されてコンポーネント・ギャラリに表示されているスパークチャート・グラフ・タイプのバリエーションを示します。
図22-31に、スパークチャートの例を示します。
株価: データを株式の高値、低値および終値として示します。各株価マーカーは、選択された株価チャートの種類に応じて2から4個(オプションの出来高マーカー以外)の異なる値を表します。株式グラフでは、株価を表示し、必要に応じてグラフに1つ以上の株式の取引出来高も表示できます。株価またはローソク足株価チャートが出来高を含む場合、出来高はグラフの下部に棒で表示されます。
ローソク足株価チャートは株価を表し、オプションで1つの株の出来高を表示します。ローソク足株価チャートが出来高を含む場合、出来高はグラフの下部に棒で表示されます。
ローソク足株価チャートでは、始値と終値のうち低い方の値がローソクの下端で示されます。高い方の値がローソクの上端で示されます。終値が始値より高い場合、ローソクは緑色です。始値が終値より高い場合、ローソクは赤色です。
図22-32に、デフォルトのグラフが選択されてコンポーネント・ギャラリに表示されている株価チャート・タイプのバリエーションを示します。
図22-33に、ローソク足株価チャートの例を示します。
グラフ・コンポーネントを実装する前に、その他のADF Faces機能を理解しておくと役に立ちます。また、いったんグラフ・コンポーネントをページ追加すると、検証やアクセシビリティなどの機能を追加する必要があることに気付く場合があります。グラフ・コンポーネントで使用できるその他の機能へのリンクは、次のとおりです。
部分ページ・レンダリング: 他のコンポーネントで実行されたアクションに基づく新しいデータをページ上に表示するために、グラフをリフレッシュできます。詳細は、第8章「部分ページ・コンテンツの再レンダリング」を参照してください。
パーソナライズ: 有効な場合、ユーザーは実行時にグラフの表示方法を変更できますが、アプリケーションがユーザーのカスタマイズを許可するように構成されていないかぎり、ユーザーがページを終了するとそれらの値は保持されません。詳細は、第32章「JSFページでのユーザー・カスタマイズの許可」を参照してください。
アクセシビリティ: グラフ・コンポーネントをアクセス可能にできます。詳細は、第30章「アクセス可能なADF Facesページの開発」を参照してください。
自動データ・バインディング: アプリケーションでFusionテクノロジ・スタックが使用されている場合、ADFビジネス・コンポーネントの構成に基づいて、自動的にバインドされたグラフを作成できます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたグラフの作成に関する項を参照してください。
|
注意: 最終的にページのUIコンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールを使用します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のプレースホルダ・データ・コントロールを使用したページの設計に関する項を参照してください。 |
さらに、データ視覚化コンポーネントでは、データの配信方法、自動部分ページ・レンダリング(PPR)、そしてデータの表示および編集方法など、同じ機能の大部分が共有されています。詳細は、21.2項「データ視覚化コンポーネントの共通機能」を参照してください。
グラフのデータ要件はグラフ・タイプによって異なります。データ要件は次のいずれかです。
幾何学的:一部のグラフ・タイプでは、データの表示に特定の数のデータ・ポイントが必要です。たとえば、線には最低2つの点が必要なため、折れ線グラフには最低2グループのデータが必要です。
複雑:一部のグラフ・タイプでは、マーカー(グラフで実際にデータを表すコンポーネント)ごとに複数のデータ・ポイントが必要です。たとえば、散布図では、X軸とY軸に沿ってマーカーを置けるよう、グループごとに2つの値が必要です。各グループに必要なデータ・ポイントがグラフに使用したデータにない場合、グラフ・コンポーネントでは可能な範囲でグラフを表示します。
論理的:一部のグラフ・タイプでは特定の種類のデータを受容しません。次に例を示します。
負のデータ:円グラフまたはパーセンテージ棒グラフ、折れ線グラフ、面グラフには負のデータを渡すことはできません。パーセンテージ・グラフでは負のデータに対するマーカーは表示されません。
nullまたはゼロのデータ:nullデータに対するマーカーは生成されないため、nullデータのマーカーは表示されません。また、グラフがゼロ・データを受け取り、軸線がゼロにある場合、マーカーは見えません。ただし、軸線がゼロ以外にある場合、ゼロ・マーカーは見えます。
不十分なデータ・セット(系列): 二重Yグラフでは、Y軸ごとにデータ・セットが必要です。通常、セットごとに異なる情報を表します。たとえば、Y1軸は特定の国および期間の売上げを表し、Y2軸はすべての国の売上げ合計を表します。Y軸データを1セットのみ渡した場合、グラフは2つの異なるY軸にデータを表示できません。データは1つのY軸に表示されます。
類似するグラフは、類似するデータ要件を共有します。たとえば、面グラフというカテゴリでは、次のようにグラフをグループ分けできます。
絶対面グラフ。
積上げ面グラフ。
パーセンテージ面グラフ。
各グラフ・タイプの特定のデータ要件は、次のように定義されています。
面グラフ:
面グラフには最低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系列のデータ値が必要です。
フローティング棒スパークチャートには、データ値の系列がフローティング・オフセットに1つ、棒の値のために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つの株のみの値を表示できます。このため、これらのグラフには凡例は表示されず、グラフのタイトルに系列のラベル(株式名)を示します。
多くのグラフ・タイプとグラフ・コンポーネントの高い柔軟性のために、グラフには多数のDVTタグがあります。接頭辞dvt:は、各グラフ・タグ名の先頭に付いて、そのタグがADFデータ視覚化ツール(DVT)のタグ・ライブラリに属することを示します。次のリストに、グラフ・コンポーネントに関連するタグのグループを示します。
グラフ・コンポーネント・タグ: 13個のグラフ・コンポーネント・タグは、よく使用されるグラフ・タイプを作成する簡便な方法です。それらは、コンポーネント・ギャラリにグラフのカテゴリとして、1つ以上のタイプ・バリエーションとともに表示されます。
表22-1では、グラフ・コンポーネント・タグと、そのグラフ・コンポーネントのsubType属性で指定されているバリエーションについて説明しています。
表22-1 グラフ・コンポーネントのタグおよびサブ・タイプ
| グラフ・タグ | 説明 | サブ・タイプ |
|---|---|---|
|
|
データを塗りつぶされた面として表します。 |
AREA_VERT_ABSAREA_VERT_ABS_SPLIT2YAREA_VERT_PERCENTAREA_VERT_STACKAREA_VERT_STACK_SPLIT2Y |
|
|
データを一連の縦棒で表します。 |
BAR_VERT_CLUSTBAR_VERT_CLUST_SPLIT2YBAR_VERT_CLUST2YBAR_VERT_FLOAT_STACKBAR_VERT_PERCENTBAR_VERT_STACKBAR_VERT_STACK_SPLIT2YBAR_VERT_STACK2Y |
|
|
円形のデータ・マーカー(バブル)の位置とサイズでデータを表します。 |
BUBBLEBUBBLE_2Y |
|
|
異なるタイプのデータ・マーカー(棒、線または面)を使用して、異なる種類のデータ・アイテムを表示します。 |
COMBINATION_VERT_ABSCOMBINATION_VERT_ABS_2Y |
|
|
プロセスの段階に関連するデータを視覚的に表します。ステップは、横向きの円錐形のセクションに対する縦向きのスライスとして表されます。 |
FUNNEL |
|
|
データをY軸に沿った横向きの棒として表示します。 |
BAR_HORIZ_CLUSTBAR_HORIZ_CLUST_SPLIT2YBAR_HORIZ_CLUST2YBAR_HORIZ_PERCENTBAR_HORIZ_STACKBAR_HORIZ_STACK_SPLIT2YBAR_HORIZ_STACK2Y |
|
|
データを線、一連のデータ・ポイントまたは線で結ばれたデータ・ポイントとして表します。 |
LINE_VERT_ABSLINE_VERT_ABS_2YLINE_VERT_ABS_SPLIT2YLINE_VERT_PERCENTLINE_VERT_STACKLINE_VERT_STACK_SPLIT2YLINE_VERT_STACK2Y |
|
|
棒と棒の累積割合を示すパーセンテージ線でデータを表します。 |
PARETO |
|
|
1つのグループのデータが円のセクションとして表され、円が切り分けられたパイのように見えます。円グラフは、円またはドーナツ型(各円の中心が穴となり、その中に円の合計値が表示される)として表示できます。 |
PIEPIE_BARPIE_MULTIRINGRING_BARRING_MULTI |
|
|
円形の折れ線グラフとして表されます。 |
|
|
|
データをデータ・マーカーの位置で表します。散布図では、極グラフとして方向性を持ってデータを表示できます。 |
SCATTERSCATTER_2YPOLAR |
|
|
傾向や変化を1つのデータ値で表す簡単な縮小グラフで、通常、表の列内や関連テキストの行中に表示されます。 |
areabarfloatingBarline |
|
|
株価を表示し、必要に応じてグラフに1つ以上の株式の取引出来高も表示できます。株価またはローソク足株価チャートが出来高を含む場合、出来高はグラフの下部に棒で表示されます。 |
STOCK_CANDLESTOCK_CANDLE_VOLUMESTOCK_HILO_CLOSESTOCK_HILO_CLOSE_VOLUMESTOCK_OHLC_CANDLESTOCK_OHLC_CANDLE_VOLUMESTOCK_OPEN_HILO_CLOSESTOCK_VOLUME |
一般的なグラフの子タグ: これらのタグは、様々なカスタマイズ・オプションを提供するために、大部分のグラフ・コンポーネント・タグでサポートされます。
表22-2は、これらのタグのリストと説明です。
表22-2 一般的なグラフの子タグ
| 子タグ | 説明 |
|---|---|
animationOnDisplayanimationOnDataChange |
グラフのアニメーション効果の構成。 |
backgroundgraphFontgraphFootnotegraphPlotAreagraphSubTitlegraphTitle |
タイトルを含むグラフ要素の外観のカスタマイズ。 |
attributeFormat |
順序軸およびマーカー・ツールチップでカテゴリの属性をフォーマット。 |
legendArealegendTextlegendTitle |
グラフの凡例のカスタマイズ。 |
markerTextx1Formaty1Formaty2FormatzFormat |
各軸関連のマーカーのカスタマイズ。 |
o1Axiso1MajorTicko1TickLabelo1Title |
棒、面、組合せ、折れ線、レーダーおよび株価チャートとともに使用する順序軸(カテゴリ軸)をグループ・ラベルでカスタマイズ。 |
x1Axisx1MajorTickx1TickLabelx1MinorTickx1Title |
散布図およびバブル・グラフとともに使用するX軸を数値ラベルでカスタマイズ。 |
y1Axisy1MajorTicky1TickLabely1MinorTicky1Title |
Y1軸のカスタマイズ。 |
子セット・タグ:これらのタグは、無数の関連するタグのセットをラップします。
表22-3は、これらのタグのリストと説明です。
表22-3 グラフの子セット・タグ
| 子セット・タグ | 説明 |
|---|---|
alertSet |
エラーや警告など、個別の記号で強調表示する必要のある追加データ・ポイントを定義する |
annotationSet |
グラフ上に注釈を定義する |
referenceObjectSet |
グラフに対する参照線または参照領域を定義する |
seriesSet |
グラフ上のデータ・マーカーまたは系列のセットを定義する |
shapeAttributesSet |
グラフのサブコンポーネントに相互作用プロパティを指定する |
いずれの場合にも、設計中にまずラッパー・タグを作成し、その後にセット内の各アイテムの関連タグを作成する必要があります。例22-1に、面グラフの2つのアラート・ポイントを定義するアラート・タグのセットを作成する場合のタグのシーケンスを示します。
例22-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>
グラフ固有の子タグ: これらのタグは、特定のグラフ・タイプまたはグラフの特定部分に使用します。
表22-4は、これらのタグのリストと説明です。
表22-4 グラフ固有の子タグ
| 子タグ | 説明 |
|---|---|
specialEffectsgradientStopStyle |
|
sliceLabelx1TickLabely2TickLabely1TickLabelx1Formaty1Formaty2FormatzFormatstockVolumeFormat |
グラフの数値データの値の書式設定。 |
timeAxisDateFormattimeSelector |
面、棒、組合せ、折れ線および積上げ棒グラフの時間軸のカスタマイズ。 |
timeSelector |
マスター/ディテール・グラフの時間軸上の範囲の選択。 |
paretoLineparetoMarker |
パレート・グラフのカスタマイズ。 |
graphPieFrameslicesliceLabel |
円グラフのカスタマイズ。 |
sparkItem |
スパークチャートのカスタマイズ。 |
stockMarkerstockVolumeformatvolumeMarker |
株価チャートのカスタマイズ。 |
グラフ・タグ: 使用可能ですが、好ましい方法ではなく、dvt:graphタグを使用すれば、サポートされているどのグラフ・タイプのグラフのインスタンスでも作成できます。特定のグラフ・タイプにのみ有効なグラフ属性と子タグも一部ありますが、グラフ・タグには、グラフ属性の包括的なセットがあり、すべてのグラフの子タグの使用がサポートされます。このため、dvt:graphタグには、グラフ・タイプの選択、グラフのカスタマイズや、あるグラフ・タイプから別のタイプへの変更に対する十分な柔軟性があります。
|
注意: JDeveloperでは、コンポーネント・パレットからの宣言的挿入に |
すべてのタグとその属性の詳細、および有効な値のリストは、DVTタグのドキュメントを参照してください。JDeveloperで特定のグラフ・タグのこのドキュメントにアクセスするには、構造ウィンドウでタグを選択し、[F1]キーを押すか、「ヘルプ」をクリックします。
簡単なUI優先開発を使用してページを設計しているときには、コンポーネント・パレットを使用してグラフをJSFページに追加します。ページにグラフ・コンポーネントをドラッグ・アンド・ドロップすると、コンポーネント・ギャラリに使用可能なグラフ・タイプのカテゴリが説明とともに表示され、グラフの作成時に視覚的に支援します。グラフのタイトルおよび凡例のクイックスタート・レイアウトも指定できます。図22-34に、デフォルトの縦の集合棒グラフ・タイプが選択された棒グラフのコンポーネント・ギャラリを示します。
ダイアログが完了して、ページにグラフが追加されると、プロパティ・インスペクタを使用して、データ値を指定し、グラフに追加の表示属性を構成できます。
プロパティ・インスペクタで、各属性フィールドのドロップダウン・メニューを使用して、プロパティの説明、およびEL式ビルダーまたはその他の専用ダイアログの表示などのオプションを表示できます。図22-35に、棒グラフ・コンポーネントのsubType属性のドロップダウン・メニューを示します。
|
注意: アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用してグラフを作成でき、バインドが自動的に行われます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「データバインドされたグラフの作成」を参照してください。 |
始める前に:
グラフの属性やゲージ・グラフのタグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、22.2.2項「グラフの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、22.1.3項「グラフ・コンポーネントの追加機能」を参照してください。
ページにグラフを追加する手順:
コンポーネント・パレットで、「ADFデータ視覚化」ページの「グラフ」パネルから希望するタイプのグラフをページにドラッグ・アンド・ドロップし、コンポーネント・ギャラリに「グラフの作成」ダイアログを開きます。
ダイアログを使用してグラフ・タイプと、グラフ・タイトル、凡例およびラベルの表示用クイック・スタート・レイアウトを選択します。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
プロパティ・インスペクタで、グラフの属性を表示します。ヘルプ・ボタンを使用して、グラフ・タイプ・コンポーネントの完全なタグ・ドキュメントを表示します。
「共通」セクションを開きます。このセクションを使用して、次の属性を設定します。
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オブジェクトとして指定します。詳細は、22.2.5項「表形式のデータを使用したグラフの作成方法」を参照してください。
「外観」セクションを開きます。次のフィールドの値を設定して、表示属性を指定します。
ShortDesc: グラフの目的およびスクリーン・リーダーで使用するための構造の説明を入力します。
EmptyText: グラフにデータがない場合に表示するエラー・テキストを指定します。
デフォルトでは、グラフはFlashのイメージ形式で表示されます。デフォルトのイメージ形式を変更したり、Flashコンテンツに使用を制限する場合、22.2.6項「グラフのイメージ形式について」を参照してください。
コンポーネント・ギャラリを使用してグラフ・コンポーネントをJSFページに挿入すると、グラフのカスタマイズをサポートする子タグのセットが自動的に挿入されます。例22-2に、図22-34のコンポーネント・ギャラリでクイック・スタート・レイアウトを選択した棒グラフ用にJSFページに挿入されたコードを示します。
例22-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>
ページにグラフ・コンポーネントを挿入した後、ビジュアル・エディタの専用コンテキスト・メニューやプロパティ・インスペクタのボタンが使用可能になり、グラフ機能のカスタマイズをサポートします。詳細は、22.2.7項「ビジュアル・エディタおよびプロパティ・インスペクタでのグラフの編集」を参照してください。
グラフ・コンポーネントにデータのグリッドが使用される場合、グラフが作成されます。グラフ・コンポーネントのtabularData属性には、グリッドの作成やデータの移入にグラフで使用する値のリストを指定できます。表形式のデータを使用してグラフを作成するには、グラフのマネージドBeanのメソッドにデータを格納し、グラフ・コンポーネントのtabularData属性を使用してデータを参照する必要があります。
たとえば、図22-36の表には、2006、2007および2008の3つの列と、ShoesおよびBootsの2つの行があります。このデータから、3年間のブーツと靴の年間売上げを比較するグラフが生成されます。
マネージドBeanでは、表形式のデータを含むリストは、グラフに渡すデータ値ごとに3メンバーのObject配列で構成されます。各配列のメンバーは次のように編成される必要があります。
1つ目のメンバー(索引0)は、データ値のグリッドの列ラベルです。これは通常Stringです。グラフに時間軸がある場合は、JavaのDate型で指定する必要があります。列ラベルは、通常、グラフのグループを識別します。
2つ目のメンバー(索引1)は、データ値のグリッドの行ラベルです。これは通常Stringです。行ラベルはグラフで系列ラベルとして、通常、凡例に表示されます。
3つ目のメンバー(索引2)はデータ値で、通常Doubleです。
例22-3に、3年間の靴とブーツの年間売上げを比較するグラフに必要なデータのリストを作成するコードを示します。
例22-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, 122000, 175000},
{90000, 110000, 150000}
};
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;
}
始める前に:
グラフの属性やグラフの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、22.2.2項「グラフの構成」を参照してください。
すでに表形式データのリストを作成するマネージドBeanが存在している必要があります。ない場合は、3.6項「マネージドBeanの作成と使用」の指示に従ってください。
ページにすでにグラフが存在している必要があります。ない場合は、この章の指示に従ってグラフを作成します。詳細は、22.2.3項「ページへのグラフの追加方法」を参照してください。
マネージドBeanからのデータを使用するグラフを作成する手順:
構造ウィンドウで「dvt:graph」コンポーネントを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「データ」セクションを開きます。
「TabularData」属性のドロップダウン・メニューから、「式ビルダー」を選択します。
「式ビルダー」ダイアログで検索ボックスを使用してグラフのマネージドBeanを検索します。
マネージドBeanのノードを展開し、表形式データのリストを含むメソッドを選択します。
「OK」をクリックします。
式が作成されます。
たとえば、sampleGraphというマネージドBeanとgetTabularDataというメソッドの場合、式ビルダーによりグラフのtabularData属性の値として、コード#(sampleGraph.tabularData)が生成されます。
グラフでは、HTML5、FlashおよびPNGなどのイメージ形式がサポートされています。使用されるイメージ形式は、アプリケーションの設定およびクライアント環境によって異なります。デフォルトでは、グラフはFlashで表示されますが、次のパラメータを設定して、特定のイメージ形式を使用するようにアプリケーションを構成できます。
oracle.adf.view.rich.dvt.DEFAULT_IMAGE_FORMAT
HTML5のイメージ形式を使用するには、このパラメータをweb.xmlファイルに追加し、これをHTML5に設定します。詳細は、A.2.3.26項「グラフとゲージのイメージ形式」を参照してください。
flash-player-usage
adf-config.xmlでflash-player-usageコンテキスト・パラメータを設定すれば、アプリケーション全体にわたってFlashコンテンツの使用を無効にできます。詳細は、A.4.3項「コンポーネント出力形式としてのFlashの構成」を参照してください。
指定したイメージ形式がクライアントで使用できない場合、アプリケーションでは使用可能な形式がデフォルトになります。たとえば、クライアントがHTML5をサポートしていない場合、アプリケーションでは次が使用されます。
Flash(Flash Playerが使用可能な場合)。
Portable Network Graphics (PNG)出力形式。PNG出力形式は、グラフの印刷時にも使用されます。静的レンダリングは、PNG出力形式使用時には完全にサポートされますが、次のような一部のインタラクティブ機能は使用できません。
アニメーション
コンテキスト・メニュー
ドラッグ・アンド・ドロップ・ジェスチャ
円グラフのスライスのインタラクティブ動作
参照オブジェクトのホバー動作
ポップアップのサポート
選択項目
系列のロールオーバー動作
ビジュアル・エディタおよびプロパティ・インスペクタでグラフ・コンポーネントを編集する場合、専用コンテキスト・メニューやボタンが利用でき、グラフ機能のカスタマイズをサポートします。タイトル、凡例エリア、描画エリア、背景、軸ラベルおよびグラフ系列(棒など)の表示といったグラフの子コンポーネントを選択すると、編集を選択できるコンテキスト・メニューが表示されます。図22-37に、ビジュアル・エディタに表示された横棒グラフを示します。
ビジュアル・エディタ内のポップアップでは、カスタマイズするグラフ機能の選択を確認します。たとえば、図22-38では、折れ線グラフの描画エリアに表示されたポップアップを示しています。
ビジュアル・エディタでグラフ機能を選択すると、専用の編集コンテキスト・メニューが使用できるようになります。図22-39に示す折れ線グラフの描画エリアのコンテキスト・メニューからは、横のグリッド・マークのデフォルト表示の削除など、様々なオプションを選択できます。コンテキスト・メニューやプロパティ・インスペクタのボタンを使用すると、描画エリアの特殊塗りつぶし効果を構成することもできます。グラフ・タグの選択は、ビジュアル・エディタ、構造ウィンドウ、プロパティ・インスペクタおよびソース・エディタで同期化されます。
折れ線グラフの構成の詳細は、22.5.3項「グラフでの折れ線の外観の変更」を参照してください。特殊塗りつぶし効果の詳細は、22.4.3項「グラフでのグラデーション特殊効果の使用」を参照してください。
サイズ変更、背景および描画エリアの外観、タイトル、軸、ラベル、凡例およびツールチップなどのグラフの表示要素は構成できます。
グラフの幅と高さはカスタマイズでき、コンテナのサイズ変更に基づいて動的にサイズ変更することができます。グラフで使用されるスタイルシートを制御することもできます。グラフのこれらの2つの側面は、ともにグラフのinlineStyle属性を使用するという点で関連性があります。
dvt:<type>Graphタグの属性の値を指定すると、グラフの初期サイズを指定できます。グラフの動的サイズ変更を指定しない場合、初期サイズが、グラフの唯一の表示サイズです。
グラフが初めて表示される際のサイズを指定する手順:
構造ウィンドウでグラフのノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタの「スタイル」属性カテゴリで、グラフ・タグのInlineStyle属性に値を入力します。次に例を示します。
inlineStyle="width:200px;height:200px"
JSFページでコンテナのサイズが変更されたときにグラフがサイズ変更されるようにするには、dvt:<type>Graphタグの2つの属性のそれぞれに値を入力する必要があります。この機能用に指定する値は、サイズの異なるブラウザ・ウィンドウの領域を使用するグラフ・コンポーネントの作成にも有用です。
グラフの動的サイズ変更を有効にする手順:
構造ウィンドウでグラフのノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタの「動作」属性カテゴリで、DynamicResize属性に「DYNAMIC_SIZE」を選択します。
プロパティ・インスペクタの「スタイル」属性カテゴリで、InlineStyle属性の幅と高さの両方に、ピクセルの定数または相対的割合を入力します。
たとえば、コンテナと同じ幅で200ピクセルの高さのグラフを作成するには、inlineStyle属性に"width:100%;height:200px;"と設定します。
dvt:<type>Graphタグに使用できる標準スタイルを選択できます。グラフに使用するカスタム・スタイルシートを指定することもできます。
グラフに特定のスタイルシートを選択する手順:
グラフに用意されている標準スタイルシートを使用する場合は、次のようにします。
構造ウィンドウでグラフのノードを右クリックし、「プロパティに移動」を選択します。
「外観」属性ウィンドウで、style属性ドロップダウン・リストからスタイル・シートを選択します。
カスタム・スタイルシートを使用する場合は、プロパティ・インスペクタの「スタイル」属性カテゴリで次の属性を設定します。
StyleClass属性に対し、「プロパティ」メニュー選択肢から「編集」を選択し、このゲージに使用するCSSスタイル・クラスを選択します。
InlineStyle属性の幅と高さに、ピクセルの定数または相対的割合を入力します。
たとえば、コンテナと同じ幅で200ピクセルの高さのグラフを作成するには、inlineStyle属性に"width:100%;height:200px;"と設定します。
グラフでは、使用しているスタイルに基づいて、背景と描画エリアにデフォルト設定が自動的に指定されます。これらの設定は、グラフの子タグを使用してカスタマイズできます。
グラフには、タイトル、サブタイトル、脚注のオプションも指定できます。デフォルトでは、タイトルと脚注にはテキストは指定されていません。この情報を入力する際、テキストに使用するフォントとフォント特性も指定できます。
グラフの背景と描画エリアに関連する次の箇所をカスタマイズできます。
背景:グラフがプロットされる領域。
描画エリア:円グラフ以外のすべてのグラフでデータがプロットされるフレーム。描画エリアの最低2つの境界に軸が表示されます。
円フレーム:軸を使用しない円グラフがプロットされるフレーム。
グラフの背景と描画エリアをカスタマイズする手順:
グラフの背景をカスタマイズする場合は、次のようにします。
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「背景色」を選択します。
プロパティ・インスペクタを使用して、カスタマイズする属性の色をdvt:backgroundタグに入力します。
円グラフ以外のグラフの描画エリアをカスタマイズする場合は、次のようにします。
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「描画エリア」を選択します。
プロパティ・インスペクタを使用して、カスタマイズする属性の色をdvt:graphPlotAreaタグに入力します。
円グラフの描画エリアをカスタマイズする場合は、次のようにします。
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「円フレーム」を選択します。
プロパティ・インスペクタを使用して、カスタマイズする属性の色をdvt:graphPieFrameタグに入力します。
グラフのタイトル、サブタイトルおよび脚注を指定できます。これらのテキスト・エントリに、グラフの個別の子タグを使用します。これらの各子タグの属性では、テキスト・フィールドの水平方向の位置合せ、テキストの内容と、テキストをレンダリングするかどうかを定義できます。
タイトル、サブタイトルおよび脚注のタグでは、子グラフ・フォント・タグの使用がサポートされ、各テキスト・フィールドに使用するフォント特性を指定できます。
グラフのタイトルと脚注を指定する手順:
グラフのタイトルを入力する場合は、次のようにします。
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「グラフ・タイトル」を選択します。
プロパティ・インスペクタを使用してdvt:graphTitleタグの属性に値を指定します。
テキストに特定のフォント特性を指定する場合は、構造ウィンドウで「dvt:graphTitle」ノードを右クリックし、「dvt:graphTitleの中に挿入」→「フォント」を選択します。
プロパティ・インスペクタを使用してdvt:graphFontタグの属性に値を指定します。
グラフのサブタイトルを入力する場合は、次のようにします。
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「サブタイトル」を選択します。
プロパティ・インスペクタを使用してdvt:graphSubtitleタグの属性に値を指定します。
テキストに特定のフォント特性を指定する場合は、構造ウィンドウで「dvt:graphSubtitle」ノードを右クリックし、「dvt:graphSubtitleの中に挿入」→「フォント」を選択します。
プロパティ・インスペクタを使用してdvt:graphFontタグの属性に値を指定します。
グラフの脚注を入力する場合は、次のようにします。
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「脚注」と選択します。
プロパティ・インスペクタを使用してdvt:graphFootnoteタグの属性に値を指定します。
テキストに特定のフォント特性を指定する場合は、構造ウィンドウで「dvt:graphFootnote」ノードを右クリックし、「dvt:graphFootnoteの中に挿入」→「フォント」を選択します。
プロパティ・インスペクタを使用してdvt:graphFontタグの属性に値を指定します。
グラフには次の軸を使用できます。
順序軸(o1軸とも呼ばれる):グラフの順序(カテゴリ)軸は、レーティングやステージなどの順序付けされたデータを示したり、異なる都市や異なる製品などの名前のデータを示します。順序軸は、棒グラフ、折れ線グラフ、組合せグラフまたはレーダー・グラフに表示されます。順序軸が水平で時間データを含む場合は、時間軸と呼ばれます。
順序軸の例は、縦棒グラフの描画エリアの下部を横切る線です。この軸上の値は、標示されているデータの程度は示しません。そのかわり、データが属する異なるグループを示します。
X1軸:X1軸は、グラフの横軸に沿って表示される値を示します。この軸は、グループ・ラベルではなく、一定間隔の数値を持ちます。X軸とも呼ばれます。
Y1軸:Y1軸は、第1Y軸です。通常、描画エリアの左側の縦方向の値軸です。一定間隔の数値を持ちます。
Y2軸:Y2軸は、第2Y軸です。通常、描画エリアの右側の縦軸です。一定間隔の数値を持ちます。
各軸には、カスタマイズをサポートするいくつかのグラフ子タグがあります。次の項で、軸の様々なカスタマイズに使用できるオプションについて説明します。
次のグラフ子タグで、軸のタイトルと外観のカスタマイズがサポートされます。
タイトル:軸のタイトルのテキストと位置合せを指定します。dvt:o1Title、dvt:x1Title、dvt:y1Titleおよびdvt:y2Titleのタグがあります。適切なタイトル・タグを使用しないと、軸にタイトルは表示されません。
軸: 色、線幅、スケーリング、ティック・マーク間の増分、軸の可視性および特定のグラフ・タイプでのスクロールを制御します。dvt:o1Axis、dvt:x1Axis、dvt:y1Axisおよびdvt:y2Axisのタグがあります。
|
注意: 順序軸には数値は表示されないため、 |
X1軸のタイトルと外観を指定する手順:
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「X1タイトル」を選択します。
プロパティ・インスペクタで、軸のタイトルを入力し、必要に応じてこのタグの他の属性に値を指定します。
タイトルのフォント属性を指定する場合は、次のようにします。
構造ウィンドウでグラフの「dvt:x1Title」ノードを右クリックし、「dvt:x1Titleの中に挿入」→「フォント」を選択します。
プロパティ・インスペクタで、フォントの特性に値を入力します。
必要に応じて、構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「X1軸」を選択します。
プロパティ・インスペクタで、このタグに値を入力します。
他のグラフの軸のタイトルと外観を制御する手順は、X軸に対する手順と似ています。ただし、カスタマイズする特定の軸に関連するタイトルと軸のタグを挿入します。
グラフ軸上のスクロールは、次のグラフ・タイプに対して指定できます。
dvt:o1Axis、dvt:y1Axisおよびdvt:y2Axisタグの面、棒および折れ線グラフ。
dvt:x1Axis、dvt:y1Axisおよびdvt:y2Axisタグのバブル・グラフおよび散布図。
デフォルトでは、グラフ軸のscrolling属性はoffに設定されています。scrolling属性には次の値を指定できます。
off: スクロールは無効です(デフォルト)。
on: スクロールは有効で、スクロールバーが常に表示されます。
asNeeded: スクロールは有効ですが、スクロールバーは最初表示されません。グラフでズームすると、スクロールバーが表示され、そのセッション中は表示されたままになります。
hidden: スクロールは有効ですた、スクロールバーは常に非表示です。ユーザーはパン・スクローリングを使用できます。
ティック・マークは、グラフのスケール上の特定の値を示すために使用されます。次のグラフ子タグで、軸のティック・マークとラベルのカスタマイズがサポートされます。
主ティック:軸のティック・マークの色、幅とスタイルを制御します。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度の倍数の回転角度を使用します。Flashイメージ・タイプの場合、90度以外の角度の回転テキストをサポートするには埋込みフォントが必要であり、すべてのロケールで埋込みフォントが使用可能とはかぎりません。 |
TickLabelSkipMode: 順序軸上でティック・ラベルを表示するかどうか、およびどのように表示するかの指定に使用します。TLS_MANUALで値を設定すると、必要に応じてtickLabelSkipCountを使用してティック・ラベル間に表示するティック・ラベルの数を設定し、tickLabelSkipFirstを使用してスキップする最初のティック・ラベルのインデックスを設定することができます。
必要に応じて、プロパティ・インスペクタで「フォントの構成」ボタンをクリックし、子のdvt:graphFontタグのプロパティを設定します。
X軸のティック・マークとティック・ラベルの外観を制御する手順:
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「X1主ティック」を選択します。
プロパティ・インスペクタで、このタグの属性に希望の値を入力し、「ティック・ラベルの構成」ボタンをクリックしてグラフに「X1ティック・ラベル」タグを追加します。
プロパティ・インスペクタで、「X1ティック・ラベル」に希望の値を入力し、必要な場合は「フォントの構成」ボタンをクリックしてティック・ラベルのフォント特性を指定します。
グラフで副ティックを指定する場合は、次のようにします。
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「X1副ティック」を選択します。
プロパティ・インスペクタで、フォントの特性に値を入力します。
|
注意:
|
他のグラフの軸のティック・マークの外観を制御する手順は、X軸に対する手順と似ています。ただし、主ティックとラベルのタグをカスタマイズし、カスタマイズする特定の軸に関連付けられた副ティックを挿入します。
dvt:markerTextタグで、軸の数値の書式を制御できます。dvt:markerTextの子タグ(dvt:x1Format、dvt:y1Formatおよびdvt:y2Format)で特定の軸の数値書式をラップします。
|
注意: 順序軸には数値は含まれないため、この軸には書式はありません。 |
これらの軸の数値の書式を設定するには、22.4.4項「グラフのデータ値の書式設定」に示すように、該当する軸に対する子タグを挿入します。
Y軸にはdvt:y1Axisとdvt:y2Axisというグラフの子タグがあり、軸の最初の値がサポートされます。二重Yグラフの各Y軸に異なるスケーリングを指定できます。たとえば、Y1軸は売上数量(単位: 100)を表し、Y2軸は売上高(単位: 1000ドル)を表すことができます。
散布図やバブル・グラフなどの一部のグラフには、最小値や最大値も設定可能なdvt:x1Axis子タグが含まれています。
Y1軸の最初の値を指定する手順:
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「Y1軸」を選択します。
プロパティ・インスペクタで、Y1軸の最初の値をAxisMinValueフィールドに入力します。
AxisMinAutoScaledフィールドで、属性ドロップダウン・リストから「false」を選択します。
最小値が適用されるようにするには、この属性を設定する必要があります。
Y2軸の最初の値を設定するには、同様の手順を使用しますが、グラフの子としてdvt:y2Axisタグを挿入します。
グラフ・コンポーネントには、凡例をカスタマイズする次の種類の子タグが用意されています。
グラフに関連する凡例エリアの色、枠、可視性、位置およびスクロール可能性を指定するdvt:legendAreaタグ。
凡例の色付けされた各エントリに関連するテキストのフォント特性と位置を指定するdvt:legendTextタグ。
凡例エリアのオプションのタイトルとフォント特性を指定するdvt:legendTitleタグ。
凡例エリア、凡例テキストとタイトルをカスタマイズする手順:
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「凡例エリア」を選択します。
プロパティ・インスペクタを使用して、このタグの属性に値を指定します。たとえば、凡例エリアには次の属性を指定できます。
AutomaticPlacementおよびPosition: グラフの右または下部での凡例エリアの自動配置を、デフォルト値AP_ALWAYSで指定します。AP_NEVERでの値の設定には、凡例エリアの配置に使用されるposition属性の値が必要です。
Scrolling: 使用可能なスペースより大きなスペースが必要な場合、asNeededの値を使用して、汎用エリアでのスクロールを指定します。デフォルトではこの値はoffに設定されています。
凡例テキストをカスタマイズする場合は、次のようにします。
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「凡例テキスト」を選択します。
プロパティ・インスペクタを使用して、このタグの属性に値を入力します。
「dvt:legendText」ノードを右クリックし、「dvt:legendTextの中に挿入」→「フォント」を選択します。
プロパティ・インスペクタを使用して、フォント・タグの属性に値を指定します。
凡例のタイトルを入力する場合は、次のようにします。
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「凡例タイトル」を選択します。
プロパティ・インスペクタを使用して、このタグの属性に値を入力します。
「dvt:legendTitle」ノードを右クリックし、「dvt:legendTitleの中に挿入」→「フォント」を選択します。
プロパティ・インスペクタを使用して、フォント・タグの属性に値を指定します。
ツールチップは、データ・マーカーのIDや詳細情報を表示するのに便利です。markerTextを表示する領域のない小さいグラフには非常に便利です。タイトル、サブタイトル、脚注、凡例テキスト、注釈などのテキストが切り捨てられている場合は、そのコンポーネントのツールチップがグラフに自動的に表示されます。
ほとんどのグラフで、データ・マーカー上にカーソルを置くと、ツールチップが表示されます。折れ線または面グラフでは、単に線上または面上ではなく、データ・マーカー上、あるいは線または面の隅にカーソルを置く必要があります。
各グラフ・マーカー(棒など)で情報付きのツールチップが表示されるように指定できます。グラフのツールチップのカスタマイズには、次のグラフの属性が使用できます。
MarkerTooltipType: マーカー(棒など)に対するツールチップを表示するかどうかを指定し、ツールチップに表示する情報の種類を特定します。テキストのみ、値のみ、あるいはテキストと値の情報を表示できます。特定のグラフ・タイプでは、積上げグラフ・マーカーごとに累積データ値を表示したり、円グラフのスライス・マーカーごとに割合のデータを表示できます。
SeriesTooltipLabel: 凡例に表示される値のセットごとにツールチップを表示するかどうかを指定します。この属性では、系列ツールチップに表示される情報の種類も制御されます。たとえば、系列全体を示す一般的な語(「製品」など)のテキストを表示するか、系列の特定のメンバーを示す特定の語(特定の製品名など)のテキストを表示するかを選択できます。
|
注意: グラフでは、グラフの |
GroupTooltipLabelType: 軸上のデータ・グループに対するツールチップ・ラベルを表示するかどうかを指定します。たとえば、特定の製品の売上げが年ごとまたは四半期ごとにまとめられているとします。グループ全体を示す一般的な語(「時間」など)のテキストを表示するか、グループの各メンバーを示す特定の語(四半期を表すQ1、Q2、Q3、Q4など)のテキストを表示するかを選択できます。
グラフのmarkerTooltipTemplate属性をトークン化された文字列に設定することにより、グラフ内のすべてのマーカー・ツールチップの書式をすばやく設定できます。この属性には1つの文字列を指定でき、これには事前に定義されたトークンのセットをいくつでも含めることができます。次に例を示します。
<dvt:lineGraph markerTooltipTemplate="Template Based Tooltip NEW_LINE SERIES_LABEL GROUP_LABEL NEW_LINE Value: Y_VALUE"/>
表22-5に、サポートされるトークンのリストを示します。
表22-5 markerTooltipTemplate文字列トークン
| トークン | 説明 |
|---|---|
|
|
新しい行を挿入します。 |
|
|
このマーカーの系列の系列ラベル。 |
|
|
このマーカーのグループのグループ・ラベル。 |
|
|
散布図またはバブル・マーカーあるいは連続時間軸マーカーのX値。 |
|
|
このマーカーのY値(このマーカーにY値がある場合)。 |
|
|
バブル・マーカーのZ値(バブルのサイズ)。 |
|
|
円グラフのスライスの値。 |
|
|
円グラフのスライスのパーセント値。 |
|
|
ファンネル・セクションの実際の値。 |
|
|
ファンネル・セクションのターゲット値。 |
|
|
株価マーカーの高値。 |
|
|
株価マーカーの低値。 |
|
|
株価マーカーの終値。 |
|
|
株価マーカーの始値。 |
|
|
株の出来高マーカーの出来高値。 |
|
|
積上げグラフの累積積上げ値。 |
|
|
積上げパーセント・グラフまたはパレート・グラフの累積パーセント値。 |
グラフのcustomToolTipCallback属性を使用すれば、オブジェクトの基準によってオブジェクト上で変化するツールチップを指定できます。次に例を示します。
<dvt:graph id="g2" customToolTipCallback="#{customToolTipCallback.callback}"
すべてのグラフ・タイプに対して、テキスト、色およびデータ値の書式を設定できます。
次のグラフのサブコンポーネントのテキストを書式設定できます。
注釈: 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タグを、テキストに書式設定する特定のサブコンポーネントの子として使用します。グラフのテキストの書式設定の例は、22.4.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:
}
カスタム・スキンをtrinidad-skins.xmlファイル内のアプリケーションに登録します。たとえば、mySkin.cssにより、デフォルトのblafplus-rich.desktopスタイル・シートを拡張します。
<?xml version="1.0" encoding="ISO-8859-1"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>mySkinExtends.desktop</id>
<family>mySkinExtends</family>
<extends>blafplus-rich.desktop</extends>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/mySkin.css</style-sheet-name>
</skin>
</skins>
trinidad-config.xmlファイルでカスタム・スキンを使用するようにアプリケーションを構成します。次に例を示します。
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config"> <skin-family>mySkin</skin-family> </trinidad-config>
アプリケーションとともにデプロイされるように、カスタム・スキンをjarファイルにパッケージ化します。スキンを定義し、CSSファイルを参照するtrinidad-skins.xmlファイルは、META-INFディレクトリに内に存在する必要があります。
アプリケーションへのカスタム・スキンの適用の詳細は、28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
グラフの各箇所に関連する子タグにborderTransparentおよびfillTransparent属性を設定することで、これらの箇所で透明色を表示するよう指定できます。次のリストに、透明色をサポートするグラフの各部分を示します。
グラフの背景: dvt:backgroundタグを使用します。デフォルトでは、fillTransparent属性はtrueに設定されています。
グラフの凡例エリア: dvt:legendAreaタグを使用します。
グラフの円フレーム: dvt:graphPieFrameタグを使用します。
グラフの描画エリア: dvt:graphPlotAreaタグを使用します。
グラデーションは、オブジェクトの色が段階的に変わる特殊効果です。グラデーションの各色は、ストップで表します。最初のストップはストップ0、2番目はストップ1のようになります。特殊効果をサポートするグラフのサブコンポーネントには、特殊効果のストップをいくつでも指定できます。
グラフの次のサブコンポーネントにグラデーション特殊効果を定義できます。
グラフの背景: dvt:backgroundタグを使用します。
グラフの描画エリア: dvt:graphPlotAreaタグを使用します。
グラフの円フレーム: dvt:graphPieFrameタグを使用します。
凡例エリア: dvt:legendAreaタグを使用します。
系列: dvt:seriesタグを使用します。
|
注意: デフォルトでは、グラフの系列グラデーションは、 |
時間セレクタ: dvt:timeSelectorタグを使用します。
参照エリア: dvt:referenceObjectタグを使用します。
グラデーション特殊効果を使用する方法は、この効果がサポートされるグラフの各部分で同じです。
特殊効果を追加するグラフのサブコンポーネントごとに、dvt:specialEffectsタグをサブコンポーネントの子タグとして挿入する必要があります。たとえば、グラデーションをグラフの背景に追加する場合、dvt:backgroundタグの子であるdvt:specialEffectsタグを1つ作成します。
その後、オプションでサブコンポーネントの塗りつぶし色の変化の割合を制御する場合は、コンポーネントの塗りつぶしの色と変化の割合の制御に必要な数のdvt:gradientStopStyleタグを挿入します。このdvt:gradientStopStyleタグは、1つのdvt:specialEffectsタグの子タグとして挿入する必要があります。
グラデーション特殊効果をグラフの背景に追加する手順:
構造ウィンドウでグラフ・ノードの子である「dvt:background」を右クリックし、「dvt:backgroundの中に挿入」→「特殊効果」を選択します。
プロパティ・インスペクタを使用してdvt:specialEffectsタグの属性に値を入力します。
fillType属性には、FT_GRADIENTを選択します。
gradientDirection属性には、グラデーションの塗りつぶしに使用する変化の方向を選択します。
numStops属性には、グラデーションに使用するストップの数を入力します。
オプションで各グラデーション・ストップの色と変化の割合を制御する場合は、「dvt:specialEffects」ノードを右クリックし、dvt:specialEffects内に挿入→「dvt:gradientStopStyle」を選択します。
プロパティ・インスペクタを使用してdvt:gradientStopStyleタグの属性に値を入力します。
stopIndex属性には、specialEffectsタグ内に含まれるdvt:gradientStopStyleタグ内の索引としてゼロベースの整数を入力します。
gradientStopColor属性には、グラデーション内のこの部分に使用する色を入力します。
gradientStopPosition属性には、指定したストップ色のグラデーションでの相対距離を入力します。グラデーションのスケールは0から100です。0または100が指定されない場合、これらのポイントにはデフォルトの位置が使用されます。
指定するグラデーション・ストップごとに、ステップ3とステップ4を繰り返します。
例22-4に、グラデーションの塗りつぶしをグラフの背景に追加し、2つのストップを指定する場合に生成されるXMLコードを示します。
例22-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>
データ・コレクション内の属性には、データ値またはデータ値のカテゴリを指定できます。データ値は、棒の高さや散布図のポイントなどのマーカーで表される数値です。データ値のカテゴリは、順序軸ラベルとして表されるメンバーか、またはツールチップ内の追加プロパティとして表示されます。数値属性とカテゴリ属性はどちらも、ADF Facesコンバータ・タグ(数値データ値の場合はaf:convertNumber、カテゴリ・データ値の場合はaf:convertNumber、af:convertDateTimeおよびaf:convertColor)を使用して書式設定できます。
コンバータ・タグの属性で、パーセントの書式設定、数値の位取り、小数部の桁の制御、記号の配置などが行えます。ADF Facesコンバータの詳細は、第7章「入力の検証および変換」を参照してください。
グラフ内のカテゴリ・データ値は、グラフのデータ・モデルを定義するページ定義ファイル(<pagename>PageDef.xml)内の名前で表されます。例22-5に、従業員の雇用日およびボーナス・コストのカテゴリ・データ値を表示するグラフがあるページのページ定義ファイル内のXMLコードを示します。
例22-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:barGraphの中に挿入」→「ADFデータ視覚化」→「属性フォーマット」を選択します。
プロパティ・インスペクタで、「Name」属性に「af1」カテゴリ属性の名前としてHiredateを入力します。
構造ウィンドウで指定した属性フォーマット・タグを右クリックし、「dvt:attributeFormatの中に挿入」→「日時の変換」を選択します。
プロパティ・インスペクタで、「Pattern」属性にjava.text.SimpleDateFormatに準拠する日付/時刻文字列の書式設定パターンを入力します。「TimeZone」属性に、日付文字列の時刻情報を解釈するためのタイムゾーンを入力します。
Bonusカテゴリ属性についてステップ1から4を繰り返し、Bonusをaf2カテゴリ属性の名前として設定し、af:convertNumberコンバータを追加して、通貨の属性の書式を設定します。
例22-6に、棒グラフのカテゴリ・データ値の書式を設定する場合に生成されるXMLコードを示します。
例22-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」など)とは対照的に、階層形式で日付が表示されます。順序軸に単一ラベルを表示するには、時間軸をオフにし(たとえば |
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属性を指定します。
円グラフのスライス・ラベルで数値の書式を設定する手順:
構造ウィンドウで円グラフ・タグの子のdvt:sliceLabelタグを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、TextType属性のドロップダウン・リストから「LD_VALUE」を選択し、グラフ内の円のスライスが1つの値を表すことを指定します。
プロパティ・インスペクタで、「区分ラベルの構成」をクリックし、ドロップダウン・リストから「数値書式」を選択します。
af:convertNumberタグのプロパティ・インスペクタで、通貨記号としてドル記号を使用して、値を通貨として指定します。
例22-7に、グラフの区分ラベル内の数値を書式設定する場合に生成されるXMLコードを示します。
例22-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:<type>Graphの中に挿入」→「ADFデータ視覚化」→「マーカー・テキスト」を選択します。
プロパティ・インスペクタで、必要に応じてdvt:markerTextの属性に値を入力します。たとえば、グラフ内のテキストを表示するために、rendered属性にtrueを選択します。
プロパティ・インスペクタで、「マーカーの構成」をクリックし、「Y1フォーマット」を選択します。
プロパティ・インスペクタで、必要に応じてdvt:y1Format属性に値を入力します。
プロパティ・インスペクタで、「数値書式の構成」をクリックし、必要に応じてaf:convertNumberタグの属性の値を指定します。たとえば、マーカー・テキストの後にパーセント記号を配置するには、type属性にpercent値を選択します。
例22-8に、グラフのY1軸のマーカー・テキストの数値を書式設定する場合に生成されるXMLコードを示します。この例では、数値の後にパーセント記号が続き、マーカーの上にテキストが表示されるよう指定します。たとえば、棒グラフの場合、棒の上にテキストが表示されます。
例22-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)に設定されている場合、子の |
コンパクトできれいな表示を実現するために、グラフでは、軸ラベル、マーカー・テキストおよびツールチップに表示される値のスケールおよび精度が自動的に決まります。たとえば、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に設定されていないかぎり無視されます。
データの系列およびグループの外観を色、スタイル、表示についてカスタマイズできます。折れ線グラフの線、円グラフのスライス、バブル・グラフおよび散布図グラフのマーカーの外観もカスタマイズできます。グラフに参照線も追加できます。
ほとんどのグラフ・タイプで、グラフの棒、折れ線、面、ポイントおよびスライスとして表されるデータ値のセットごとにエントリが凡例に表示されます。このエントリは関連するデータ値のセットを識別し、グラフ内でのセットの色を示します。たとえば、棒グラフでは、黄色の棒を使用して靴の売上げを示し、緑色の棒を使用してブーツの売上げを示します。グラフ・コンポーネントでは、関連のデータ値の各セットを系列として参照します。
グラフでは、データ値の各セットに異なる色が自動的に割り当てられます。塗りつぶしや枠の色などの各系列に割り当てられた色はカスタマイズできます。一部のグラフ・タイプでは、グラフの凡例で系列の非表示または表示により、グラフ内のデータ値の表示をフィルタ処理できます。
特定のグラフ・タイプでは、折れ線グラフの線の幅やスタイルなどの追加属性を、実線、点線、ダッシュ線などの選択肢で指定できます。詳細は、22.5.3項「グラフでの線の外観の変更」を参照してください。
散布図の場合、データ値の相互依存関係を表すために、データ・マーカーの形状や色を系列と区別することができます。詳細は、22.5.5項「散布図の系列マーカー・データ値のカスタマイズ」を参照してください。
グラフ内の各系列の色にグラデーション特殊効果を追加してカスタマイズすることもできます。詳細は、22.4.3項「グラフでのグラデーション特殊効果の使用」を参照してください。
1つのdvt:seriesSetタグを使用して、グラフの個々のdvt:seriesタグをすべてラップし、グラフ・データ・マーカーの色およびスタイルの属性を設定します。
グラフの系列アイテムに色とスタイルを指定する手順:
構造ウィンドウでグラフ・ノードの「dvt:seriesSet」子タグを右クリックし、「プロパティに移動」を選択します。
必要に応じてプロパティ・インスペクタを使用し、dvt:seriesSetタグの属性に値を指定します。
このタグの属性によって、セット内のすべての系列タグのデフォルト設定が決まります。ただし、指定した系列のこの設定を、dvt:seriesタグの対応する属性に値を入力することでオーバーライドできます。
構造ウィンドウで「seriesSet」ノードを右クリックし、「dvt:seriesSetの中に挿入」→「系列」を選択します。
最初のdvt:seriesタグが「グラフ・バインディングの作成」ダイアログに表示される最初の系列を表します。
プロパティ・インスペクタを使用して、dvt:seriesタグに、必要に応じて色と他の特性を指定します。
系列アイテムごとに、ステップ3とステップ4を繰り返します。
面、棒、バブル、組合せ、折れ線、円、レーダーおよび散布図のグラフ・タイプについては、実行時にグラフ内の系列の非表示または表示を有効にできます。グラフでは少なくとも1系列を表示する必要がありますが、ユーザーは対応する凡例アイテムをクリックすることにより、データの表示をフィルタ処理できます。
系列アイテムの非表示および表示を有効にする手順:
構造ウィンドウで「graph」ノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタの「外観」属性カテゴリの「系列」セクションで、グラフの「hideAndShowBehavior」属性を設定します。有効な値は、次のとおりです。
none: デフォルト値で、系列の非表示および表示の動作は無効です。
withRescale: 見える系列のみが表示されるようにグラフのサイズを変更します。
withoutRescale: 系列は非表示なりますが、グラフのサイズは変わりません。
円グラフの外観をカスタマイズできます。また、円グラフの1つのスライスを他のスライスから切り離すよう指定できます。
円グラフの外観は、グラフ・タグ内に次の子タグを挿入することでカスタマイズできます。
dvt:pieFeelerタグ: 円グラフのスライスからスライス・ラベルへ延びる線(引出線と呼ばれる)の色を指定します。
dvt:sliceタグ: 円グラフのスライスのラベルの位置を指定します。
dvt:sliceLabelタグ: 円グラフまたはドーナツ・グラフの各スライスを説明するラベルの特性を指定します。各スライスはデータ値を表します。このタグのtextType属性を使用して、スライス・ラベルにテキストのみを表示するか、割合のみを表示するか、テキストと割合を表示するかを示します。数値を書式設定する場合またはフォント特性を指定する場合は、dvt:sliceLabelタグ内にdvt:graphFontおよびaf:convertNumberタグを追加します。
円グラフで1つのスライスが他のスライスから切り離されている場合、この表示は円グラフのスライスの切離しと呼ばれます。1つのスライスを切り離すのはそのスライスを強調表示するためで、グラフ内で最も大きい分量が割り当てられていることもあります。
円グラフのスライスは、グラフの凡例で示されるデータのセットです。したがって、スライスは円グラフの系列アイテムです。
始める前に:
22.5.1.1項「個々の系列アイテムの色とスタイルの指定方法」の手順に従い、個々の系列アイテムをラップする系列セットを作成します。
円グラフで1つのスライスをカスタマイズする手順:
円グラフでスライスを1つ切り離すには、プロパティ・インスペクタで、円グラフから切り離すスライスを示すseriesタグの「PieSliceExplode」属性に0から100の値を設定します(100が、使用できる最大の切離し距離です)。
円グラフでスライスをアニメーション化するには、プロパティ・インスペクタで、dvt:pieGraphタグ上の「InteractiveSliceBehavior」属性を設定します。次の値の組合せが有効です。
none: インタラクティブなスライスの動作は無効です。
explode: ユーザーは円グラフのスライスをクリックして切り離すことができます。
explodeAll: コンテキスト・メニューに「すべて開く」および「すべて閉じる」のオプションを追加します。
たとえば、ユーザーが円グラフ内のスライスを切り離し、コンテキスト・メニューを使用して次のコードのグラフですべてのスライスを開くまたは閉じるように指定できます。
<dvt:pieGraph interactiveSliceBehavior="explode explodeAll"/>
|
注意:
|
グラフのdvt:seriesSet子の属性を使用して、グラフの線の外観を変更できます。
折れ線、組合せまたはレーダー・グラフには、データ線またはデータ・マーカーを表示できます。データ線ではなく、マーカーを表示する場合、マーカーが凡例に自動的に表示されます。
プロパティ・インスペクタで、dvt:seriesSetタグの次の属性を設定して、データ線またはデータ・マーカーを表示します。
LineDisplayed: グラフにデータ線を表示するかどうかを指定します。次の値を設定できます。
Trueは、グラフにデータ線が表示されることを示します。
Falseは、グラフにデータ線ではなく、マーカーが表示されることを示します。
MarkerDisplayed: グラフにマーカーまたはデータ線を表示するかどうかを指定します。次の値を設定できます。
Trueは、グラフにマーカーが表示されることを示します。
Falseは、グラフにデータ線が表示されることを示します。
|
注意:
|
次のリストで説明するように、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タグの使用の詳細は、22.5.1.1項「個々の系列アイテムの色とスタイルの指定方法」の手順を参照してください。
パレート・グラフは、一連の棒を使用して不具合の原因を示します。棒は値の大きい方から小さい方に順に並べられます。パレート線は、グラフのすべての棒の合計値に対する棒の累積割合を示します。線は常に100%で終わります。
パレート線とパレート・マーカーは、次のグラフの子タグを使用してカスタマイズできます。
dvt:paretoLineタグ: 色、線幅と線のスタイル(実線、ダッシュ線、点線、ダッシュと点の組合せなど)を指定できます。
dvt:paretoMarkerタグ: パレート・マーカーの形状を指定できます。
パレート・グラフをカスタマイズする手順:
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「パレート線」を選択します。
プロパティ・インスペクタで、このタグの属性に値を指定します。
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「パレート・マーカー」を選択します。
プロパティ・インスペクタで、markerShape属性に値を選択します。
散布図では、1系列の関連データ値は、データ・マーカーの形状と色で表されます。データ値の相互依存関係を表すために、データ・マーカーの形状や色を系列と区別することができます。
たとえば、図22-40の散布図では、City属性とProduct属性をまとめて使用し、データ・マーカーの形状と色によって表される系列を特定します。
行ヘッダーの属性を使用して、デフォルト系列の指定をオーバーライドできます。図22-41の散布図では、形状にマップされたCity属性と色にマップされたProduct属性のデータ値が表示されています。
次の属性を使用して、散布図の系列マーカー・データ値をカスタマイズします。
markerShape - マーカーの形状を設定するために使用する行ヘッダー属性名を指定します。この属性が指定されていない場合、グラフにはデフォルトのインデックス・ベース系列のマーカーの形状が表示されます。
markerColor - マーカーの色を設定するために使用する行ヘッダー属性名を指定します。この属性が指定されていない場合、グラフにはデフォルトのインデックス・ベース系列のマーカーの色が表示されます。
たとえば、次のコードを使用して、CityとProductを別の系列アイテム・マーカーとして指定します。
<dvt:scatterGraph markerColor="Product" markerShape="City" value="#{bindings.View1.graphModel}"/>
折れ線グラフ、散布図、極グラフ、組合せグラフおよびバブル・グラフのマーカーの形状は、グラフ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(/resource/path/newCShape.svg);
}
JSFページでは、マーカー・コンポーネントの形状属性は次のように設定されます。
<dvt:series id="s1" shape="customName"/>
ADFスキンおよびスタイル・プロパティの使用の詳細は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
参照線および領域は、系列や軸の数や関連付けにかかわらず、常に表示する、ロールオーバーのみに表示する、または表示しない設定が可能です。
系列(グラフの凡例で1つの色で表示されるデータ値のセット)に関連付けられる参照線を作成できます。参照線付きの系列が複数ある場合、カーソルを系列マーカーまたは対応する系列凡例アイテム上に移動したときのみ参照線が表示されます。これは、複数の参照線はユーザーにとって紛らわしいからです。
軸に関連付ける参照領域を作成することもできます。通常、これらの領域はY軸に関連付けられます。複数の参照領域がある場合、カーソルを関連する軸上に移動すると、これらの領域も表示されます。
実行時までアプリケーションで必要な参照線と領域の数がわからない場合、参照線と領域を実行時に動的に作成することができます。
たとえば、グラフに表示されている値を参照するために、棒グラフに領域を追加できます。図22-42に、グラフの高い値と低い値に対する2つの参照領域がある棒グラフを示します。
参照線も参照領域も、次のタグを使用して作成されます。
referenceObjectSet: このグラフの参照線または参照領域のすべての参照オブジェクト・タグをラップします。
referenceObject: タグが参照線を表すか、参照領域を表すかを示し、タグの特性を指定します。
設計時に参照線または領域をグラフに追加する手順:
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「参照オブジェクト・セット」を選択します。
特定の軸に関連付けられている参照領域を定義する場合、適切な軸または軸の属性(displayX1、displayY1またはdisplayY2)の値を指定します。
値RO_DISPLAY_AUTOMATICは、関連付けられている軸上にマウスが移動したときにのみ参照領域が表示されるようにします。これを選択すると、複数の参照領域が一度に表示されて混乱を招くことがなくなります。
オプションで、参照領域にグラデーション特殊効果を適用できます。詳細は、22.4.3項「グラフでのグラデーション特殊効果の使用」を参照してください。
構造ウィンドウで「referenceObjectSet」コンポーネントを右クリックし、「dvt:referenceObjectSetの中に挿入」→「参照オブジェクト」を選択します。
プロパティ・インスペクタで次のようにします。
「共通」属性カテゴリで、参照オブジェクトのindex属性に値を指定し、参照オブジェクトのtype属性にRO_LINEまたはRO_AREAを指定し、association属性に関連付けるオブジェクト(参照線の場合は系列、参照領域の場合は特定の軸)を指定します。また、displayedInLegend属性を使用してオブジェクトを凡例に表示するかどうかを指定し、凡例に表示するテキストがある場合はこれを指定します。
参照線を作成する場合、線に関連する属性に値を指定します。これには、線が関連付けられる系列の番号の指定も含まれます。系列番号は、グラフ・データ・バインディング・ダイアログに系列が表示される順番のことです。
参照領域を作成する場合、指定した軸の参照領域を示す高低の値を指定します。
構造ウィンドウでグラフのノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで「外観」属性カテゴリを選択し、次のようにして参照線と参照領域の表示を制御します。
参照線(系列に関連付けられている)を定義した場合、dvt:seriesノードを開き、displaySeries属性に動作の値を指定します。
値RO_DISPLAY_AUTOMATICは、カーソルが系列アイテム(棒など)またはグラフの凡例の対応する下位列エントリの上に移動したときにのみ参照線が表示されるようにします。これを選択すると、複数の系列の参照線が一度に表示されて混乱を招くことがなくなります。
参照領域(特定の軸に関連付けられている)を定義した場合、参照オブジェクトを適切な軸(1つまたは複数)に関連付けます。
設計時に参照線または領域を作成すると、JSFページのグラフのXML内にXMLコードが生成されます。参照オブジェクト(線も領域も)は、dvt:referenceObjectSetタグでラップされます。例22-9に、図22-42の棒グラフに関連付けられた2つの参照領域のコードを示します。
例22-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_AREA" association="Y1AXIS"
location="RO_BACK" color="#99cc66"
lowValue="50" highValue="100"
displayedInLegend="true" text="High"/>
</dvt:referenceObjectSet>
</dvt:barGraph>
参照オブジェクトを実行時に動的に作成する場合、referenceObjectSetタグのみを使用します。このタグのreferenceObjectMap属性に、子コンポーネント参照オブジェクトのマップを作成するコードへのメソッド参照を設定します。このマップを作成するメソッドは、マネージドBeanに格納する必要があります。
参照線または領域を動的に作成する手順:
実行時に作成する子コンポーネント参照オブジェクトのマップを作成するメソッドを記述します。例22-10に、このメソッドを作成するコードを示します。
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「参照オブジェクト・セット」を選択します。
プロパティ・インスペクタで、referenceObjectMap属性に、子コンポーネント参照オブジェクトのマップを作成するコードへのメソッド参照を指定します。
たとえば、(sampleGraph)マネージドBeanとgetReferenceObjectMapListメソッドの場合、属性にreferenceObjectMap="#{sampleGraph.referenceObjectMapList}"と設定します。
例22-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;
}
グラフ・コンポーネントdvt:areaGraph、dvt:bubbleGraph、dvt:barGraph、dvt:lineGraph、dvt:comboGraph、dvt:pieGraphおよびdvt:scatterGraphでは、グラフ・コンポーネントの最初の表示や、部分ページ・リフレッシュ(PPR)イベントのスライドショー遷移などのアニメーション効果をサポートします。アニメーション効果は、グラフのanimationOnDisplayおよびanimationOnDataChangeプロパティに次の値を指定します。
alphaFade
conveyorFromLeft
conveyorFromRight
cubeToLeft
cubeToRight
flipLeft
flipRight
slideToLeft
slideToRight
transitionToLeft
transitionToRight
zoom
アニメーション効果は、アクティブ・データを使用して実行することもできます。アクティブ・データ・サービス(ADS)では、ADFモデル・レイヤーを使用して、ADF Facesコンポーネントをアクティブ・データ・ソースにバインドできます。このためには、コンポーネントとバインディングを構成して、コンポーネントがソースで更新されたデータを表示できるようにする必要があります。あるいは、あらかじめ決められた間隔で変更のデータ・ソースをポーリングするようにアプリケーションを構成することもできます。
アクティブ・データ・サービスを使用するには、データが変更されたときにイベントを公開するデータ・ソースが必要であり、それらのイベントに反応するビジネス・サービスと、それらのサービスを表示するための関連のデータ・コントロールを作成する必要があります。ADSおよびアプリケーションの構成の詳細は、第35章「非同期バックエンドでのアクティブ・データ・サービスの使用方法」を参照してください。
データ・バインドされたグラフを構成し、対応するページ定義ファイルでバインディング要素に値を設定することによってアクティブ・データを表示します。
アクティブ・データを表示するグラフを構成する手順:
構造ウィンドウでグラフのノードを選択します。
プロパティ・インスペクタで、「ID」フィールドに一意の値を入力します。
識別子を選択しないと、1つ自動的に入力されます。
そのページの関連ページ定義ファイルを開きます。
ページ定義ファイルの構造ウィンドウで、コンポーネントにバインドされた属性を表すノードを選択します。プロパティ・インスペクタで、ChangeEventPolicy属性にPushを選択します。
アニメーションを使用するグラフのプロパティ・インスペクタで、次の属性を設定します。
animationOnDisplay: オプション。ADSと一緒にまたは単独で、適用する初期レンダリング効果のタイプの指定に使用します。有効な値は次のとおりです。
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色の指定に使用します。
ドリル、インタラクティブな時間軸の追加、注釈およびアラート、ドラッグ・アンド・ドロップ、ポップアップおよびコンテキスト・メニューなどのインタラクティブな機能をグラフに追加できます。
次のような多くのインタラクティブな機能をグラフに追加できます。
マーカーと凡例の淡色表示
マーカーには線、棒、面、散布マーカー、バブルおよび円グラフのスライスが含まれます。
ズームとスクロール
ズームとスクロールのレベルの変更
特定のデータのセット内の1つのデータ・マーカーまたはグラフの凡例の対応するエントリの上にカーソルを移動すると、そのセットのすべてのデータ・マーカーが強調表示されるようにすることができます。強調表示効果は、セットの他のデータ・マーカーを淡色表示することによって視覚的に実現します。たとえば、棒グラフに4つの製品(P1、P2、P3、P4)の月ごとの売上げを表示する場合、製品P2の1月にカーソルを移動すると、P2のすべての棒が強調表示され、P1、P3およびP4の棒は淡色表示されます。
グラフでは特定のデータのセットのすべてのデータ・マーカー(P2のすべての棒など)を系列として参照するため、系列内のデータ・マーカーを強調表示する機能は、グラフの系列ロールオーバー動作機能の一部です。
系列ロールオーバー動作は、棒グラフ、折れ線グラフ、面グラフ、円グラフ、散布図、極グラフ、レーダー・グラフおよびバブル・グラフでのみ使用できます。
系列内のすべてのデータ・マーカーを淡色表示する手順:
構造ウィンドウでグラフのノードを右クリックし、「プロパティに移動」を選択します。
「外観」属性カテゴリのSeriesRolloverBehaviorフィールドでドロップダウン・リストを使用して「RB_DIM」を選択します。
グラフでズームおよびスクロール・レベルが変更されたときに実行されるカスタム・コードを指定できます。マネージドBeanには、ZoomAndScrollEventまたはScrollEventを入力として受け入れるメソッドを格納します。これらのイベントを使用すると、ユーザーはズームされる軸およびズームされた軸の現在の範囲を決定できます。
グラフでのズームとスクロールに対応するカスタム動作を指定する手順:
マネージドBeanに、ズームまたはスクロール・イベントがトリガーされたときの動作を実行するカスタム・メソッドを記述します。例22-11に、このメソッドを作成するコードを示します。
構造ウィンドウでグラフのノードを右クリックし、「プロパティに移動」を選択します。
「動作」属性カテゴリを選択し、拡張ノードを開き、次の一方または両方を実行します。
zoomlListenerフィールドに、マネージドBeanに格納したメソッドへの参照を指定します。
たとえば、setZoomメソッドがSampleGraphマネージドBeanに格納されている場合、"#{sampleGraph.zoom)"という設定になります。
scrollListenerフィールドに、マネージドBeanに格納したメソッドへの参照を指定します。
たとえば、setScrollメソッドがSampleGraphマネージドBeanに格納されている場合、"#{sampleGraph.scrという設定になります。
例22-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));
}
時間データを表示する相対的範囲と明示的範囲を定義できます。
時間データを表示する単純な相対範囲(過去7日間など)を定義できます。これによって、新しいデータ・ポイントがアクティブ・データ・グラフの表示に追加され、古いデータがグラフの左端からはみ出ることになります。相対時間範囲の指定は、アクティブ・データ・グラフでの使用に限定されません。
時間データを表示する相対範囲を指定する手順:
構造ウィンドウでグラフのノードを右クリックし、「プロパティに移動」を選択します。
「外観」属性カテゴリで、dvt:timeAxisノードを開き、次の属性に値を指定します。
timeRangeMode属性に、相対範囲を時間範囲の終わりに適用する(過去7日間など)か、始めに適用する(最初の7日間など)かに応じてTRM_RELATIVE_LASTまたはTRM_RELATIVE_FIRSTの値を指定します。
timeRelativeRange属性に、相対範囲をミリ秒で指定します。
たとえば、7日間の範囲を指定する場合は、日数(7)に1日をミリ秒にした数(86400000)を掛けた、604800000となります。
時間データを表示する明示的範囲(3月15日から3月25日など)を定義できます。この例では、開始と終了の値に指定されていないため、年、時間、分および秒にはデフォルト値が使用されます。
明示的範囲の開始日と終了日を指定する各メソッドは、グラフのマネージドBeanに格納します。
始める前に:
グラフの属性やグラフの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、22.2.2項「グラフの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、22.1.3項「グラフ・コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
マネージドBeanに、時間範囲の開始日と終了日を返すメソッドを作成します。マネージドBeanの詳細は、3.6項「マネージドBeanの作成と使用」を参照してください。
例22-12に、時間範囲の開始日と終了日を返す2つのサンプル・メソッドを示します。
時間値に基づいて軸を表示するグラフをページに作成します。詳細は、第22.2.3項「ページへのグラフの追加方法」を参照してください。
時間データを表示する明示的範囲を指定する手順:
構造ウィンドウでグラフのノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「外観」セクションを開いて、次の属性の値を指定します。
timeRangeMode属性で、属性のドロップダウン・メニューから「TRM_EXPLICIT」を選択します。
timeRangeStart属性に、時間範囲の開始日を返すメソッドへの参照を指定します。
たとえば、timeAxisSampleという名前のマネージドBeanと、例22-12で参照されているgetStartDate()メソッドの場合は、初期日付に#{timeAxisSample.startDate}と入力します。
timeRangeEnd属性に、時間範囲の終了日を返すメソッドへの参照を指定します。
時間軸を表示するように構成されているグラフには、時間セレクタを追加できます。時間セレクタを使用すると、ユーザーは時間軸でデータの範囲を選択できます。通常、時間セレクタは、ディテールが時間セレクタの日付範囲に基づいて表示される、マスター/ディテール・グラフで使用されます。
グラフに時間セレクタを追加するには、グラフにdvt:timeSelectorコンポーネントを追加し、マネージドBeanまたはバッキングBeanに範囲の開始日と終了日を返すためのメソッドを追加します。マスター/ディテール・グラフを構成する場合は、ユーザーが時間セレクタを移動したときにディテール・グラフを更新するためのリスナーを時間セレクタに追加します。
図22-43に、時間セレクタを使用するように構成されたマスター/ディテール・グラフの簡単な例を示します。ユーザーがマスター・グラフで時間セレクタを別の日付範囲に移動すると、棒グラフの表示が自動的に更新されます。
始める前に:
グラフの属性やグラフの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、22.2.2項「グラフの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、22.1.3項「グラフ・コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
時間値に基づいて軸を表示するグラフをページに作成します。詳細は、第22.2.3項「ページへのグラフの追加方法」を参照してください。
面、棒、折れ線、組合せの各グラフおよび株価チャートには、列ラベルにオブジェクト・タイプがjava.util.Dateの日付が指定された場合に、時間軸が表示されます。時間セレクタを使用するには、日付を昇順でソートし、日、週、月などの一定の間隔を使用するようにします。
たとえば、図22-43の折れ線グラフでは、o1軸に販売日付を、系列に総売上げを使用しています。図22-44に、サンプル・データを示します。
マスター/ディテール・グラフを構成する場合は、ディテールが時間セレクタの開始日と終了日に基づいて表示されるグラフを作成します。
たとえば、図22-43の棒グラフでもo1軸に販売日付が使用されていますが、総売上げに加えて純売上げのデータも表示されています。
マネージドBeanまたはバッキングBeanに、時間範囲の開始日と終了日を返すメソッドを作成します。マネージドBeanの詳細は、3.6項「マネージドBeanの作成と使用」を参照してください。
例22-13に、時間セレクタの時間範囲の開始日と終了日を返す2つのサンプル・メソッドを示します。
例22-13 時間セレクタの開始日と終了日を返すサンプル・メソッド
// Add this import to your bean
import java.util.Date;
// Add these variables to your bean
private static java.sql.Date m_startDate = java.sql.Date.valueOf("2011-01-02");
private static java.sql.Date m_endDate = java.sql.Date.valueOf("2011-01-04");
// Add these methods to your bean
public Date getTimeAxisStartDate() {
return m_startDate;
}
public Date getTimeAxisEndDate() {
return m_endDate;
}
オプションで、マネージドBeanに時間セレクタのリスナー用のメソッドを追加します。
例22-14に、図22-43に表示されている時間セレクタのサンプル・リスナーを示します。
例22-14 時間セレクタのリスナーのサンプル・コード
// Add these imports to your bean
import java.util.Date;
import oracle.adf.view.faces.bi.component.graph.UIGraph;
import oracle.adf.view.faces.bi.event.TimeSelectorEvent;
import javax.faces.event.AbortProcessingException;
import java.text.DateFormat;
// Add this method to your bean
public void processTimeSelectorEvent(TimeSelectorEvent event) throws AbortProcessingException
{
java.sql.Date startDate = new java.sql.Date(event.getStartDate().getTime());
java.sql.Date endDate = new java.sql.Date(event.getEndDate().getTime());
DateFormat formatter = DateFormat.getDateTimeInstance(DateFormat.MEDIUM, DateFormat.MEDIUM);
if (graph2 != null)
{
graph2.setTimeRangeStart(startDate);
graph2.setTimeRangeEnd(endDate);
}
}
この例では、graph2変数はページのバッキングBeanでUIGraphとして宣言されています。ユーザーがマスター・グラフで時間セレクタの範囲を変更すると、リスナーのコードによってディテール・グラフに新しい時間範囲が設定されます。
グラフに時間セレクタを追加するには:
構造ウィンドウでdvt:<type>Graphコンポーネントを右クリックし、「GraphTypeの中に挿入」→「ADFデータ視覚化」→「時間セレクタ」と選択します。
dvt:timeSelectorノードを右クリックして、「プロパティに移動」を選択します。
プロパティ・インスペクタで、次の属性の値を入力します。
「ExplicitStart」フィールドに、時間範囲の初期の開始日を返すメソッドへの参照を指定します。
たとえば、timeSelectorDemoという名前のBeanと、例22-13で参照されているgetTimeAxisStartDate()メソッドの場合は、初期日付に#{timeSelectorDemo.timeAxisStartDate}と入力します。
「ExplicitEnd」フィールドに、時間範囲の初期の終了日を返すメソッドへの参照を指定します。
Mode属性のドロップダウン・メニューから「EXPLICIT」を選択して、時間セレクタの表示を有効にします。デフォルトでは、この属性はOFFに設定されています。
FillColor属性のドロップダウン・メニューから、時間セレクタの塗りつぶしの色を選択します。
時間セレクタの背後のデータ・ポイントを表示するには、「透明度」スライダを使用して100%.未満の値を選択します。
デフォルトでは、色は6桁の16進数のRGB値として定義されます。時間セレクタが表示されると、タイム・セレクタの背後のデータは非表示になります。データを表示するには、色の値の前に2桁を追加して、時間セレクタの透明色を有効にします。たとえば、図22-43では、塗りつぶしの色は#88c6d6ffと定義されています。
オプションで透明色を有効にするには、FillTransparentのドロップダウン・メニューからTRUEを選択します。
FillTransparentとBorderTransparentをTRUEに設定すると、時間セレクタは表示されなくなりますが、ユーザーが選択することはできます。
BorderColor属性のドロップダウン・メニューから、時間セレクタの枠線の色を選択します。
オプションで透明色を有効にするには、BorderTransparentのドロップダウン・メニューからTRUEを選択します。
オプションで、「TimeSelectorListener」フィールドに、時間セレクタのリスナーを返すメソッドへの参照を指定します。
たとえば、timeSelectorDemoという名前のBeanと、例22-14で参照されているprocessTimeSelectorEventメソッドの場合は、時間セレクタのリスナーに#{timeSelectorDemo.processTimeSelectorEvent}と入力します。
例22-15に、時間セレクタの例に対応するJSFページのコードを示します。
ディテール・グラフを作成した場合は、ディテール・グラフが明示的な時間範囲を使用するように更新し、時間セレクタが変更されると時間範囲が更新されるように構成します。
構造ウィンドウで、ディテール・グラフのノードを右クリックして、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「外観」セクションを開きます。
TimeRangeMode属性のドロップダウン・メニューから、「TRM_EXPLICIT」を選択します。
「TimeRangeStart」フィールドに、時間範囲の開始時間を返すメソッドへの参照を指定します。
たとえば、timeSelectorDemoという名前のBeanと、例22-14で参照されているgetTimeAxisStartDate()メソッドの場合は、初期日付に#{timeSelectorDemo.timeAxisStartDate}と入力します。
「TimeRangeEnd」フィールドに、時間範囲の終了時間を返すメソッドへの参照を指定します。
プロパティ・インスペクタで「動作」セクションを展開します。
「PartialTriggers」フィールドにマスター・グラフのIDを入力して、ユーザーが時間セレクタの範囲を変更したときにディテール・グラフを更新できるようにします。
たとえば、図22-43の折れ線グラフのIDを参照する場合は、::graph1と入力します。また、PartialTriggersのドロップダウン・メニューから「編集」を選択して、部分トリガーを選択することもできます。
アラートは、エラーや警告など、個別の記号で強調表示する必要のあるデータ・ポイントをグラフ上に定義します。アイコンはアラートの場所を示します。カーソルをアラート・アイコン上に移動すると、そのアラートのテキストが表示されます。アラートは、dvt:alertタグを使用してグラフにいくつでも定義できます。アラートはグラフ・タグの子であるdvt:alertSetタグにラップされます。例22-16に、面グラフのアラートのセットを示します。
例22-16 グラフのアラートのセットのサンプル・コード
<dvt:areaGraph>
<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:areaGraph>
注釈は、カーソルがデータ値上に移動するときに情報を提供するために、グラフ上のデータ値に関連付けられています。1つのグラフにはdvt:annotationタグを使用していくつでも注釈を定義でき、複数の注釈を1つのデータ値に関連付けることができます。注釈は、グラフ・タグの子であるdvt:annotationSetタグにラップされます。
注釈に関連付けられたデータ・マーカーは、dvt:annotationタグの次の属性を使用して定義されます。
series - グラフの系列のゼロベースの索引を指定します。ほとんどのグラフでは、各系列が同じ色のマーカー・セットとして表示されます。たとえば、複数円グラフでは、黄色の各区分が靴の売上を表し、緑の各区分がブーツの売上を表す場合があります。棒グラフでは、黄色の棒がすべて靴の売上を表し、緑の棒がブーツの売上を表す場合があります。
group - グラフのグループのゼロベースの索引を指定します。グループの表示は、グラフ・タイプによって異なります。集合棒グラフでは、棒の各集合が1つのグループになります。積上げ棒グラフでは、各積層がグループです。複数円グラフでは、各円がグループです。
例22-13に、面グラフの注釈のセットを示します。
例22-17 注釈のセットのサンプル・コード
<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です。
アプリケーションでFusionテクノロジ・スタックが使用される場合、ドリル可能なグラフを作成できます。ドリル可能なグラフはADFデータ・コントロールにバインドされ、面、線またはマーカーで表示されるデータの詳細なビューを表示します。グラフをドリル可能にするには、<type>GraphコンポーネントのdrillingEnabled属性をtrueに設定します。デフォルト値はfalseです。
また、グラフのページ定義ファイルを更新してドリル階層を定義し、集計データの表示方法を指定する必要があります。データバインドされたグラフにドリル・サポートを追加する方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたグラフの作成に関する項を参照してください。
ADF Facesフレームワークには、ページ上の場所から別の場所へアイテムをドラッグ・アンド・ドロップする機能があります。バブル・グラフと散布図は、子のaf:dragSourceコンポーネントを追加し構成することにより、マーカーをグラフの描画エリアのある位置から別の位置へ移動できるドラック・ソースとして構成できます。XおよびY位置のあるすべてのデータ軸グラフは、子のaf:dropTargetコンポーネントを追加し構成することにより、バブル・グラフ・マーカーを棒グラフに挿入するなど、ドロップ・ターゲットとして構成できます。
グラフは、次の操作をサポートするように構成できます。
グラフ間
グラフから別のADFコンポーネントへのドラッグ
グラフの描画エリア内での散布/バブル・マーカーのドラッグ
別のコンポーネントへの散布/バブル・マーカーのドラッグ
複数のマーカーのドラッグ
たとえば、バブル・グラフ内のデータ・マーカーをドラッグして表ビューでそれらの値を表示したり、逆に、表からバブル・グラフで表示するためにデータ値をドラッグしたりできます。図22-45に、ドラッグ元として構成されたバブル・グラフと、この機能を果たすためのドロップ・ターゲットを示します。
始める前に:
グラフの属性やグラフの子コンポーネントが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、22.2.2項「グラフの構成」を参照してください。
ページにすでにグラフが存在している必要があります。ない場合は、この章の指示に従ってグラフを作成します。詳細は、22.2.3項「ページへのグラフの追加方法」を参照してください。
ドラッグ元としての表コンポーネントとドロップ・ターゲットを作成し構成しておく必要があります。例22-18に、表作成のサンプル・コードを示します。
例22-18 表のドラッグ元およびドロップ・ターゲットのサンプル・コード
<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>
バブル・グラフにドラッグ・アンド・ドロップを追加する手順:
構造ウィンドウで「dvt:bubbleGraph」コンポーネントを右クリックし、「dvt:bubbleGraphの中に挿入」→「ADF Faces」→「ドラッグ元」を選択します。
プロパティ・インスペクタで次の属性を設定します。
Actions: このドラッグ元でサポートされるドラッグ・アンド・ドロップ・アクションを指定します。アクションは、使用可能な値(COPY、LINK、MOVE)をどの順序でも、空白区切りですべて大文字のリストにする必要があります。デフォルト値はCOPYです。
DefaultAction: このドラッグ元でサポートされるデフォルトのドラッグ・アンド・ドロップ・アクションを指定します。指定可能なアクションは、COPY、MOVEまたはLINKです。
Discriminant: このドラッグ元により生成されるデフォルトのDataFlavorsの識別値を指定します。識別値は、このドラッグ元からのドラッグを識別するために使用されます。ドラッグ・アンド・ドロップは、互換性のあるドラッグ元とドロップ・ターゲット間でのみ実行できることに注意してください。識別値は、互換性維持の目的で使用されます。デフォルトのドラッグ元によって生成されるDataFlavorsの識別値は、ドロップ・ターゲットの許可されたDataFlavors上の許可された識別値と一致する必要があります。
構造ウィンドウで「dvt:bubbleGraph」コンポーネントを右クリックし、「dvt:bubbleGraphの中に挿入」→「ADF Faces」→「ドロップ・ターゲット」を選択します。
「ドロップ・ターゲットの挿入」ダイアログで、コンポーネントでドロップが発生したときに呼び出されるoracle.adf.view.rich.event.DropEvent dropEventメソッドへの参照を評価するEL式として「DropListener」を指定します。
「データ・フレーバの挿入」ダイアログで、このDataFlavorの完全修飾Javaクラス名であるFlavorClassを指定します。ドロップがこのDataFlavorを含むとき、ドロップ・ターゲットではDataFlavorを使用して、このJavaタイプを持つドロップからオブジェクトを取得することが保証されます。
例22-19に、バブル・グラフにドラッグ・アンド・ドロップ操作を追加するためのサンプル・コードを示します。
例22-19 バブル・グラフのドラッグ・アンド・ドロップのサンプル・コード
<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>
グラフの子コンポーネントseriesSetは、情報を提供したり、エンド・ユーザーからの入力を要求したりするポップアップのダイアログ、ウィンドウおよびメニューが表示されるように構成できます。af:popupコンポーネントを他のADF Facesコンポーネントで使用すると、セカンダリ・ウィンドウでの情報の表示および非表示、追加データの入力、コンテキスト・メニューなどの機能の呼出しを、エンド・ユーザーに許可する機能を構成できます。
ADF Facesのコンポーネントでは、ポップアップの表示または非表示にJavaScriptは不要です。af:showPopupBehaviorタグは宣言的ソリューションとなるため、popupコンポーネントを開くためのJavaScriptの作成や、スクリプトのpopupコンポーネントへの登録の必要がありません。これらのコンポーネントの詳細は、第15章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。
たとえば、ノート・ウィンドウで情報を表示するポップアップを散布図の系列内のデータ・マーカーと関連付けることができます。図22-46に、データ・マーカーをクリックして、ノート・ウィンドウに特定のマーカーに関するデータを示すゲージを表示した散布図を示します。
始める前に:
グラフの属性やグラフの子コンポーネントが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、22.2.2項「グラフの構成」を参照してください。
ページにすでにグラフが存在している必要があります。ない場合は、この章の指示に従ってグラフを作成します。詳細は、22.2.3項「ページへのグラフの追加方法」を参照してください。
グラフの系列でデータ・ポイントが参照するポップアップ・コンポーネントを作成しておく必要があります。例22-20に、グラフの系列のデータ・ポイントにカーソルを合せると参照されるポップアップのサンプル・コードを示します。
例22-20 グラフ系列のノート・ウィンドウのサンプル・コード
<af:popup id="noteWindowPopup" 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>
グラフの系列セットにポップアップを追加する手順:
構造ウィンドウでグラフの子の「dvt:seriesSet」コンポーネントを右クリックし、「dvt:seriesSetの中に挿入」→「ポップアップ表示動作」を選択します。
プロパティ・インスペクタで次の属性を設定します。
PopupId: seriesSetコンポーネントによって参照されるポップアップのIDを入力します。コロン1つで始まるIDは、コロンを除いた後、絶対値として扱われます。
TriggerType: 表示されるポップアップをトリガーするイベント・タイプを入力します。グラフseriesSetコンポーネントの有効な値は、action、clickおよびmouseHoverです。
Align: ドロップダウン・リストから、ポップアップをどのようにseriesSetコンポーネントと位置合せするかを選択します。
AlignID: ポップアップと関連付けられたseriesSetコンポーネントのIDを入力します。コロン1つで始まるIDは、コロンを除いた後、絶対値として扱われます。
例22-21に、ポップアップ・コンポーネントをグラフの系列セットに関連付けるためのサンプル・コードを示します。
例22-21 系列セット・コンポーネントに関連付けられたポップアップのサンプル・コード
<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="#{viewcontrollerBundle.SALES_IN_MILLIONS}"/>
<dvt:y1Title text="#{viewcontrollerBundle.QUOTA_IN_MILLIONS}"/>
<dvt:graphTitle text="#{viewcontrollerBundle.SALES_PERFORMANCE}"/>
<dvt:graphSubtitle text="#{viewcontrollerBundle.FY08}"/>
</dvt:scatterGraph>
コンテキスト・メニューは、次のコンテキスト・メニュー・ファセットを使用して、グラフ・コンポーネント用に定義できます。
bodyContextMenu: グラフ・コンポーネント内の選択不可能な要素で表示されるコンテキスト・メニューを指定します。
contextMenu: グラフ・コンポーネント内の選択可能要素で表示されるコンテキスト・メニューを指定します。
multiSelectContextMenu: グラフ・コンポーネント内で複数の要素が選択されるときに表示されるコンテキスト・メニューを指定します。
各ファセットでは、1つの子コンポーネントがサポートされます。これらのファセットすべてを機能させるには、特定のグラフ・タイプ用に選択を有効にし、サポートされるようにする必要があります。コンテキスト・メニューは、現在のところFlashでのみサポートされています。
技術的な制限のために、Flashのレンダリング形式の使用時には、現在のところコンテキスト・メニューのコンテンツはFlash Playerのコンテキスト・メニューを使用して表示されます。このため、Flash Playerにより定義されたいくつかの制限があります。詳細は、21.2.4項「グラフおよびゲージのコンテキスト・メニュー」を参照してください。
たとえば、図22-47は、カスタム・メニュー項目が表示された散布図のコンテキスト・メニューを示しています。
例22-22に、散布図のコンテキスト・メニューを構成するためのサンプル・コードを示します。
例22-22 散布図のコンテキスト・メニューのサンプル・コード
<dvt:scatterGraph binding="#{contextMenu.graph}" subType="SCATTER"
dataSelection="multiple" id="graph">
<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>
例22-23に、カスタム・コンテキスト・メニューを作成するマネージドBeanのサンプル・コードを示します。
例22-23 カスタム・コンテキスト・メニューを作成するためのマネージドBean
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);
}
}
}
