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

この付録では、ADFデータ視覚化ツール(DVT)のparetoGraphおよびstockGraphのサーバー側コンポーネントを使用し、簡単なUI優先開発を使用してグラフにデータを表示する方法を説明します。この章では、データ要件、タグ構造、およびコンポーネントの見え方や動作をカスタマイズするためのオプションを定義します。

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

この章の内容は次のとおりです。

• H.1項「グラフ・コンポーネントの概要」

• H.2項「グラフ・コンポーネントの使用方法」

• H.3項「グラフ表示要素のカスタマイズ」

• H.4項「グラフ・テキスト、色およびデータ値の書式設定」

• H.5項「データの系列およびグループの外観のカスタマイズ」

• H.6項「グラフへのアニメーションの使用」

• H.7項「特殊効果のグラフへの追加」

DVTチャート・コンポーネントはグラフでデータを表示するためのクライアント側のコンポーネントです。チャート・コンポーネントには、面グラフ、棒グラフ、バブル・チャート、組合せグラフ、ファンネル・チャート、折れ線グラフ、円グラフ、極グラフ、レーダー・グラフ、散布図およびスパーク・チャートがあります。DVTチャート・コンポーネントの詳細は、第24章「チャート・コンポーネントの使用方法」を参照してください。

H.1 グラフ・コンポーネントの概要

グラフ・コンポーネントは、様々なパレートおよび株価チャートの機能を提供します。このコンポーネントでは、複数軸の複数データ・ポイントを様々な方法で評価できます。たとえば、一群のグラフにより、あるグループからの結果と他のグループからの結果の比較が容易になります。

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

大半のグラフでは、系列は同じ色のマーカーのセットとして表示されます。通常、グラフの凡例に、各系列の識別子と対応する色が表示されます。たとえば、レーダー・グラフでは、ある製品の売り上げを赤色の線で、ブーツの売り上げを青色の線で示すことができます。

グループの表示は、グラフ・タイプによって異なります。たとえば、パレート・グラフでは、それぞれの棒がグループになります。グループは年などの期間を表す場合もあります。グループは、地域などのカテゴリ・データを表すこともあります。

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

グラフ・コンポーネントには2種類のグラフがあり、データの表示に使用できます。JDeveloperは、使用可能なグラフのカテゴリを表示するコンポーネント・パレットを提供しています。図H-1に、グラフ・コンポーネントをハイライト表示したグラフのコンポーネント・パレットを示します。

図H-1 グラフのコンポーネント・パレット

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

図H-2 「始値 -高値 - 安値 - 終値ローソク・グラフの作成」ダイアログの株価チャート・タイプ

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

• パレート: 棒と棒の累積割合を示すパーセンテージ線でデータを表します。各棒は、交通事故の原因など、異なる不具合の原因を表します。それぞれの棒は、最大数の事象から最小数の事象まで、値別に配置されます。パレート・グラフは常に二重Yグラフで、1つ目のY軸は棒が表す値に対応し、2つ目のY軸は0%から100%を表し、累積割合の値に対応します。パレート・グラフを使用して、不具合の原因を特定し、比較します。パレート・グラフにはバリエーションはありません。

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

  図H-3 パレート・グラフの例

  
  

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

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

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

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

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

  
  

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

  図H-5 ローソク足株価チャートの例

  
  

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

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

H.1.2.1 グラフ・レイアウト

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

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

H.1.2.2 サイズ

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

H.1.2.3 イメージ形式

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

H.1.2.4 データ・マーカー選択

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

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

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

H.1.2.5 コンテキスト・メニュー

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

• コンポーネント内で選択できない領域に表示されるコンテキスト・メニュー(描画エリアなど)

• 選択可能要素(散布図のマーカーなど)で表示されるコンテキスト・メニュー

• 複数選択可能要素で表示されるコンテキスト・メニュー

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

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

H.1.2.6 参照面/線およびアラート

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

図H-9 棒グラフでのアラート

H.1.2.7 系列の非表示および表示

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

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

H.1.2.8 注釈

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

図H-11 折れ線グラフの注釈

H.1.2.9 ポップアップのサポート

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

図H-12 散布図内のポップアップ

H.1.2.10 時間セレクタ

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

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

H.1.2.11 双方向サポート

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

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

H.1.2.12 ドラッグ・アンド・ドロップ

他のADFコンポーネントからのドロップをサポートしているドロップ・ターゲットとして、パレートおよび株価チャートを構成できます。

H.1.2.13 スクリーン・リーダーのサポート

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

H.2 グラフ・コンポーネントの使用方法

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

• 幾何学的:一部のグラフ・タイプでは、データの表示に特定の数のデータ・ポイントが必要です。たとえば、線には最低2つの点が必要なため、折れ線グラフには最低2グループのデータが必要です。

• 複雑:一部のグラフ・タイプでは、マーカー(グラフで実際にデータを表すコンポーネント)ごとに複数のデータ・ポイントが必要です。たとえば、散布図では、X軸とY軸に沿ってマーカーを置けるよう、グループごとに2つの値が必要です。各グループに必要なデータ・ポイントがグラフに使用したデータにない場合、グラフ・コンポーネントでは可能な範囲でグラフを表示します。

• 論理的:一部のグラフ・タイプでは特定の種類のデータを受容しません。次に例を示します。

  • 負のデータ:円グラフまたはパーセンテージ棒グラフ、折れ線グラフ、面グラフには負のデータを渡すことはできません。パーセンテージ・グラフでは負のデータに対するマーカーは表示されません。

  • nullまたはゼロのデータ:nullデータに対するマーカーは生成されないため、nullデータのマーカーは表示されません。また、グラフがゼロ・データを受け取り、軸線がゼロにある場合、マーカーは見えません。ただし、軸線がゼロ以外にある場合、ゼロ・マーカーは見えます。

  • 不十分なデータ・セット(系列): 二重Yグラフでは、Y軸ごとにデータ・セットが必要です。通常、セットごとに異なる情報を表します。たとえば、Y1軸は特定の国および期間の売上げを表し、Y2軸はすべての国の売上げ合計を表します。Y軸データを1セットのみ渡した場合、グラフは2つの異なるY軸にデータを表示できません。データは1つのY軸に表示されます。

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

• 絶対面グラフ。

• 積上げ面グラフ。

• パーセンテージ面グラフ。

H.2.1 グラフ・タイプのデータ要件

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

• ファンネル・グラフ:

  • ファンネル・グラフには最低2系列(データ・セット)が必要です。これらの2セットのデータは、目標データ値と実績データ値となります。しきい値はグラフの凡例に表示されます。

    ファンネル・グラフのもう1つのバリエーションでは、1セットのデータのみが必要で、ここに表示されるデータ値は合計値の割合です。このタイプのファンネル・グラフを作成するには、グラフのfunnelPercentMeasureプロパティをTrueに設定する必要があります。この設定は、グラフ用のXMLで行います。

  • ファンネル・グラフでは、最低1グループのデータをステージとして使用する必要があります。

• パレート・グラフ:

  • パレート・グラフには最低2グループのデータが必要です。

  • パレート・グラフは負の数値を持つことができません。

  • パレート・グラフに複数セットのデータを渡した場合、最初のデータ・セットのみが使用されます。

  • パレート・グラフに対するデータの一部としてパーセンテージ値を渡さないでください。グラフは渡されたデータを基にパーセンテージを計算します。

• レーダー・グラフ:

  レーダー・グラフには最低3グループのデータが必要です。データ構造は次のとおりです。

  • 多角形の辺の数とデータのグループの数は同数です。多角形の各角がグループを表します。

  • データの系列またはセットは、線またはすべて同じ色のマーカー、あるいはその両方で示されます。凡例テキストでラベル付けされます。

• 株価チャート:

  • 株価: 高値-安値-終値

    • 各株価マーカーには、高値、安値、終値の順の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つの株のみの値を表示できます。このため、これらのグラフには凡例は表示されず、グラフのタイトルに系列のラベル(株式名)を示します。

H.2.2 グラフの構成

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

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

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

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

  グラフ・タグ	説明	サブ・タイプ
  funnelGraph	プロセスの段階に関連するデータを視覚的に表します。ステップは、横向きの円錐形のセクションに対する縦向きのスライスとして表されます。	FUNNEL
  paretoGraph	棒と棒の累積割合を示すパーセンテージ線でデータを表します。	PARETO
  radarGraph	円形の折れ線グラフとして表されます。	RADAR_LINE
  scatterGraph	データをデータ・マーカーの位置で表します。散布図では、極グラフとして方向性を持ってデータを表示できます。	SCATTER SCATTER_2Y POLAR
  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

  
  

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

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

  表H-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軸のカスタマイズ。

  
  

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

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

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

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

  
  

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

  例H-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>
  

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

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

  表H-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	グラフの数値データの値の書式設定。
  paretoLine paretoMarker	パレート・グラフのカスタマイズ。
  stockMarker stockVolumeformat volumeMarker	株価チャートのカスタマイズ。

  
  

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

H.2.3 ページへのグラフの追加方法

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

図H-15 「ファンネル・グラフの作成」ダイアログ

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

プロパティ・インスペクタで、プロパティ・フィールドの上にマウスを置くと表示されるアイコンをクリックして、プロパティの説明を表示またはオプションを編集することができます。図H-16に、棒グラフ・コンポーネントのvalue属性のドロップダウン・メニューを示します。

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

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

始める前に:

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

次のタスクを実行する必要があります。

1. 2.2項「アプリケーション・ワークスペースの作成」で説明されているように、アプリケーション・ワークスペースを作成します。

2. 2.4項「ビュー・ページの作成」で説明されているように、ビュー・ページを作成します。

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

1. コンポーネント・パレットで、「ADFデータ視覚化」ページの「グラフとゲージ」パネルから希望するグラフのカテゴリをページにドラッグ・アンド・ドロップし、「グラフの作成」ダイアログを開きます。

2. ダイアログを使用して、グラフ・タイプと、グラフ・タイトル、凡例およびラベルの表示用クイック・スタート・レイアウトを選択します。ダイアログのヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。

3. 「OK」をクリックしてグラフをページに追加します。

4. プロパティ・インスペクタで、グラフの属性を表示します。ヘルプ・ボタンを使用して、グラフ・タイプ・コンポーネントの完全なタグ・ドキュメントを表示します。

5. 「共通」セクションを開きます。このセクションを使用して、次の属性を設定します。

   • 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グラフ。

6. 「グラフ・データ」セクションを開きます。次のフィールドの値を設定して、グラフのデータ値を指定します。

   • Value: EL式を使用してデータ・モデル(DataModelのインスタンス)を指定します。または、メトリック値をJava.lang.NumberオブジェクトまたはStringのいずれかとして設定します。

   • TabularValue: または、表形式のデータ・セットをJava.util.Listオブジェクトとして指定します。詳細は、H.2.5項「表形式のデータを使用したグラフの作成方法」を参照してください。

7. 「外観」セクションを開きます。次のフィールドの値を設定して、表示属性を指定します。

   • ShortDesc: グラフの目的およびスクリーン・リーダーで使用するための構造の説明を入力します。

   • EmptyText: グラフにデータがない場合に表示するエラー・テキストを指定します。

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

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

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

例H-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>

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

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

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

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

図H-17 年間売上高の比較

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

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

• 2つ目のメンバー(索引1)は、データ値のグリッドの行ラベルです。これは通常Stringです。行ラベルはグラフで系列ラベルとして、通常、凡例に表示されます。

• 3つ目のメンバー(索引2)はデータ値で、通常Doubleです。

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

例H-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;
}

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

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

始める前に:

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

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

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

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

1. 「構造」ウィンドウで「dvt:typeGraph」ノードを右クリックし、「プロパティに移動」を選択します。

2. 「プロパティ・インスペクタ」で、「グラフ・データ」セクションを開きます。

3. 「TabularData」属性のドロップダウン・メニューから、「式ビルダー」を選択します。

4. 「式ビルダー」ダイアログで検索ボックスを使用してグラフのマネージドBeanを検索します。

5. マネージドBeanのノードを展開し、表形式データのリストを含むメソッドを選択します。

6. 「OK」をクリックします。

   式が作成されます。

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

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

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

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

• oracle.adf.view.rich.dvt.DEFAULT_IMAGE_FORMAT

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

• スキン・スタイル

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

• flash-player-usage

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

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

• Flash (Flash Playerが使用可能な場合)。

• Portable Network Graphics (PNG)出力形式。PNG出力形式は、グラフの印刷時にも使用されます。静的レンダリングは、PNG出力形式使用時には完全にサポートされますが、次のような一部のインタラクティブ機能は使用できません。

  • アニメーション

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

  • ドラッグ・アンド・ドロップ・ジェスチャ

  • 円グラフのスライスのインタラクティブ動作

  • 参照オブジェクトのホバー動作

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

  • 選択項目

  • 系列のロールオーバー動作

H.2.7 ビジュアル・エディタおよびプロパティ・インスペクタでのグラフの編集

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

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

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

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

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

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

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

H.3 グラフ表示要素のカスタマイズ

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

H.3.1 グラフのサイズとスタイルの変更

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

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

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

始める前に:

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

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

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

1. 「構造」ウィンドウで「dvt:typeGraph」ノードを右クリックし、「プロパティに移動」を選択します。

2. 「プロパティ・インスペクタ」の「スタイル」セクションで、グラフ・タグのinlineStyle属性の値を入力します。

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

H.3.1.2 グラフの動的サイズ変更の指定方法

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

始める前に:

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

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

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

1. 「構造」ウィンドウで「dvt:typeGraph」ノードを右クリックし、「プロパティに移動」を選択します。

2. 「プロパティ・インスペクタ」の「動作」セクションで、DynamicResize属性のドロップダウン・リストから「DYNAMIC_SIZE」を選択します。

3. 「スタイル」セクションで、InlineStyle属性の幅と高さに、ピクセルの定数または相対的割合を入力します。

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

   
   

   ベスト・プラクティスのヒント: 100%の幅を指定する場合は、StyleClassをAFStretchWidthに設定します。

   
   

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

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

始める前に:

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

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

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

1. 「構造」ウィンドウで「dvt:typeGraph」ノードを右クリックし、「プロパティに移動」を選択します。

2. 「プロパティ・インスペクタ」で、「スタイル」セクションを開きます。

3. StyleClass属性に、グラフに使用するCSSスタイル・クラスの名前を入力します。

4. プロパティ・エディタで、グラフに使用するCSSスタイル・クラスを選択します。

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

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

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

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

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

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

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

• 背景:グラフがプロットされる領域。

• 描画エリア:円グラフ以外のすべてのグラフでデータがプロットされるフレーム。描画エリアの最低2つの境界に軸が表示されます。

• 円フレーム:軸を使用しない円グラフがプロットされるフレーム。

始める前に:

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

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

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

1. グラフの背景をカスタマイズする場合は、次のようにします。

   1. 構造ウィンドウでdvt:backgroundノードを右クリックし、「プロパティに移動」を選択します。

   2. 背景の塗りつぶしの色を変更するには、FillColor属性のドロップダウンから「編集」を選択し、プロパティ・エディタで使用する色を選択します。

2. 円グラフ以外のグラフの描画エリアをカスタマイズする場合は、次のようにします。

   1. 構造ウィンドウでdvt:graphPlotAreaノードを右クリックし、「プロパティに移動」を選択します。

   2. プロパティ・インスペクタで、属性ドロップダウン・メニューを使用して、描画エリアのBorderColorおよびFillColor属性に対してカスタマイズする色を選択します。

3. 円グラフの描画エリアをカスタマイズする場合は、次のようにします。

   1. 構造ウィンドウでdvt:graphPieFrameノードを右クリックし、「プロパティに移動」を選択します。

   2. プロパティ・インスペクタで、属性ドロップダウン・メニューを使用して、描画エリアのBorderColorおよびFillColor属性に対してカスタマイズする色を選択します。

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

H.3.2.2 グラフのタイトルと脚注の指定方法

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

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

始める前に:

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

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

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

1. グラフのタイトルを入力する場合は、次のようにします。

   1. 「構造」ウィンドウで、「dvt:typeGraph」ノードを右クリックし、「GraphTypeの中に挿入」→「ADFデータ視覚化」→「dvt:graphTitle」を選択します。

   2. プロパティ・インスペクタを使用してdvt:graphTitleタグの属性に値を指定します。

   3. テキストに特定のフォント特性を指定する場合は、「構造」ウィンドウで「dvt:graphTitle」ノードを右クリックし、「dvt:graphTitleの中に挿入」→「dvt:graphFont」を選択します。

   4. プロパティ・インスペクタを使用してdvt:graphFontタグの属性に値を指定します。

2. グラフのサブタイトルを入力する場合は、次のようにします。

   1. 「構造」ウィンドウで、「dvt:typeGraph」ノードを右クリックし、「GraphTypeの中に挿入」→「ADFデータ視覚化」→「dvt:graphSubtitle」を選択します。

   2. プロパティ・インスペクタを使用してdvt:graphSubtitleタグの属性に値を指定します。

   3. テキストに特定のフォント特性を指定する場合は、「構造」ウィンドウで「dvt:graphSubtitle」ノードを右クリックし、「dvt:graphSubtitleの中に挿入」→「dvt:graphFont」を選択します。

   4. プロパティ・インスペクタを使用してdvt:graphFontタグの属性に値を指定します。

3. グラフの脚注を入力する場合は、次のようにします。

   1. 「構造」ウィンドウで、「dvt:typeGraph」ノードを右クリックし、「GraphTypeの中に挿入」→「ADFデータ視覚化」→「dvt:graphFootnote」を選択します。

   2. プロパティ・インスペクタを使用してdvt:graphFootnoteタグの属性に値を指定します。

   3. テキストに特定のフォント特性を指定する場合は、「構造」ウィンドウで「dvt:graphFootnote」ノードを右クリックし、「dvt:graphFootnoteの中に挿入」→「dvt:graphFont」を選択します。

   4. プロパティ・インスペクタを使用してdvt:graphFontタグの属性に値を指定します。

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

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

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

  順序軸の例は、縦棒グラフの描画エリアの下部を横切る線です。この軸上の値は、標示されているデータの程度は示しません。そのかわり、データが属する異なるグループを示します。

• X1軸:X1軸は、グラフの横軸に沿って表示される値を示します。この軸は、グループ・ラベルではなく、一定間隔の数値を持ちます。X軸とも呼ばれます。X1軸は、バブル・グラフおよび散布図で表示されます。

• Y1軸:Y1軸は、第1Y軸です。通常、描画エリアの左側の縦方向の値軸です。一定間隔の数値を持ちます。

• Y2軸:Y2軸は、第2Y軸です。通常、描画エリアの右側の縦軸です。一定間隔の数値を持ちます。

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

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

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

• タイトル:軸のタイトルのテキストと位置合せを指定します。dvt:o1Title、dvt:x1Title、dvt:y1Titleおよびdvt:y2Titleのタグがあります。適切なタイトル・タグを使用しないと、軸にタイトルは表示されません。

• 軸: 色、線幅、スケーリング、ティック・マーク間の増分、軸の可視性および特定のグラフ・タイプでのスクロールを制御します。dvt:o1Axis、dvt:x1Axis、dvt:y1Axisおよびdvt:y2Axisのタグがあります。

  
  

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

  
  

始める前に:

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

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

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

1. 「構造」ウィンドウで、「dvt:typeGraph」ノードを右クリックし、「GraphTypeの中に挿入」→「ADFデータ視覚化」→「dvt:AxisTypeTitle」を選択します。

   たとえば、棒グラフのo1軸のタイトルを設定するには、「棒の中に挿入」→「ADFデータ視覚化」→「dvt:O1Title」を選択します。

2. プロパティ・インスペクタで、軸のタイトルを入力し、必要に応じてこのタグの他の属性に値を指定します。

3. タイトルのフォント属性を指定する場合は、次のようにします。

   1. 「構造」ウィンドウで、「dvt:typeTitle」ノードを右クリックし、「タイトルの中に挿入」→「dvt:graphFont」を選択します。

   2. プロパティ・インスペクタで、フォントの特性に値を入力します。

H.3.3.2 軸でのスクロールの指定

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

• dvt:o1Axis、dvt:y1Axisおよびdvt:y2Axisタグの面、棒および折れ線グラフ。

• dvt:x1Axis、dvt:y1Axisおよびdvt:y2Axisタグのバブル・グラフおよび散布図。

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

• off: スクロールは無効です(デフォルト)。

• on: スクロールは有効で、スクロールバーが常に表示されます。

• asNeeded: スクロールは有効ですが、スクロールバーは最初表示されません。グラフでズームすると、スクロールバーが表示され、そのセッション中は表示されたままになります。

• hidden: スクロールは有効ですた、スクロールバーは常に非表示です。ユーザーはパン・スクローリングを使用できます。

H.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子タグを持つこともできます。

始める前に:

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

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

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

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

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

2. プロパティ・インスペクタで、必要に応じて次のプロパティに値を入力します。

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

     
     

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

     
     

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

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

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

1. 「構造」ウィンドウで、「dvt:typeGraph」ノードを右クリックし、「GraphTypeの中に挿入」→「ADFデータ視覚化」→「dvt:x1MajorTick」を選択します。

2. 「プロパティ・インスペクタ」で、このタグの属性に目的の値を入力し、「ティック・ラベルの構成」ボタンをクリックして、dvt:x1TickLabelタグをグラフに追加します。

3. 「プロパティ・インスペクタ」で、dvt:x1TickLabelに目的の値を入力し、必要に応じて「フォントの構成」ボタンをクリックして、ティック・ラベルのフォント特性を指定します。

4. グラフで副ティックを指定する場合は、次のようにします。

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

   2. プロパティ・インスペクタで、フォントの特性に値を入力します。

      
      

      注意: tickStyle属性には、GS_NONEまたはGS_AUTOMATIC以外の値を指定する必要があります。

      
      

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

H.3.3.4 軸の数値の書式設定

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

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

これらの軸の数値を書式設定するには、H.4.4項「グラフのデータ値の書式設定」に示す、適切な軸に対する子タグを挿入します。

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

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

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

始める前に:

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

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

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

1. 「構造」ウィンドウで「dvt:y1Axis」ノードを右クリックし、「プロパティに移動」を選択します。

2. プロパティ・インスペクタで、Y1軸の最初の値をAxisMinValueフィールドに入力します。

3. AxisMinAutoScaledフィールドで、属性ドロップダウン・リストから「false」を選択します。

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

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

H.3.4 グラフの凡例のカスタマイズ方法

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

• グラフに関連する凡例エリアの色、枠、可視性、位置およびスクロール可能性を指定するdvt:legendAreaタグ。

• 凡例の色付けされた各エントリに関連するテキストのフォント特性と位置を指定するdvt:legendTextタグ。

• 凡例エリアのオプションのタイトルとフォント特性を指定するdvt:legendTitleタグ。

始める前に:

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

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

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

1. 構造ウィンドウでdvt:legendAreaノードを右クリックし、「プロパティに移動」を選択します。

2. プロパティ・インスペクタを使用して、このタグの属性に値を指定します。たとえば、凡例エリアには次の属性を指定できます。

   • AutomaticPlacementおよびPosition: グラフの右または下部での凡例エリアの自動配置を、デフォルト値AP_ALWAYSで指定します。AP_NEVERでの値の設定には、凡例エリアの配置に使用されるposition属性の値が必要です。

   • Scrolling: 使用可能なスペースより大きなスペースが必要な場合、asNeededの値を使用して、汎用エリアでのスクロールを指定します。デフォルトではこの値はoffに設定されています。

   • PositionHint: 円グラフ、極グラフおよびレーダー・グラフで、値alignToCenterを使用して、描画エリアの中央方向に凡例の位置を指定します。デフォルトでは、値は、グラフ枠のエッジ方向へ凡例を配置するalignToEdgeに設定されます。

   • MaxWidth: 凡例エリアの最大幅をグラフ・エリアのパーセンテージとして指定します。デフォルトでは、この値は空の文字列に設定されており、この場合は幅がグラフの設定値に基づいて自動的に設定されます。

     たとえば、凡例の最大幅をグラフ・エリアの50%に設定するには、50%と入力します。

3. 凡例テキストをカスタマイズする場合は、次のようにします。

   1. 「構造」ウィンドウで、「dvt:typeGraph」ノードを右クリックし、「GraphTypeの中に挿入」→「ADFデータ視覚化」→「dvt:legendText」を選択します。

   2. プロパティ・インスペクタを使用して、このタグの属性に値を入力します。

   3. 「dvt:legendText」ノードを右クリックし、「dvt:legendTextの中に挿入」→「dvt:graphFont」を選択します。

   4. プロパティ・インスペクタを使用して、フォント・タグの属性に値を指定します。

4. 凡例のタイトルを入力する場合は、次のようにします。

   1. 「構造」ウィンドウで、「dvt:typeGraph」ノードを右クリックし、「GraphTypeの中に挿入」→「ADFデータ視覚化」→「dvt:graphLegendTitle」を選択します。

   2. プロパティ・インスペクタを使用して、このタグの属性に値を入力します。

   3. 「dvt:legendTitle」ノードを右クリックし、「dvt:legendTitleの中に挿入」→「dvt:graphFont」を選択します。

   4. プロパティ・インスペクタを使用して、フォント・タグの属性に値を指定します。

H.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"/>

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

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

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

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

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

H.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タグを、テキストに書式設定する特定のサブコンポーネントの子として使用します。グラフのテキストの書式設定の例の詳細は、H.3.2.2項「グラフのタイトルと脚注の指定方法」を参照してください。

H.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属性を指定します。

始める前に:

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

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

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

1. グラフ・サブコンポーネント用に定義されたスキン・スタイル・セレクタを含むアプリケーションに、カスタム・スキンを追加します。次の属性の値を指定できます。

   • -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;
   }
   

   カスタム・スキンの作成の詳細は、20.2項「アプリケーションへのカスタム・スキンの適用」を参照してください。

2. trinidad-config.xmlファイルでカスタム・スキンを使用するようにアプリケーションを構成します。

   アプリケーションの構成の詳細は、20.2.4項「カスタム・スキンを使用するためのアプリケーションの構成方法」を参照してください。

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

H.4.2 グラフの一部への透明色の指定

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

• グラフの背景: dvt:backgroundタグを使用します。この要素には棒は含まれず、borderTransparent属性は適用されません。

• グラフの凡例エリア: dvt:legendAreaタグを使用します。

• グラフの円フレーム: dvt:graphPieFrameタグを使用します。

• グラフの描画エリア: dvt:graphPlotAreaタグを使用します。

H.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タグを使用します。

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

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

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

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

始める前に:

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

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

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

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

   たとえば、グラデーション特殊効果をグラフの描画エリアに設定するには、dvt:graphPlotAreaノードを見つけて、必要に応じて開きます。

2. 選択した子ノードに「dvt:specialEffects」子ノードが含まれていない場合は、ノードを右クリックし、「ChildNodeの中に挿入」→「dvt:specialEffects」を選択します。

   たとえば、グラデーション特殊効果をグラフの描画エリアに設定するには、「dvt:graphPlotArea」を右クリックし、「dvt:graphPlotAreaの中に挿入」→「dvt:specialEffects」を選択します。

3. プロパティ・インスペクタを使用してdvt:specialEffectsタグの属性に値を入力します。

   1. FillType: FT_GRADIENTを選択します。

      GradientDirectionでは、グラデーションの塗りつぶしに使用する変化の方向を選択します。

   2. NumStops: グラデーションに使用するストップの数を入力します。

4. オプションで各グラデーション・ストップの色と変化の割合を制御する場合は、構造ウィンドウでdvt:specialEffectsノードを右クリックし、「dvt:specialEffectsの中に挿入」→「dvt:gradientStopStyle」と選択します。

5. プロパティ・インスペクタを使用してdvt:gradientStopStyleタグの属性に値を入力します。

   1. StopIndex: specialEffectsタグ内に含まれるdvt:gradientStopStyleタグ内の索引としてゼロベースの整数を入力します。

   2. GradientStopColor: グラデーション内のこの部分に使用する色を入力します。

   3. GradientStopPosition: 指定した停止色のグラデーションでの相対的距離を入力します。グラデーションのスケールは0から100です。0または100が指定されない場合、これらのポイントにはデフォルトの位置が使用されます。

6. 指定するグラデーション・ストップごとに、ステップ4とステップ5を繰り返します。

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

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

例H-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>

H.4.4 グラフ内のデータ値の書式設定

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

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

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

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

例H-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のカテゴリ・データ値の書式を設定できます。

始める前に:

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

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

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

1. 「構造」ウィンドウで、「dvt:typeGraph」ノードを右クリックし、「GraphTypeの中に挿入」→「ADFデータ視覚化」→「dvt:attributeFormat」を選択します。

2. プロパティ・インスペクタで、Name属性の情報を入力します。

   たとえば、例H-5の雇用日の値を指定するには、Name属性にHiredateを入力します。

3. 「構造」ウィンドウで、指定した属性フォーマット・タグを右クリックし、「dvt:attributeFormatの中に挿入」→「dvt:convertType」を選択します。

   たとえば、引き続きHiredateの書式を設定するには、「dvt:attributeFormat」ノードを右クリックして、「dvt:attributeFormatの中に挿入」→「dvt:convertDateTime」を選択します。

4. 「構造」ウィンドウで「af:convertType」ノードを右クリックし、「プロパティに移動」を選択します。

5. プロパティ・インスペクタを使用して、コンバータ用の値を入力します。詳細は、第6章「入力の検証および変換」を参照してください。

6. 追加の属性ごとに、手順1から手順5を繰り返します。

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

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

例H-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タグを使用して日付の書式を指定する必要があります。

H.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属性を指定します。

始める前に:

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

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

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

1. 「構造」ウィンドウで「dvt:sliceLabel」ノードを右クリックし、「プロパティに移動」を選択します。

2. プロパティ・インスペクタで、TextType属性のドロップダウン・リストから「LD_VALUE」を選択し、グラフ内の円のスライスが1つの値を表すことを指定します。

3. 「プロパティ・インスペクタ」で、「区分ラベルの構成」をクリックして、ドロップダウン・メニューから「数値書式」を選択します。

4. 「プロパティ・インスペクタ」で、Type属性のドロップダウン・リストからcurrencyを選択して値を通貨として指定し、CurrencySymbol属性にドル記号($)を入力して通貨記号としてドル記号を使用します。

例H-7に、通貨として表示し、ドル記号を使用する、グラフのスライス・ラベル内の数値を書式設定する場合に生成されるXMLコードを示します。

例H-7 円グラフのスライス・ラベルでの数値の書式設定

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

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

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

始める前に:

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

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

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

1. 「構造」ウィンドウで、「dvt:typeGraph」ノードを右クリックし、「GraphTypeの中に挿入」→「ADFデータ視覚化」→「dvt:markerText」を選択します。

2. プロパティ・インスペクタで、必要に応じてdvt:markerTextの属性に値を入力します。たとえば、グラフ内のテキストを表示するために、Rendered属性にtrueを選択します。

3. プロパティ・インスペクタで、「マーカーの構成」をクリックし、「Y1フォーマット」を選択します。

4. プロパティ・インスペクタで、必要に応じてdvt:y1Format属性に値を入力します。

5. プロパティ・インスペクタで、「数値書式の構成」をクリックし、必要に応じてaf:convertNumberタグの属性の値を指定します。たとえば、マーカー・テキストの後にパーセント記号を配置するには、Type属性にpercent値を選択します。

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

例H-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に強制的に指定されると、グラフではパターン属性が消去されます。これは、グラフでパーセントの書式設定が強制されると、パターンが無視されることを意味します。これは、円、パレート、ファンネルおよび棒、折れ線または面パーセント・グラフに当てはまります。

H.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に設定されていないかぎり無視されます。

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

データの系列およびグループの外観を色、スタイル、表示についてカスタマイズできます。レーダー・グラフの線をカスタマイズしたり、参照線をグラフに追加することもできます。

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

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

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

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

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

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

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

始める前に:

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

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

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

1. 構造ウィンドウでグラフ・ノードの「dvt:seriesSet」子タグを右クリックし、「プロパティに移動」を選択します。

2. 必要に応じてプロパティ・インスペクタを使用し、dvt:seriesSetタグの属性に値を指定します。

   このタグの属性によって、セット内のすべての系列タグのデフォルト設定が決まります。ただし、指定した系列のこの設定を、dvt:seriesタグの対応する属性に値を入力することでオーバーライドできます。

3. 構造ウィンドウで、dvt:seriesSetノードを開きます。

4. 「構造」ウィンドウで、「dvt:series node」を右クリックし、「プロパティに移動」を選択します。

   最初のdvt:seriesタグが「グラフ・バインディングの作成」ダイアログに表示される最初の系列を表します。

5. プロパティ・インスペクタを使用して、dvt:seriesタグに、必要に応じて色と他の特性を指定します。

6. 追加の系列アイテムを構成するには、「構造」ウィンドウで「dvt:seriesSet」ノードを右クリックして、「dvt:seriesSetの中に挿入」→「dvt:series」を選択します。

7. プロパティ・インスペクタを使用して、dvt:seriesタグに、必要に応じて色と他の特性を指定します。

8. 系列アイテムごとに、ステップ6とステップ7を繰り返します。

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

実行時にレーダー・グラフの系列の非表示または表示を有効にできます。グラフでは少なくとも1系列を表示する必要がありますが、ユーザーは対応する凡例アイテムをクリックすることにより、データの表示をフィルタ処理できます。

始める前に:

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

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

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

1. 「構造」ウィンドウで「dvt:radarGraph」ノードを右クリックして、「プロパティに移動」を選択します。

2. 「プロパティ・インスペクタ」の「外観」属性カテゴリの「系列」セクションで、グラフのHideAndShowBehavior属性を設定します。有効な値は次のとおりです。

   • none: デフォルト値で、系列の非表示および表示の動作は無効です。

   • withRescale: 見える系列のみが表示されるようにグラフのサイズを変更します。

   • withoutRescale: 系列は非表示なりますが、グラフのサイズは変わりません。

H.5.2 グラフの線の外観の変更

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

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

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

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

• LineDisplayed: グラフにデータ線を表示するかどうかを指定します。次の値を設定できます。

  • trueは、グラフにデータ線が表示されることを示します。

  • falseは、グラフにデータ線ではなく、マーカーが表示されることを示します。

• MarkerDisplayed: グラフにマーカーまたはデータ線を表示するかどうかを指定します。次の値を設定できます。

  • trueは、グラフにマーカーが表示されることを示します。

  • falseは、グラフにデータ線が表示されることを示します。

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

H.5.2.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タグの使用の詳細は、H.5.1.1項「個々の系列アイテムの色とスタイルの指定方法」の手順を参照してください。

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

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

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

• dvt:paretoLineタグ: 色、線幅と線のスタイル(実線、ダッシュ線、点線、ダッシュと点の組合せなど)を指定できます。

• dvt:paretoMarkerタグ: パレート・マーカーの形状を指定できます。

始める前に:

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

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

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

1. 構造ウィンドウでdvt:paretoLineノードを右クリックし、「プロパティに移動」を選択します。

2. プロパティ・インスペクタで、Color、WidthまたはLineStyle属性に値を指定します。

3. 構造ウィンドウでdvt:paretoMarkerノードを右クリックし、「プロパティに移動」を選択します。

4. プロパティ・インスペクタで、MarkerShape属性に値を選択します。

H.5.4 参照線または領域のグラフへの追加

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

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

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

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

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

図H-22 参照領域のある棒グラフ

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

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

• referenceObjectSet: このグラフの参照線または参照領域のすべての参照オブジェクト・タグをラップします。

• referenceObject: タグが参照線を表すか、参照領域を表すかを示し、タグの特性を指定します。

始める前に:

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

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

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

1. 「構造」ウィンドウで、「dvt:typeGraph」ノードを右クリックし、「GraphTypeの中に挿入」→「ADFデータ視覚化」→「dvt:referenceObjectSet」を選択します。

2. dvt:referenceObjectSetノードを右クリックして、「プロパティに移動」を選択します。

3. プロパティ・インスペクタで、特定の軸に関連付けられている参照領域を定義する場合、適切な軸を表示するための値または軸の属性(displayX1、displayY1またはdisplayY2)の値を指定します。

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

   オプションで、参照領域にグラデーション特殊効果を適用できます。詳細は、H.4.3項「グラフでのグラデーション特殊効果の使用」を参照してください。

4. 参照線を定義する場合、線を表示するための値を指定します。

   値RO_DISPLAY_AUTOMATICは、カーソルが系列アイテム(棒など)またはグラフの凡例の対応する下位列エントリの上に移動したときにのみ参照線が表示されるようにします。これを選択すると、複数の系列の参照線が一度に表示されて混乱を招くことがなくなります。

5. 「構造」ウィンドウで「dvt:referenceObjectSet」ノードを右クリックし、「dvt:referenceObjectSetの中に挿入」→「dvt:referenceObject」を選択します。

6. dvt:referenceObjectノードを右クリックして、「プロパティに移動」を選択します。

7. プロパティ・インスペクタで次のようにします。

   1. 「共通」セクションで、参照オブジェクトのIndex属性に値を指定し、参照オブジェクトのType属性にRO_LINEまたはRO_AREAを指定し、Association属性に関連付けるオブジェクト(参照線の場合は系列、参照領域の場合は特定の軸)を指定します。また、DisplayedInLegend属性を使用してオブジェクトを凡例に表示するかどうかを指定し、凡例に表示するテキストがある場合はこれを指定します。

   2. 参照線を作成する場合、「参照線」セクションで線に関連する属性に値を指定します。これには、線の値および線が関連付けられる系列の系列番号の指定も含まれます。系列番号は、グラフ・データ・バインディング・ダイアログに系列が表示される順番のことです。

   3. 参照領域を作成する場合、指定した軸の参照領域を示す高低の値を「参照面」セクションで指定します。

   4. 必要に応じて追加の属性を構成します。

      たとえば、Color属性のドロップダウン・メニューを使用して参照線または参照領域の色を入力します。詳細なヘルプを参照するには、[F1]を押すか、「ヘルプ」をクリックします。

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

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

例H-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>

H.5.4.3 参照線または領域の動的作成方法

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

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

始める前に:

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

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

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

1. マネージドBeanを作成して、実行時に動的に作成する子コンポーネント参照オブジェクトのマップを作成します。詳細なヘルプが必要な場合は、2.6項「マネージドBeanの作成と使用」を参照してください。

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

3. dvt:referenceObjectSetノードを右クリックして、「プロパティに移動」を選択します。

4. プロパティ・インスペクタで、ReferenceObjectMap属性に、子コンポーネント参照オブジェクトのマップを作成するコードへのメソッド参照を指定します。

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

例H-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;
    }

H.6 グラフへのアニメーションの使用

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

• none (デフォルト)

• alphaFade

• conveyorFromLeft

• conveyorFromRight

• cubeToLeft

• cubeToRight

• flipLeft

• flipRight

• slideToLeft

• slideToRight

• transitionToLeft

• transitionToRight

• zoom

H.6.1 グラフのアニメーション効果の指定

アニメーションを使用するグラフのプロパティ・インスペクタで、次の属性を設定します。

• animationOnDisplay: オプション。適用する初期レンダリング効果のタイプの指定に使用します。有効な値は次のとおりです。

  • none(デフォルト): 初期レンダリング効果を表示しません。

  • auto: グラフ・タイプに基づいて自動的に選択された初期レンダリング効果を適用します。

  • alphaFade

  • conveyorFromLeftまたはconveyorFromRight

  • cubeToLeftまたはcubeToRight

  • flipLeftまたはflipRight

  • slideToLeftまたはslideToRight

  • transitionToLeftまたはtransitionToRight

  • zoom

• animationOnDataChange: オプション。適用するデータ変化のアニメーションでデータ・タイプの指定に使用します。有効な値はグラフ・タイプにより異なります。有効な値を以下に示します。

  • none(デフォルト): データ変更のアニメーション効果は適用されません。

  • auto: グラフ・タイプに基づいたデータ変更アニメーション効果を適用します。

  • alphaFade

  • conveyorFromLeftまたはconveyorFromRight

  • cubeToLeftまたはcubeToRight

  • flipLeftまたはflipRight

  • slideToLeftまたはslideToRight

  • transitionToLeftまたはtransitionToRight

  • zoom

• animationDuration: アニメーション効果をミリ秒で指定するために使用します。

• animationIndicators: 表示するデータ変化のインジケータのタイプを指定するために使用します。有効な値は次のとおりです。

  • none: データ変更のインジケータは表示されません。

  • all(デフォルト): すべてのデータ変更のインジケータを表示します。

• animationUpColor: データ値が増加したことを示すために使用するRGB16色の指定に使用します。

• animationDownColor: データ値が減少したことを示すために使用するRGB16色の指定に使用します。

H.7 特殊効果のグラフへの追加

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

H.7.1 マーカーと凡例の淡色表示の追加方法

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

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

系列のロールオーバー動作はレーダー・グラフ・タイプでのみ使用可能です。

始める前に:

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

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

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

1. 「構造」ウィンドウで「dvt:radarGraph」ノードを右クリックして、「プロパティに移動」を選択します。

2. 「外観」セクションのSeriesRolloverBehaviorフィールドで、属性ドロップダウン・リストを使用してRB_DIMを選択します。

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

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

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

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

始める前に:

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

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

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

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

   たとえば、例H-11のサンプル・コードを使用するには、sampleGraphという名前のマネージドBeanを作成し、例のメソッドを追加します。

2. プロパティ・インスペクタで、まだ有効にしていない場合は、メソッドで管理される軸のスクロールを構成します。

   たとえば、例H-11のサンプル・コードを使用する場合は、dvt:o1Axisノードにスクロールを構成します。スクロールの構成の詳細は、H.3.3.2項「軸でのスクロールの指定」を参照してください。

3. 「構造」ウィンドウで「dvt:typeGraph」ノードを右クリックし、「プロパティに移動」を選択します。

4. プロパティ・インスペクタで、「動作」セクションを開いて次のいずれかまたは両方を実行します。

   • ZoomListenerフィールドに、マネージドBeanに格納したメソッドへの参照を指定します。

     たとえば、setZoomメソッドがsampleGraphマネージドBeanに格納されている場合、"#{sampleGraph.setZoom}"という設定になります。

   • ScrollListenerフィールドに、マネージドBeanに格納したメソッドへの参照を指定します。

     たとえば、setScrollメソッドがsampleGraphマネージドBeanに格納されている場合、"#{sampleGraph.setScroll}"という設定になります。

例H-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));
}

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

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

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

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

始める前に:

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

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

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

1. 「構造」ウィンドウで「dvt:typeGraph」ノードを右クリックし、「プロパティに移動」を選択します。

2. プロパティ・インスペクタで、「外観」セクションを開いて、次の属性の値を指定します。

   1. TimeRangeMode: 相対範囲を時間範囲の終わりに適用する(最後の7日間など)か、始めに適用する(最初の7日間など)かに応じて、値TRM_RELATIVE_LASTまたはTRM_RELATIVE_FIRSTを指定します。

   2. TimeRelativeRange: 相対範囲をミリ秒で指定します。

      たとえば、7日間の範囲を指定する場合は、日数(7)に1日をミリ秒にした数(86400000)を掛けた、604800000となります。

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

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

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

始める前に:

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

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

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

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

  例H-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;
  }
  

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

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

1. 「構造」ウィンドウで「dvt:typeGraph」ノードを右クリックし、「プロパティに移動」を選択します。

2. プロパティ・インスペクタで、「外観」セクションを開いて、次の属性の値を指定します。

   1. TimeRangeMode: 属性のドロップダウン・メニューからTRM_EXPLICITを選択します。

   2. TimeRangeStart: 時間範囲の開始日を返すメソッドへの参照を指定します。

      たとえば、timeAxisSampleという名前のマネージドBeanと、例H-12で参照されているgetStartDate()メソッドの場合は、初期日付に#{timeAxisSample.startDate}と入力します。

   3. TimeRangeEnd: 時間範囲の終了日を返すメソッドへの参照を指定します。

H.7.3.3 グラフへの時間セレクタの追加方法

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

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

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

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

始める前に:

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

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

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

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

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

  図H-24 時間セレクタの例のサンプル・データ

  
  

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

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

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

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

  例H-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に時間セレクタのリスナー用のメソッドを追加します。

  例H-14に、図H-23に表示されている時間セレクタのサンプル・リスナーを示します。

  例H-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として宣言されています。ユーザーがマスター・グラフで時間セレクタの範囲を変更すると、リスナーのコードによってディテール・グラフに新しい時間範囲が設定されます。

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

1. 「構造」ウィンドウで、「dvt:typeGraph」ノードを右クリックし、「GraphTypeの中に挿入」→「ADFデータ視覚化」→「dvt:timeSelector」を選択します。

2. dvt:timeSelectorノードを右クリックして、「プロパティに移動」を選択します。

3. プロパティ・インスペクタで、次の属性の値を入力します。

   • ExplicitStart: 時間範囲の初期の開始日を返すメソッドへの参照を指定します。

     たとえば、timeSelectorDemoという名前のBeanと、例H-13で参照されているgetTimeAxisStartDate()メソッドの場合は、初期日付に#{timeSelectorDemo.timeAxisStartDate}と入力します。

   • ExplicitEnd: 時間範囲の初期の終了日を返すメソッドへの参照を指定します。

   • Mode: 属性のドロップダウン・リストから「EXPLICIT」を選択して、時間セレクタの表示を有効にします。デフォルトでは、この属性はOFFに設定されています。

   • FillColor: 属性のドロップダウン・リストから、時間セレクタの塗りつぶしの色を選択します。

   • 時間セレクタの背後にデータ・ポイントを表示するには、「透明度」スライダを使用して100%未満の値を選択します。

     たとえば、「透明度」スライダを53%に設定すると、図H-23の時間セレクタが複製されます。これにより、塗りつぶしの色の値が6桁の16進数値から8桁の値に変更されます。最初の2桁は、塗りつぶしの色の透明度を表します。デフォルトでは、塗りつぶしの色は#000000に設定されており、時間セレクタの塗りつぶしの色は不透明です。

   • オプションで透明色を有効にするには、FillTransparentドロップダウン・リストからtrueを選択します。

     FillTransparentとBorderTransparentをtrueに設定すると、時間セレクタは表示されなくなりますが、ユーザーはこれを選択できます。

   • BorderColor: 属性のドロップダウン・リストから、時間セレクタの枠線の色を選択します。

   • オプションで透明色を有効にするには、BorderTransparentドロップダウン・リストからtrueを選択します。

   • オプションで、「TimeSelectorListener」フィールドに、時間セレクタのリスナーを返すメソッドへの参照を指定します。

     たとえば、timeSelectorDemoという名前のBeanと、例H-14で参照されているprocessTimeSelectorEventメソッドの場合は、時間セレクタのリスナーに#{timeSelectorDemo.processTimeSelectorEvent}と入力します。

   例H-15に、時間セレクタの例に対応するJSFページのコードを示します。

   例H-15 JSFページの時間セレクタのコード

   <dvt:timeSelector explicitStart="#{timeSelectorDemo.timeAxisStartDate}"
                     explicitEnd="#{timeSelectorDemo.timeAxisEndDate}"
                     fillColor="#88c6d6ff" borderColor="#a5c6ff" mode="EXPLICIT"
                timeSelectorListener="#{timeSelectorDemo.processTimeSelectorEvent}"/>
   

4. ディテール・グラフを作成した場合は、ディテール・グラフが明示的な時間範囲を使用するように更新し、時間セレクタが変更されると時間範囲が更新されるように構成します。

   1. 構造ウィンドウで、ディテール・グラフのノードを右クリックして、「プロパティに移動」を選択します。

   2. プロパティ・インスペクタで、「外観」セクションを開きます。

   3. TimeRangeMode属性のドロップダウン・リストからTRM_EXPLICITを選択します。

   4. 「TimeRangeStart」フィールドに、時間範囲の開始時間を返すメソッドへの参照を指定します。

      たとえば、timeSelectorDemoという名前のBeanと、例H-13で参照されているgetTimeAxisStartDate()メソッドの場合は、初期日付に#{timeSelectorDemo.timeAxisStartDate}と入力します。

   5. 「TimeRangeEnd」フィールドに、時間範囲の終了時間を返すメソッドへの参照を指定します。

   6. プロパティ・インスペクタで「動作」セクションを展開します。

   7. PartialTriggersフィールドにマスター・グラフのIDを入力して、ユーザーが時間セレクタの範囲を変更したときにディテール・グラフを更新できるようにします。

      たとえば、図H-23の折れ線グラフのIDを参照する場合は、::graph1と入力します。また、PartialTriggersのドロップダウン・メニューから「編集」を選択して、部分トリガーを選択することもできます。

H.7.4 グラフへのアラートおよび注釈の追加

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

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

H.7.4.1 グラフへのアラートの追加方法

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

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

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

例H-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;
     }
}

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

図H-25 アラートの場所をカスタマイズ可能な折れ線グラフ

始める前に:

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

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

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

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

   たとえば、図H-25に表示されているアラートを複製するには、例H-17のコードを使用してpopupSample.javaという名前のマネージドBeanを作成します。

2. 「構造」ウィンドウで、「dvt:typeGraph」ノードを右クリックし、「GraphTypeの中に挿入」→「ADFデータ視覚化」→「dvt:alertSet」を選択します。

3. 「dvt:alert」ノードを右クリックし、「プロパティに移動」を選択します。

4. プロパティ・インスペクタで次の属性を設定します。

   • ImageSource: 既存イメージを選択する属性のドロップダウン・メニューを使用して、アラートのアイコンへのパスを指定するか、「編集」を選択して新しいイメージをアプリケーションに追加します。

   • Text: アイコンにマウス・ポインタを合わせたときにツールチップに表示されるオプションのテキストを指定します。

   • XValue: X軸または順序軸の値を指定します。オプションで、属性のドロップダウン・メニューを使用してEL式ビルダーにアクセスし、アラートのxValueを設定するメソッドを選択します。

     たとえば、例H-17のalertBeanマネージドBeanおよびsetAlertDateメソッドでは、xValueを値#{alertBean.alertDate}に設定します。

   • YValue: Y軸の値を指定します。オプションで、属性のドロップダウン・メニューを使用してEL式ビルダーにアクセスし、アラートのyValueを設定するメソッドを選択します。

     たとえば、例H-17のalertBeanマネージドBeanおよびsetAlertYValueメソッドでは、yValueを値#{alertBean.alertDate}に設定します。

   • YValueAssignment: yValue属性に関連付ける軸を指定します。有効な値は、Y1AXIS(デフォルト)またはY2AXIS(構成済の場合)です。

     例H-17のマネージドBeanの例では、yValueがY1AXISに関連付けられるため、デフォルトを変更する必要はありません。

5. アラートを追加するには、新しいアラートごとに「構造」ウィンドウで「dvt:alertSet」を右クリックし、「dvt:alertSetの中に挿入」→「dvt:alert」を選択します。

6. ステップ3とステップ4を繰り返して新しいアラートを構成します。

H.7.4.2 グラフへの注釈の追加

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

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

• series: グラフの系列のゼロベースの索引を指定します。ほとんどのグラフでは、各系列が同じ色のマーカー・セットとして表示されます。たとえば、複数円グラフでは、黄色の各区分が靴の売上を表し、緑の各区分がブーツの売上を表す場合があります。棒グラフでは、黄色の棒がすべて靴の売上を表し、緑の棒がブーツの売上を表す場合があります。

• group: グラフのグループのゼロベースの索引を指定します。グループの表示は、グラフ・タイプによって異なります。集合棒グラフでは、棒の各集合が1つのグループになります。積上げ棒グラフでは、各積層がグループです。複数円グラフでは、各円がグループです。

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

例H-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です。

H.7.5 ドロップ機能をパレートおよび株価チャートに追加する方法

ADF Facesフレームワークには、ページ上の場所から別の場所へアイテムをドラッグ・アンド・ドロップする機能があります。他のADFコンポーネントからドロップ可能なドロップ・ターゲットとして、パレートおよび株価チャートを構成できます。たとえば、ADF表セルからのドロップを可能にする株価チャートを構成できます。

パレートまたは株価チャートをドロップ・ターゲットとして構成するには、af:dropTargetタグをパレートまたは株価チャートの子として追加し、ドロップ・イベントに応答するマネージドBeanのメソッドを追加します。例H-19に、ADF表からドロップを受け取るように構成されたグラフのドロップ・リスナーのサンプルを示します。

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

public class dragAndDrop {
  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();
  }

ADF Facesコンポーネント、オブジェクトまたはコレクションもドラッグ・ソースとして構成し、ドラッグに応答するメソッドを定義する必要があります。ドラッグ・アンド・ドロップの構成の詳細は、第35章「ドラッグ・アンド・ドロップ機能の追加」を参照してください。

始める前に:

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

次のタスクを実行する必要があります。

• パレートまたは株価チャートをページに追加します。詳細は、H.2.3項「ページへのグラフの追加方法」を参照してください。

• グラフにドロップをリスニングするメソッドを作成します。マネージドBeanの使用の詳細は、2.6項「マネージドBeanの作成と使用」を参照してください。

パレートまたは株価チャートをドロップ・ターゲットとして構成する手順:

1. 「構造」ウィンドウで、「dvt:paretoGraph」または「dvt:stockGraph」を右クリックし、「(パレートまたは株価)の中に挿入」→「af:dropTarget」を選択します。

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

   例H-19で使用されているDropListenerを指定するには、#{dragAndDrop.fromTableDropListener}と入力します。

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

   たとえば、ADF表からドロップを可能にするように構成されたドロップ・ターゲットにflavorClassを指定するには、org.apache.myfaces.trinidad.model.RowKeySetと入力します。

H.7.6 グラフへのポップアップの追加方法

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

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

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

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

始める前に:

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

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

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

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

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

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

  <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の詳細は、2.6項「マネージドBeanの作成と使用」を参照してください。

  例H-21に、ゲージ・ポップアップの例のポップアップ要求に応答するために使用するサンプル・コードを示します。この例では、散布図でデフォルトのデータ値が使用されています。

  例H-21 グラフ・データ・マーカー・ポップアップのマネージド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;
    }
  }
  

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

1. 「構造」ウィンドウでグラフの子の「dvt:seriesSet」コンポーネントを右クリックし、「dvt:seriesSetの中に挿入」→「af:showPopupBehavior」を選択します。

2. af:showPopupBehaviorノードを右クリックし、 「プロパティに移動」を選択します。

3. プロパティ・インスペクタで次の属性を設定します。

   • PopupId: 包含するコンポーネントに関連するポップアップのIDを入力します。コロン1つで始まるIDは、コロンを除いた後、絶対値として扱われます。

     たとえば、例H-20のゲージ・ポップアップを参照するには、::graphPopupと入力します。

   • TriggerType: 表示されるポップアップをトリガーするイベント・タイプを入力します。グラフのseriesSetコンポーネントの有効な値は、action、clickおよびmouseHoverです。

     たとえば、ゲージ・ポップアップの例を続行するには、clickと入力します。

   • Align: ドロップダウン・リストから、ポップアップをどのようにseriesSetコンポーネントと位置合せするかを選択します。

     この属性にはデフォルト設定がありませんが、この属性は通常必須です。ただし、ポップアップ・タイプがaf:panelWindowまたはaf:dialogの場合、この属性は設定する必要ありません。これらのタイプのポップアップは、ドラッグ・アンド・ドロップを使用して手動で再配置可能であり、デフォルトでブラウザ・ウィンドウの中央に開きます。

     ゲージ・ポップアップの例を続行するには、ゲージ・ポップアップの例でaf:panelWindowタイプを使用するため、このフィールドは空白のままにします。

   • AlignID: 位置合せするポップアップに関連するコンポーネントのIDを入力します。コロン1つで始まるIDは、コロンを除いた後、絶対値として扱われます。

     ポップアップ・タイプがaf:panelWindowまたはaf:dialog以外の場合、この属性も通常必須です。ゲージ・ポップアップの例を続行するには、このフィールドは空白のままにします。

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

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

<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>

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

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

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

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

H.7.7.1 グラフへの選択サポートの追加方法

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

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

例H-23 グラフの選択サポート用マネージド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;
  }
}

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

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

<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>

始める前に:

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

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

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

  この項の複数選択サポートの例と同じ構成を行う場合は、棒グラフを作成します。

• マネージドBeanにメソッドを追加して、選択イベントに応答するリスナー・メソッドを定義します。マネージドBeanの詳細は、2.6項「マネージドBeanの作成と使用」を参照してください。

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

1. 「構造」ウィンドウで「dvt:typeGraph」ノードを右クリックし、「プロパティに移動」を選択します。

2. プロパティ・インスペクタで、「動作」セクションを開いて次の属性の値を指定します。

   1. DataSelection: singleまたはmultipleを指定して、単一または複数のデータ・マーカーの選択サポートを有効にします。デフォルトはnoneで、選択はデフォルトでは有効になっていません。

   2. SelectionListener: 選択リスナーへの参照を指定します。

      たとえば、graphSelection.javaという名前のマネージドBeanでselectionListenerメソッドを指定するには、SelectionListenerフィールドに#{graphSelection.selectionListener}と入力します。

3. 必要に応じて追加の構成を行います。

   たとえば、この項の複数選択の例を複製するには、ページに次のコードを追加します。

   <af:outputFormatted id="selectionText"
       inlineStyle="font-size:120.0%;"
       partialTriggers="graph1" value="#{graphSelection.selectionInfo}"/>
   

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

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

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

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

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

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

• contextMenu: グラフ・コンポーネント内の選択可能要素で表示されるコンテキスト・メニューを指定します。

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

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

たとえば、図H-28に、カスタム・メニュー・アイテムを使用する散布図のコンテキスト・メニューを示します。

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

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

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

<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>

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

例H-26 カスタム・コンテキスト・メニューを作成するためのマネージド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は、例H-27に表示されているSelectionSampleクラスを呼び出します。

例H-27 カスタム・コンテキスト・メニューの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;
  }
}

H.7.8.1 グラフのコンテキスト・メニューの構成に関する必知事項

技術的な制限のために、Flashのレンダリング形式の使用時には、現在のところコンテキスト・メニューのコンテンツはFlash Playerのコンテキスト・メニューを使用して表示されます。このため、Flash Playerにより定義されたいくつかの制限があります。

• Flashでは、コンテキスト・メニューのサブメニューは使用できません。

• Flashでは、カスタム・メニュー項目は15に制限されます。コンポーネントの組込みメニュー項目(円グラフのinteractiveSliceBehaviorメニュー項目など)は、制限に考慮されます。

• Flashでは、メニュー項目がテキストのみに制限されます。ADF Facesメニューで可能なアイコンなどのコントロールは、Flashメニューでは使用できません。

• 各メニュー・キャプションには、1つ以上の表示可能な文字を含める必要があります。制御文字、改行文字およびその他の空白文字は無視されます。キャプションは100文字以内です。

• 別のカスタム項目と同一のメニュー・キャプションは、一致する項目の表示または非表示に関係なく無視されます。メニュー・キャプションは、組込みキャプションまたは既存のカスタム・キャプションと比較されます(大文字/小文字、句読点、空白は考慮されません)。

• 次のキャプションは許可されません。ただし、単語同士をつなげて使用して、カスタム・キャプションを作成できます: 保存、ズーム・イン、ズーム・アウト、100%、すべて表示、品質、再生、ループ、巻戻し、進む、戻る、ロードされない映画、バージョン情報、印刷、再描画リージョンの表示、デバッガ、元に戻す、切取り、コピー、貼付け、削除、すべて選択、開く、新規ウィンドウで開くおよびリンクのコピー。

• 次の単語は、単独または他の単語とともにカスタム・キャプションで表示できません: Adobe、Macromedia、Flash Playerまたは設定。

さらに、Flashからのコンテキスト・メニュー項目のリクエストは同期コールであるため、コンテキスト・メニューの呼出し時には、ELを評価するサーバー・リクエストは不可能です。選択したオブジェクトごとに異なるコンテキスト・メニューを提供するために、コンテキスト・メニューのポップアップでcontentDelivery="lazyUncached"設定が使用される場合、メニューはあらかじめフェッチされます。状況により変化するコンテキスト・メニューの場合、これはメニュー定義内のEL式が、異なる選択や通貨の状況により、レンダリング時に繰り返しコールされることを意味します。あらかじめフェッチされたこれらのコンテキスト・メニューを使用する場合、アプリケーションでは次の事項を認識しておく必要があります。

• コンテキスト・メニューの表示方法の定義に使用するEL式では、実行時間の長いコードまたは遅いコードは実行しないでください。これは、actionListenerなど、メニュー項目が選択された後にコールされるaf:commandMenuItem属性には当てはまりません。

• 今後、Flashの制限が解決された場合、ADFコンテキスト・メニューがFlashコンテキスト・メニューのかわりに表示されます。アップグレードの互換性を確保するには、メニューがあらかじめフェッチされている場合と、メニューの開始時にEL式が評価される場合の両方でEL式が機能するようにコードを作成する必要があります。アプリケーションが依存するコンポーネントの状態は、selectionとcurrencyのみです。