ヘッダーをスキップ
Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド
11gリリース1 (11.1.1.7.0)
B52029-07
  目次へ移動
目次

前
 
次
 

24 ADFグラフ・コンポーネントの使用

この章では、ADFグラフ・コンポーネントを使用してデータを表示する方法とグラフのカスタマイズ・オプションについて説明します。

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

ADFグラフのデータ・バインディングの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたグラフの作成に関する項を参照してください。

24.1 グラフ・コンポーネントの概要

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

コンポーネント・ギャラリには使用可能なグラフのカテゴリ、タイプおよび説明が表示され、グラフの作成およびクイック・スタート・レイアウトの指定が視覚的にサポートされます。図24-1に、横棒グラフのコンポーネント・ギャラリを示します。

図24-1 横棒グラフのコンポーネント・ギャラリ

横棒グラフのコンポーネント・ギャラリ。

コンポーネント・ギャラリを使用してグラフをJSFページに挿入すると、グラフのカスタマイズをサポートする子タグのセットが自動的に挿入されます。例24-1に、図24-1のコンポーネント・ギャラリでクイック・スタート・レイアウトを選択した横棒グラフのソース・コードを示します。

例24-1 横棒グラフのサンプル・コード

<dvt:horizontalBarGraph id="horizontalBarGraph1"
        subType="BAR_HORIZ_CLUST">
        customLayout="CL_NONE"
  <dvt:background>
    <dvt:specialEffects/>
  </dvt:background>
  <dvt:graphPlotArea/>
  <dvt:seriesSet>
      <dvt:series/>
  </dvt:seriesSet>
  <dvt:o1Axis/>
  <dvt:y1Axis/>
  <dvt:legendArea automaticPlacement="AP_NEVER" position="LAP_BOTTOM"/>
  <dvt:legendTitle text="Legend Title"/>
  <dvt:graphSubtitle horizontalAlignment="CENTER" text="Subtitle"/>
  <dvt:graphTitle horizontalAlignment="CENTER" text="Title"/>
</dvt:horizontalBarGraph>

図24-2に、図24-1のコンポーネント・ギャラリで作成された横棒グラフのビジュアル・エディタ表示を示します。

図24-2 ビジュアル・エディタの横棒グラフ

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

ビジュアル・エディタでグラフを編集する場合、タイトル、凡例エリア、描画エリア、背景、軸ラベル、棒の表示などのグラフ・コンポーネントを選択して、編集の選択肢を含むコンテキスト・メニューを表示できます。ビジュアル・エディタでのグラフの編集の詳細は、24.6項「グラフの外観のカスタマイズ」を参照してください。

グラフは、400 X 300ピクセルのデフォルト・サイズで表示されます。ブラウザ・ウィンドウの各種サイズのエリアに合うように、グラフのサイズをカスタマイズしたり、動的なサイズ変更を指定したりすることができます。グラフが縦または横に制限されたエリアで表示される場合(Webページのサイドバーなど)、グラフは十分な機能が装備された状態で表示されますが、表示は簡略化されます。

スクリーン・リーダーでWebページを読み取る視覚障害のユーザーに対応するために、スクリーン・リーダー・モードがアプリケーションに有効な場合、グラフは自動でピボット・テーブルに置き換えられます。スクリーン・リーダーでは、グラフよりもピボット・テーブルの方がデータの移動や読取りが簡単です。スクリーン・リーダー・モードの有効化の詳細は、22.2項「アクセシビリティ・プリファレンスの公開」を参照してください。ADFピボット・テーブルの詳細は、27.1項「ADFピボット・テーブル・コンポーネントの概要」を参照してください。

デフォルトでは、新しいアプリケーションのグラフは、クライアントがサポートしている場合はHTML5イメージ形式で表示されます。また、グラフをFlashまたはPortable Network Graphics (PNG)出力形式で表示することもできます。グラフのイメージ形式の詳細は、第24.4.4項「グラフのイメージ形式について」を参照してください。

グラフ用のHTML5、FlashおよびPNGイメージ形式では、双方向ロケールがサポートされます。図24-3に、複数の円グラフ内の双方向サポートを示します。

図24-3 グラフの双方向サポート

グラフの双方向サポート

24.2 グラフ・タグの理解

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

すべてのタグとその属性の詳細、および有効な値のリストは、DVTタグのドキュメントを参照してください。JDeveloperで特定のタグのドキュメントにアクセスするには、構造ウィンドウでタグを選択し、[F1]キーを押します。JDeveloperのヘルプでADF Data Visualization Toolsタグ・ライブラリにアクセスするには、オンライン・ヘルプの目次でJavadocとタグ・ライブラリ・リファレンスのノードを開き、「JDeveloperタグ・ライブラリ・リファレンス」トピックのタグ・ライブラリへのリンクをクリックします。

24.2.1 グラフ固有のタグ

グラフ固有のタグは次の13個になります。

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

  • dvt:barGraph: データが一連の縦棒として表される棒グラフをサポートします。棒グラフを使用してある期間の傾向の確認や、複数の地域での異なる製品区分の売上げなど、同一時点での項目の比較を行います。

  • dvt:horizontalBarGraph: Y軸に沿って棒を横向きに表示するグラフを作成します。横棒グラフを使用して向きを持たせて傾向を表示したり、値を比較します。

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

  • dvt:comboGraph: 異なる種類のデータ・マーカー(棒、線または面)を使用して異なる種類のデータ項目を表すグラフを作成します。組合せグラフを使用して、棒と線、棒と面、線と面あるいは3つすべての組合せを比較します。

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

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

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

  • dvt:pieGraph: 1つのグループのデータが円のセクションとして表され、円が切り分けられたパイのように見えるグラフを作成します。円グラフを使用して、各製品ラインからの収益など、全体に対する各部分の関係を表します。

  • dvt:radarGraph: 円状の折れ線グラフとして表されるグラフを作成します。過去3年間の月ごとの売上げなどの周期的に起こるパターンを表す場合に、レーダー・グラフを使用します。

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

  • dvt:sparkChart: 傾向や変化を1つのデータ値で表示する簡単な要約グラフを作成します。通常は、表の列やインラインで関連するテキストを付けてスタンプされます。スパークチャートには、基本的な条件付書式設定があります。


    注意:

    このリリースでは、スパークチャートは、コンポーネント・パレットからdvt:sparkChartタグを挿入し、コンポーネントとデータをバインドして作成されます。スパークチャートは、データ・コントロール・パネルでは作成できません。


  • dvt:stockGraph: データが株の高値、安値および終値を示すグラフを作成します。各株価マーカーは、選択された株価チャートの種類に応じて2から4個(オプションの出来高マーカー以外)の異なる値を表します。

24.2.2 一般的なグラフの子タグ

一般的なカスタマイズや関連する子タグの種類は次のとおりです。

  • グラフに対するアニメーション効果: dvt:animationOnDisplayおよびdvt:animationOnDataChangeタグ。

  • カスタム・アイコンでデータ・ポイントを強調表示するアラート: dvt:alertSetおよびdvt:alertタグ。

  • 特定のデータ・ポイントに対する注意事項を挿入する注釈: dvt:annotationSetおよびdvt:annotationタグ。

  • グラフの外観とタイトル: dvt:backgrounddvt:graphFontdvt:graphFootnotedvt:graphPlotAreadvt:graphSubtitleおよびdvt:graphTitleタグ。

  • 棒、面、線および円グラフのスライス(系列アイテムとも呼ばれる)の色と外観: dvt:seriesSetおよびdvt:seriesタグ。

  • 順序軸やマーカー・ツールチップのカテゴリ別属性の書式設定: dvt:attributeFormat

  • 凡例の外観: dvt:legendAreadvt:legendTextおよびdvt:legendTitleタグ。

  • 各軸に関連するマーカーのカスタマイズ: dvt:markerTextdvt:x1Formatdvt:y1Formatdvt:y2Formatおよびdvt:zFormatタグ。

  • 参照線および参照領域: dvt:referenceObjectSetおよびdvt:referenceObjectタグ。

  • 棒グラフ、面グラフ、組合せグラフ、折れ線グラフ、レーダー・グラフ、株価チャートで使用される順序軸(カテゴリ軸とも呼ばれる)のグループ・ラベルによるカスタマイズ: dvt:o1Axisdvt:o1MajorTickdvt:o1TickLabeldvt:o1Titleタグ。

  • 散布図とバブル・グラフで使用されるX軸の数値ラベルによるカスタマイズ: dvt:x1Axisdvt:x1MajorTickdvt:x1TickLabeldvt:x1MinorTickdvt:x1Titleタグ。

  • Y1軸のカスタマイズ: dvt:y1Axisdvt:y1BaseLinedvt:y1MajorTickdvt:y1TickLabeldvt:y1MinorTickおよびdvt:y1Titleタグ。

  • Y2軸のカスタマイズ: dvt:y2Axisdvt:y2BaseLinedvt:y2MajorTickdvt:y2TickLabeldvt:y2MinorTickおよびdvt:y2Titleタグ。

24.2.3 グラフ固有の子タグ

グラフ固有のカスタマイズや関連する子タグの種類は次のとおりです。

  • dvt:backgrounddvt:legendAreadvt:graphPlotAreadvt:graphPieFramedvt:seriesdvt:referenceObjectまたはdvt:timeSelectorサブコンポーネントとの組合せでのみグラフに使用されるグラデーション: dvt:specialEffectsおよびdvt:gradientStopStyleタグ。

  • グラフのサブコンポーネントに対する相互作用の指定: dvt:shapeAttrbutesSetおよびdvt:shapeAttributesタグ。

  • グラフの数値データ値の書式設定: dvt:sliceLabeldvt:x1TickLabeldvt:y1TickLabeldvt:y2TickLabeldvt:x1Formatdvt:y1Formatdvt:y2Formatdvt:zFormatおよびdvt:stockVolumeFormat

  • 面、棒、組合せ、線、積上げ棒グラフの時間軸のカスタマイズ: dvt:timeAxisDateFormatおよびdvt:timeSelectorタグ。

  • マスター/ディテール・グラフの時間軸の範囲の選択: dvt:timeSelectorタグ。

  • パレート・グラフ: dvt:paretoLineおよびdvt:paretoMarkerタグ。

  • 円グラフ: dvt:graphPieFramedvt:pieFeelerdvt:sliceおよびdvt:sliceLabelタグ。

  • スパークチャート: dvt:sparkItemタグでは、スパークチャートのデータが提供されます。

  • 株価チャート: dvt:stockMarkerdvt:stockVolumeformatおよびdvt:volumeMarkerタグ。

24.2.4 子セット・タグ

子セット・タグは次のとおりです。

  • dvt:alertSetタグ: エラーや警告など、個別の記号で強調表示する必要のある追加データ・ポイントを定義するdvt:alertタグをラップします。

  • dvt:annotationSetタグ: グラフ上に注釈を定義するdvt:annotationタグをラップします。注釈は、グラフ上の特定のデータ・ポイントと関連付けられます。

  • dvt:referenceObjectSetタグ: グラフに対する参照線または参照領域を定義するdvt:referenceObjectタグをラップします。指定したグラフに対して参照オブジェクトをいくつでも定義できます。

  • dvt:seriesSetタグ: グラフ上に一連のデータ・マーカーや系列を定義するdvt:seriesタグをラップします。

  • dvt:shapeAttributesSetタグ: グラフのサブコンポーネントに相互作用プロパティを指定するdvt:shapeAttributesタグをラップします。

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

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

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

24.3 グラフのデータ要件の理解

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

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

24.3.1 面グラフのデータ要件

面グラフは、データが塗りつぶされた領域で表されるグラフです。次の種類の面グラフが使用できます。

  • 絶対: 各面マーカーは、一連の(2つ以上の)データ値を結びます。この種のグラフのバリエーションとして、単一Yの絶対面グラフと分割二重Yの絶対面グラフがあります。

    分割二重Yグラフでは、描画エリアが2つのセクションに分割され、異なるY軸に割り当てられたデータ・セットは異なる描画エリアに表示されます。

  • 積上げ: 面マーカーが積み上げられます。各データ・セットの値は前のセットの値に加算されます。積層のサイズが累積合計を表します。この種のグラフのバリエーションとして、単一Yの積上げ面グラフと分割二重Yの積上げ面グラフがあります。

  • パーセンテージ:面マーカーは、すべてのデータ・セットの累積合計に対する割合を表します。

面グラフのデータのガイドラインは次のとおりです。

  • 面グラフには最低2グループのデータが必要です。グループは、すべての面マーカーを通る横軸に沿った位置で表されます。3か月間のデータを示すグラフでは、このグループにJan、FebおよびMarなどのラベルが付けられます。

  • 面グラフには1つ以上のデータ系列が必要です。塗りつぶされた領域はデータの系列またはセットを表し、アメリカ、ヨーロッパ、アジアなどの凡例テキストでラベルが付けられます。

  • パーセンテージ面グラフは負の数値を持つことができません。

  • 二重Yグラフには2セットのデータが必要です。

24.3.2 棒グラフのデータ要件

棒グラフは、データが一連の棒として表されるグラフです。次の種類の棒グラフが使用できます。

  • 集合: 棒の各まとまりが1グループのデータを表します。たとえば、データが従業員で分類されている場合、特定の従業員の給与の棒と歩合の棒が1つのまとまりとなります。この種のグラフのバリエーションとして、集合縦棒グラフと集合横棒グラフがあります。集合棒グラフのすべてのバリエーションは、単一Yグラフ、二重Yグラフおよび分割二重Yグラフにできます。

  • 積上げ: 各データ・セットの棒が前のデータ・セットに追加されます。積層のサイズがデータの累積合計を表します。この種のグラフのバリエーションとして、積上げ縦棒グラフと積上げ横棒グラフがあります。積上げ棒グラフのすべてのバリエーションは、単一Yグラフ、二重Yグラフおよび分割二重Yグラフにできます。

  • パーセンテージ: 棒が積み上げられ、すべてのデータ・セットの累積合計に対する特定のデータ・セットの割合が表されます。パーセンテージ棒グラフは、単一Yグラフにのみできます。

棒グラフのデータのガイドラインは次のとおりです。

  • パーセンテージ棒グラフは負の数値を持つことができません。

  • 二重Yグラフには2セットのデータが必要です。

24.3.3 バブル・グラフのデータ要件

バブル・グラフは、データが円形のデータ・マーカー(バブル)の位置とサイズで表されるグラフです。バブル・グラフの各データ・マーカーは3グループの値を表します。

  • 1つ目のデータ値はX値です。マーカーのX軸上の位置を決めます。

  • 2つ目のデータ値はY値です。マーカーのY軸上の位置を決めます。

  • 3つ目のデータ値はZ値です。マーカーのサイズを決めます。

使用可能なバブル・グラフの種類は、単一Yのバブル・グラフと二重Yのバブル・グラフです。

バブル・グラフのデータのガイドラインは次のとおりです。

  • バブル・グラフでは、1つのデータ・マーカーにつき最低3つのデータ値が必要です。

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


    注意:

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


24.3.4 組合せグラフのデータ要件

組合せグラフでは異なるタイプのデータ・マーカーを使用して異なるデータ・セットを表示します。使用されるデータ・マーカーは、棒、面および線です。

組合せグラフのデータのガイドラインは次のとおりです。

  • 組合せグラフには最低2セットのデータが必要です。そうでない場合、異なるマーカー・タイプを表示できません。

  • 組合せグラフには最低2グループのデータが必要です。そうでない場合、面マーカーまたは線マーカーをレンダリングできません。

24.3.5 ファンネル・グラフのデータ要件

ファンネル・グラフは、プロセスのステップに関連するデータを視覚的に表したものです。ファンネルの特定のステップ(スライス)の値がそのスライスの割当てに近付いた分、スライスが塗りつぶされます。ファンネルは目標値、実績値およびレベルを色で表す3次元のチャートをレンダリングします。ファンネル・グラフでは、目標値を100%としてデータを表します。したがって、実績値が50で目標値が200の場合、スライスの25%が塗りつぶされます。

ファンネル・グラフのデータのガイドラインは次のとおりです。

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

    ファンネル・グラフの別のバリエーションの場合、1セットのデータのみで構いません。表示されるデータ値は、合計値のパーセンテージになります。このタイプのファンネル・グラフを作成するには、グラフのfunnelPercentMeasureプロパティをTrueに設定する必要があります。この設定は、グラフのXMLで実行してください。

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

24.3.6 折れ線グラフのデータ要件

折れ線グラフは、データを線、一連のデータ・ポイントまたは線で結ばれたデータ・ポイントとして表します。次の種類の折れ線グラフが使用できます。

  • 絶対: 各線セグメントは2つのデータ・ポイントを結びます。この種のグラフでは、軸を単一Y、二重Yおよび分割二重Yにできます。

  • 積上げ: 各データ・セットの線が前のデータ・セットに追加されます。積層のサイズがデータの累積合計を表します。この種のグラフでは、軸を単一Y、二重Yおよび分割二重Yにできます。

  • パーセンテージ: 線が積み上げられ、各線がすべてのデータ・セットの累積合計に対する特定のデータ・セットの割合を表します。パーセンテージ折れ線グラフは、単一Yグラフにのみできます。

折れ線グラフのデータのガイドラインは次のとおりです。

  • 線には最低2つの点が必要なため、折れ線グラフには最低2グループのデータが必要です。グループは各色のマーカーで表されます。グループには、月の名前などのティック・ラベルが付けられます。

  • パーセンテージ折れ線グラフは負の数値を持つことができません。

  • 二重Yグラフには2セットのデータが必要です。

24.3.7 パレート・グラフのデータ要件

パレート・グラフは、不具合の原因を特定することを目的として設計されています。パレート・グラフでは、一連の棒が異なる不具合の原因を表します。これらの棒は値の大きい方から順に並べられます。線は、グラフのすべての棒の合計値に対する棒の累積割合を示します。線は常に100%で終わります。

パレート・グラフは常に二重Yグラフです。Y1軸は棒が表す値に対応します。Y2軸は累積パーセンテージ値に対応します。

パレート・グラフのデータのガイドラインは次のとおりです。

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

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

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

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

24.3.8 円グラフのデータ要件

円グラフは、1つ以上の円の扇型円弧としてデータが表され、円がカットされたパイのように見えます。次の種類の円グラフが使用できます。

  • 円:各円の中心は埋まっています。円グラフは、1つまたは複数の円で構成されます。

  • ドーナツ:各円の中心が空いており、ここにパイの合計値が表示されます。ドーナツ・グラフは、1つまたは複数の輪で構成されます。

円グラフのデータ構造は次のとおりです。

  • 各円またはドーナツは1グループのデータを表し、月の名前などのラベルが付きます。1グループのデータのみの場合、複数円または複数ドーナツ・グラフ・タイプを選択しても、1つの円またはドーナツのみが表示されます。また、すべてのデータがゼロのグループがある場合、そのグループに対する円またはドーナツは表示されません。

  • データの系列またはセットは、すべて同じ色のスライスで示されます。各データ・セットの凡例テキストが表示されます。たとえば、国別のデータ・セットがある場合、各国の名前が凡例テキストに表示されます。

円グラフのデータのガイドラインは次のとおりです。

  • 円グラフは負の数値を持つことができません。

  • 複数円グラフには最低2グループのデータが必要です。

24.3.9 極グラフのデータ要件

ポーラー・グラフは、円形の散布図です。極グラフでは、散布図同様、データがデータ・マーカーの位置で表されます。極グラフでは、マーカーが表示される描画エリアは円形です。散布図の詳細は、24.3.11項「散布図のデータ要件」を参照してください。

散布図同様、極グラフは、多数のデータ項目間の全体的な関連性を示す場合に特に有用です。データに方向性がある場合は、散布図ではなく、極グラフを使用してください。

極グラフの各データ・マーカーは2つのデータ値を表します。

  • 1つ目のデータ値はX値です。これは、X軸に沿ったマーカーの位置を決定します。時計回りで円の周囲の位置になります。

  • 2つ目のデータ値はY値です。これは、Y軸に沿ったマーカーの位置を決定します。グラフの中心からの距離になります。

極グラフのデータのガイドラインでは、各マーカーに最低2つのデータ値が必要です。

24.3.10 レーダー・グラフのデータ要件

レーダー・グラフは、多角形の折れ線グラフで、円形の散布図である極グラフと似ています。過去3年間の月ごとの売上げなどの周期的に起こるパターンを表す場合に、レーダー・グラフを使用します。

レーダー・グラフのデータ構造は次のとおりです。

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

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

レーダー・グラフのデータのガイドラインとして、最低3グループのデータが必要です。

24.3.11 散布図のデータ要件

散布図は、データをデータ・マーカーの位置で表します。散布図は、多数のデータ・ポイント間の全体的な関連性を示す場合に特に有用です。たとえば、特定の製品の売上げと利益の関連性を調べる場合に散布図を使用できます。

散布図は単一Yまたは二重Yにできます。散布図の各データ・マーカーは2つの値を表します。

  • 1つ目のデータ値はX値です。マーカーのX軸上の位置を決めます。

  • 2つ目のデータ値はY値です。マーカーのY軸上の位置を決めます。

散布図のデータのガイドラインは次のとおりです。

  • 散布図には、マーカーごとに2つのデータ値が必要です。

  • 複数グループのデータの場合、データは2の倍数である必要があります。

24.3.12 スパークチャートのデータ要件

スパークチャートは、単一系列のデータ値での傾向や変化の表示に使用されます。これは、簡単な視覚化要約チャートで、テキストを付けて表にスタンプされるか、インラインで使用されるように設計されています。スパークチャートにはラベルがないため、表の隣接する列や周囲のテキストにより、スパークチャートのコンテンツのコンテキストが示されます。

スパークチャートでは、表形式データやgraphDataModelは受け入れられません。スパークチャートのデータのガイドラインは次のとおりです。

  • 折れ線スパークチャート、棒スパークチャートおよび面スパークチャートには、単一系列のデータ値が必要です。図24-4に、表の列の折れ線スパークチャートの例を示します。

    図24-4 折れ線スパークチャート

    折れ線スパークチャート
  • フローティング棒スパークチャートには、データ値の系列がフローティング・オフセットに1つ、棒の値のために1つの合計2つ必要です。図24-5に、フローティング棒スパークチャートの例を示します。

    図24-5 浮動棒スパークチャート

    浮動棒スパークチャートの例。

24.3.13 株価チャートのデータ要件

株価チャートでは、株価を表示し、必要に応じてグラフに1つ以上の株式の取引出来高も表示できます。いずれかの株式またはローソク足株価チャートが出来高を含む場合、出来高はグラフの下部に棒で表示されます。

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

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

24.3.13.1 株価チャート: 高値-安値-終値

高値-安値-終値株価チャートのデータ要件は次のとおりです。

  • 各株価マーカーには、高値、安値、終値の順の3つのデータ値のグループが必要です。1日以上の株価データを表示する場合、月曜日に3つのデータ値、火曜日に3つのデータ値のように、データは3の倍数である必要があります。

  • データの系列(セット)は、1つの株を表す同じ色のマーカーで示されます。系列はA株のように凡例テキストでラベル付けされます。ローソク株価チャートを除き、株が1つのみの場合でも凡例は表示されます。大半の高値-安値-終値株価チャートの系列は1つのみです。複数の系列を表示し、異なる株の値が重なる場合、株価マーカーによって他の株価マーカーが覆われます。

24.3.13.2 株価チャート: 出来高付き高値-安値-終値

出来高付き高値-安値-終値株価チャートのデータ要件は次のとおりです。

  • 各株価マーカーには、高値、安値、終値、出来高の順の4つのデータ値のグループが必要です。1日以上の株価データを表示する場合、データは4の倍数で、月曜日の高値、月曜日の安値、月曜日の終値、月曜日の出来高(他の曜日に続く)の順である必要があります。

  • 出来高も表示する高値-安値-終値株価チャートでは、1つの株のみのデータを表示できます。この株のラベルはグラフの凡例に表示されます。

24.3.13.3 株価チャート: 始値-高値-安値-終値

始値-高値-安値-終値株価チャートのデータ要件は次のとおりです。

  • 各株価マーカーには、始値、高値、安値、終値の順の4つのデータ値のグループが必要です。1日以上の株価データを表示する場合、月曜日に4つのデータ値、火曜日に4つのデータ値のように、データは4の倍数である必要があります。

  • データの系列(セット)は、1つの株を表す同じ色のマーカーで示されます。系列はA株のように凡例テキストでラベル付けされます。1つの株のみの場合でも凡例は表示されます。大半の始値-高値-安値-終値株価チャートの系列は1つのみです。複数の系列を表示し、異なる株の値が重なる場合、株価マーカーによって他の株価マーカーが覆われます。

24.3.13.4 株価チャート: 出来高付き始値-高値-安値-終値

出来高付き始値-高値-安値-終値株価チャートのデータ要件は次のとおりです。

  • 各株価マーカーには、始値、高値、安値、終値、出来高の順の5つのデータ値のグループが必要です。1日以上の株価データを表示する場合、データは5の倍数で、月曜日の始値、月曜日の高値、月曜日の安値、月曜日の終値、月曜日の出来高(他の曜日に続く)の順である必要があります。

  • 出来高も表示する始値-高値-安値-終値株価チャートでは、1つの株のみのデータを表示できます。この株のラベルはグラフの凡例に表示されます。

24.3.13.5 ローソク足株価チャート: 始値-終値

始値-終値ローソク足株価チャートのデータ要件は次のとおりです。

  • 各株価マーカーには、始値、終値の順の2つのデータ値のグループが必要です。1日以上の株価データを表示する場合、月曜日に2つのデータ値、火曜日に2つのデータ値のように、データは2の倍数である必要があります。

  • データの系列(セット)は、1つの株のマーカーで示されます。ローソク株価チャートでは、1つの株のみの値を表示できます。このため、これらのグラフには凡例は表示されません。系列ラベル(株の名前)をグラフのタイトルに表示する必要があります。

24.3.13.6 ローソク足株価チャート: 出来高付き始値-終値

出来高付き始値-終値ローソク足株価チャートのデータ要件は次のとおりです。

  • 各株価マーカーには、始値、終値、出来高の順の3つのデータ値のグループが必要です。1日以上の株価データを表示する場合、月曜日に3つのデータ値、火曜日に3つのデータ値のように、データは3の倍数である必要があります。

  • データの系列(セット)は、1つの株のマーカーで示されます。ローソク株価チャートでは、1つの株のみの値を表示できます。このため、これらのグラフには凡例は表示されません。系列ラベル(株の名前)をグラフのタイトルに表示する必要があります。

24.3.13.7 ローソク足株価チャート: 始値-高値-安値-終値

始値-高値-安値-終値ローソク足株価チャートのデータ要件は次のとおりです。

  • 各株価マーカーには、始値、高値、安値、終値の順の4つのデータ値のグループが必要です。1日以上の株価データを表示する場合、月曜日に4つのデータ値、火曜日に4つのデータ値のように、データは4の倍数である必要があります。

  • データの系列(セット)は、1つの株のマーカーで示されます。ローソク株価チャートでは、1つの株のみの値を表示できます。このため、これらのグラフには凡例は表示されません。系列ラベル(株の名前)をグラフのタイトルに表示する必要があります。

24.3.13.8 株価チャート: 出来高付き始値-高値-安値-終値

出来高付き始値-高値-安値-終値ローソク足株価チャートのデータ要件は次のとおりです。

  • 各株価マーカーには、始値、高値、安値、終値、出来高の順の5つのデータ値のグループが必要です。1日以上の株価データを表示する場合、月曜日に5つのデータ値、火曜日に5つのデータ値のように、データは5の倍数である必要があります。

  • データの系列(セット)は、1つの株のマーカーで示されます。ローソク株価チャートでは、1つの株のみの値を表示できます。このため、これらのグラフには凡例は表示されません。系列ラベル(株の名前)をグラフのタイトルに表示する必要があります。

24.4 グラフの作成

グラフ・コンポーネントの作成には次のデータソースを使用できます。

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

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

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

「棒グラフの作成」ダイアログ

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

プロパティ・インスペクタで、各属性フィールドのドロップダウン・メニューを使用して、プロパティの説明、およびEL式ビルダーまたはその他の専用ダイアログの表示などのオプションを表示できます。図24-7に、棒グラフ・コンポーネントのvalue属性のドロップダウン・メニューを示します。

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

棒グラフのValue属性のドロップダウン・メニュー

注意:

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

表形式データからグラフを作成するプロセスのステップは次のとおりです。

  • グラフのマネージドBeanのメソッドでの表形式データの格納。

  • マネージドBeanに格納された表形式データを使用するグラフの作成。

24.4.2.1 グラフ用の表形式データのマネージドBeanへの格納

dvt:graphコンポーネントのtabularData属性では、グリッドの作成やデータの移入にグラフで使用するデータのリストを指定できます。このリストを作成するには、グラフのデータの系列とグループの理解およびリストの構造の知識が必要です。

24.4.2.1.1 データの系列およびグループ

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

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

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

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

24.4.2.1.2 表形式データのリストの構造

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

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

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

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

24.4.2.1.3 データのリストの例

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

図24-8 年間売上げの比較

グラフ用の表形式データ

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

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

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

グラフ・タグのtabularData属性を使用して、マネージドBeanのメソッドに格納されたデータを参照します。

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

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

  2. プロパティ・インスペクタの「グラフ・データ」セクションで、TabularData属性のドロップダウン・メニューをクリックし、「式ビルダー」を選択します。

  3. 次のダイアログから検索ボックスを使用してマネージドBeanを特定します。

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

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

式ビルダーでは、選択したマネージドBeanのメソッドを参照するよう、tabularData属性が設定されています。たとえば、sampleGraphという名前のマネージドBeanとgetTabularDataという名前のメソッドの場合、tabularData属性には#(sampleGraph.tabularData)と設定されます。

24.4.3 表形式データを使用してグラフを作成する場合の処理

tabularData属性を参照するリストから取得したデータを持つグラフを作成する場合、デフォルトでは集合縦棒グラフが作成されます。表形式データがそのグラフ・タイプのデータ要件を満たすかぎり、graphType属性の設定を50種類以上のグラフのいずれにも変更できます。グラフ・タグのその他多数の属性の設定も変更できます。

構造ウィンドウでグラフの子タグをdvt:<type>Graphノードにドラッグし、属性に設定を指定することでグラフをカスタマイズします。

24.4.4 グラフのイメージ形式について

グラフでは、HTML5、FlashおよびPNGなどのイメージ形式がサポートされています。使用されるイメージ形式は、アプリケーションの設定およびクライアント環境によって異なります。Skyrosスキンを使用している場合、デフォルトではグラフはHTML5イメージ形式を使用して表示されます。新しいアプリケーションでは、デフォルトでこのスキンが使用されます。

アプリケーションがカスタム・スキンを使用している場合は、アプリケーションのweb.xmlファイルにパラメータoracle.adf.view.rich.dvt.DEFAULT_IMAGE_FORMATを追加することにより、アプリケーションがHTML5形式を使用するように構成できます。web.xmlのコンテキスト初期化パラメータの詳細は、第A.2.3.25項「グラフとゲージのイメージ形式」を参照してください。スキニングとスタイルの詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。

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

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

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

  • Portable Network Graphics (PNG)出力形式。グラフを印刷する場合は、PNG出力形式も使用されます。PNG出力形式を使用する場合、静的レンダリングは十分にサポートされますが、次の特定のインタラクティブ機能は使用できません。

    • アニメーション

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

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

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

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

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

    • 選択項目

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

24.5 グラフ・タイプの変更

データ・コントロール・パネルまたはコンポーネント・パレットを使用してグラフを挿入する場合、コンポーネント・ギャラリに使用できるグラフのカテゴリ、タイプおよびクイック・スタート・レイアウトのオプションが表示され、そこから選択できます。グラフ・タイプを選択すると、そのグラフのsubType属性が設定されます。ファンネル・グラフとレーダー・グラフ以外のすべてのグラフ・タイプを変更できます。

グラフのタイプを変更する手順:

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

  2. プロパティ・インスペクタの「共通」属性カテゴリで、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グラフ。

24.6 グラフの外観のカスタマイズ

大部分のADFグラフ・タイプに、カスタマイズ可能な一般的な機能があります。次のタイプのカスタマイズが、大半のグラフ・タイプでサポートされています。


注意:

JDeveloperでは、無効な色の値を避けるため、グラフ要素で色関連の属性を指定する場合に色の選択ダイアログが用意されています。


ビジュアル・エディタでグラフ・コンポーネントを編集する場合、グラフ機能のカスタマイズに対応するために特殊なコンテキスト・メニューやプロパティ・インスペクタのボタンを利用できます。エディタのポップアップにより、カスタマイズするグラフ機能の選択内容が確認されます。たとえば、図24-9に、折れ線グラフの描画エリアに表示されるポップアップを示します。

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

ビジュアル・エディタに描画エリアを表示するポップアップ。

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

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

プロパティ・インスペクタと同期する描画エリアのコンテキスト・メニュー。

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

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

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

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

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

散布図の場合、系列のデータ・マーカーの形や色を分けて、データ値の関係を表示することができます。詳細は、24.7.4項「散布図の系列マーカーのカスタマイズ」を参照してください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

24.6.1.2 系列のアイテムの表示/非表示を有効にする方法

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

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

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

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

    • none: デフォルト値。系列の表示および非表示の動作は有効ではありません。

    • withRescale: 表示可能な系列のみを表示するようにグラフのサイズを変更します。

    • withoutRescale: 系列を非表示にしますが、グラフのサイズは変更しません。

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

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

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

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

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

例24-4 ページ定義ファイルのカテゴリ・データ値の名前

<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:convertNumberaf:convertDateTimeおよびaf:convertColorを使用して、カテゴリ属性の書式を指定できます。

たとえば、例24-4のページ定義で定義される雇用日とボーナスのカテゴリ・データ値の書式を設定できます。

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

  1. 構造ウィンドウでdvt:<type>Graphを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「属性フォーマット」と選択します。

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

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

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

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

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

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

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

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

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

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

<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

注意:

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


24.6.2.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属性を指定して、スライスで表される値を表示し、それに応じて数値の書式を設定します。

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

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

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

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

  4. af:convertNumberタグには、プロパティ・インスペクタで、通貨記号にドル記号を使用して通貨の値を指定します。

例24-6に、円グラフのスライス・ラベルの数値データ値を通貨として表示するように設定し、ドル記号を使用する場合に生成されるXMLコードを示します。

例24-6 円グラフのスライス・ラベルの数値データ値の書式設定

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

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

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

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

  1. 構造ウィンドウでdvt:<type>Graphノードを右クリックし、「dvt:<type>Graphの中に挿入」「ADFデータ視覚化」「マーカー・テキスト」と選択します。

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

    たとえば、グラフのテキストを表示するには、rendered属性にtrueを選択します。

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

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

  5. プロパティ・インスペクタで、「数値書式の構成」をクリックして、af:convertNumberタグの属性に必要な値を指定します。

    たとえば、マーカー・テキストの後にパーセンテージ記号を配置するには、type属性にpercent値を選択します。

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

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

<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にする場合、グラフではパターン属性が消去されます。つまり、グラフでパーセント書式設定が強制される場合、パターンは無視されます。これは、円グラフ、パレート・グラフ、ファンネル・グラフおよびすべての棒グラフ、折れ線グラフ、または面パーセント・グラフに適用されます。


24.6.2.3 自動スケーリングと精度について

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

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

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

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

  • 注釈: dvt:annotationタグのみ。

  • 軸のタイトル: dvt:o1Titledvt:x1Titledvt:y1Titleおよびdvt:y2Titleタグ。

  • 軸のティック・ラベル: dvt:o1TickLabeldvt:x1TickLabeldvt:y1TickLabelおよびdvt:y2TickLabelタグ。

  • グラフのタイトル: dvt:graphFootnotedvt:graphSubtitleおよびdvt:graphTitleタグ。

  • 凡例: dvt:legendTextタグのみ。

  • マーカー: dvt:markerTextタグのみ。

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

24.6.3.1 スキンを使用したグラフ・フォントのグローバルな設定方法

アプリケーションのすべてのページに渡ってグラフ・コンポーネントのfont属性をグローバルに設定するには、カスケード・スタイルシート(CSS)を使用してスキンを構築し、そのスキンを使用するようにアプリケーションを構成します。グラフ・コンポーネントで使用されるフォントを定義するスキンを適用すると、アプリケーションのページ数が減り、さらにまとめられます。CSSファイルを変更することで一貫したスタイルが容易に変更されます。

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

  • af|dvt-graph

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

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

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

    • -tr-font-family: フォント・ファミリ(名前)を指定します。複数のフォントは使用できません。複数のフォントを指定すると、最初のフォントが使用されます。

    • -tr-font-size: フォントのサイズを指定します。絶対サイズの単位は次のように定義されます。

      • pt: ポイント - CSS2で使用される標準フォント・サイズ。1ポイントは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の色の名前です。ワールド・ワイド・コンソーシアムには、次の17色の有効な名称が記載されています。aquablackbluefuchsiagraygreenlimemaroonnavyoliveorange(CSS 2.1)、purpleredsilvertealwhiteyellow

      3、6または8桁のHEX(8桁のHEXでは、アルファ・チャネルは最初の2桁)、RGBまたはRGBAも使用できます。

    たとえば、mySkin.cssファイルでグラフのすべてのタイトルにフォント・ファミリを次のように指定します。

    af|dvt-graphTitle
    {
      -tr-font-family: Comic Sans MS;
    }
    
  2. trinidad-skins.xmlファイルでアプリケーションにカスタム・スキンを登録します。

    カスタム・スキン登録の詳細は、第20.2.3項「カスタム・スキンの登録方法」を参照してください。

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

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

  4. カスタム・スキンをjarファイルにパッケージ化して、アプリケーションと一緒にデプロイします。スキンを定義し、CSSファイルを参照するtrinidad-skins.xmlファイルは、META-INFディレクトリに内に存在する必要があります。

    カスタム・スキンのパッケージ化の詳細は、第20.7項「JARファイルへのカスタム・スキン・ファイルのデプロイ」を参照してください。

アプリケーションへのカスタム・スキン適用の詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。

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

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

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

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

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

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

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

    inlineStyle="width:200px;height:200px"
    

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

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

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

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

  2. プロパティ・インスペクタの「動作」属性カテゴリで、DynamicResize属性に「DYNAMIC_SIZE」を選択します。

  3. プロパティ・インスペクタの「スタイル」属性カテゴリで、InlineStyle属性の幅と高さの両方に、ピクセルの定数または相対的割合を入力します。

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


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

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


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

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

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

  1. グラフに用意されている標準スタイルシートを使用する場合は、次のようにします。

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

    2. 「外観」属性ウィンドウで、style属性ドロップダウン・リストからスタイルシートを選択します。

  2. カスタム・スタイルシートを使用する場合は、プロパティ・インスペクタの「スタイル」セクションで次の属性を設定します。

    1. StyleClass属性に対し、「プロパティ」メニュー選択肢から「編集」を選択し、このゲージに使用するCSSスタイル・クラスを選択します。

    2. InlineStyle属性の幅と高さに、ピクセルの定数または相対的割合を入力します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    2. プロパティ・インスペクタを使用して、カスタマイズする属性の色をdvt:graphPlotAreaタグに入力します。

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

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

    2. プロパティ・インスペクタを使用して、カスタマイズする属性の色をdvt:graphPieFrameタグに入力します。


注意:

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


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

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

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

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

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

    1. 構造ウィンドウでdvt:<type>Graphノードを右クリックし、「dvt:<type>Graphの中に挿入」「ADFデータ視覚化」「グラフ・タイトル」と選択します。

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

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

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

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

    1. 構造ウィンドウでdvt:<type>Graphノードを右クリックし、「dvt:<type>Graphの中に挿入」「ADFデータ視覚化」「サブタイトル」と選択します。

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

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

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

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

    1. 構造ウィンドウでdvt:<type>Graphノードを右クリックし、「dvt:<type>Graphの中に挿入」「ADFデータ視覚化」「脚注」と選択します。

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

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

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

24.6.6 グラフの軸とラベルのカスタマイズ

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

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

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

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

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

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

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

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

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

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

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


    注意:

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


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

  1. 構造ウィンドウでdvt:<type>Graphノードを右クリックし、「dvt:<type>Graphの中に挿入」「ADFデータ視覚化」「X1タイトル」と選択します。

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

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

    1. 構造ウィンドウでdvt:x1Titleノードを右クリックし、「dvt:x1Titleの中に挿入」「フォント」と選択します。

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

他のグラフの軸のタイトルと外観を制御する手順は、X軸に対する手順と似ています。ただし、カスタマイズする特定の軸に関連付けるタイトルのタグを挿入します。

24.6.6.2 軸のスクロールの指定方法

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

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

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

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

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

  • on: スクロールは有効です。スクロール・バーが常に存在します。

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

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

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

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

  • 主ティック:軸のティック・マークの色、幅とスタイルを制御します。dvt:o1MajorTickdvt:x1MajorTickdvt:y1MajorTickおよびdvt:y2MajorTickのタグがあります。主ティックの増分は、デフォルトで自動的に計算されるか、majorIncrement属性を使用してティック・ステップを指定できます。

  • 副ティック: 軸の副ティック・マークの色、幅およびスタイルを制御します。dvt:x1MinorTickdvt:y1MinorTickおよびdvt:y2MinorTickのタグがあります。副ティックの増分は、デフォルトで主ティック増分の半分になるか、minorIncrement属性を使用してティック・ステップを指定できます。副ティックはラベルをサポートしていません。

  • ティック・ラベル: 主ティック・ラベルの向きを制御し、ラベルのフォント特性を指定できます。dvt:o1TickLabeldvt:x1TickLabeldvt:y1TickLabelおよびdvt:y2TickLabelのタグがあります。これらのタグは、ラベルのフォント特性を変更するdvt:graphFont子タグを持つこともできます。

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

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

    あるいは、構造ウィンドウでdvt:o1Axis要素を選択してから、プロパティ・インスペクタでo1Axisの構成ボタンをクリックして「値ラベル」を選択します。

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

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


      注意:

      最適な結果を得るには、90度の倍数の回転角度を使用します。Flashイメージ・タイプの場合、回転したテキストを90度以外の角度でサポートするには埋込みフォントが必要です。埋込みフォントはすべてのロケールで使用できるわけではありません。


    • TickLabelSkipMode: ティック・ラベルが順序軸に表示されるかどうか、またその表示方法の指定に使用します。TLS_MANUALで値を設定する場合、オプションでtickLabelSkipCountを使用して、ティック・ラベルとtickLabelSkipFirstとの間に表示するティック・ラベルの数を設定し、スキップする最初のティック・ラベルの索引を設定できます。

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

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

  1. 構造ウィンドウでdvt:<type>Graphノードを右クリックし、「dvt:<type>Graphの中に挿入」「ADFデータ視覚化」「X1主ティック」と選択します。

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

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

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

    1. 構造ウィンドウでdvt:<type>Graphノードを右クリックし、「dvt:<type>Graphの中に挿入」「ADFデータ視覚化」「X1副ティック」と選択します。

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


      注意:

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


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

24.6.6.4 軸の数値の書式設定方法

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

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

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

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

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

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

  1. 構造ウィンドウでdvt:<type>Graphノードを右クリックし、「dvt:<type>Graphの中に挿入」「ADFデータ視覚化」「Y1軸」と選択します。

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

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

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

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

24.6.7 グラフの凡例のカスタマイズ

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

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

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

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

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

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

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

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

    • Scrolling: 値asNeededを使用して、必要な領域が使用可能な領域を超える場合の凡例エリアのスクロールを指定します。デフォルトでは、値はoffに設定されています。

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

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

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

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

    1. 構造ウィンドウでdvt:<type>Graphノードを右クリックし、「dvt:<type>Graphの中に挿入」「ADFデータ視覚化」「凡例テキスト」と選択します。

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

    3. dvt:legendTextノードを右クリックし、「dvt:legendTextの中に挿入」「フォント」と選択します。

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

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

    1. 構造ウィンドウでdvt:<type>Graphノードを右クリックし、「dvt:<type>Graphの中に挿入」「ADFデータ視覚化」「凡例タイトル」と選択します。

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

    3. dvt:legendTitleノードを右クリックし、「dvt:legendTitleの中に挿入」「フォント」と選択します。

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

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

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

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

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

  • MarkerTooltipType: マーカー(棒など)にツールチップを表示するかどうかを指定し、ツールチップに表示する情報の種類を特定します。テキストのみ、値のみ、あるいはテキストと値の情報を表示できます。特定のグラフ・タイプでは、積上げグラフ・マーカーごとに累積データ値を表示したり、円グラフのスライス・マーカーごとに割合のデータを表示できます。

  • SeriesTooltipLabel: 凡例に表示される値のセットごとにツールチップを表示するかどうかを指定します。この属性では、系列ツールチップに表示される情報の種類も制御されます。たとえば、系列全体を示す一般的な語(「製品」など)のテキストを表示するか、系列の特定のメンバーを示す特定の語(特定の製品名など)のテキストを表示するかを選択できます。


    注意:

    グラフでは、グラフのmarkerTooltipType属性にテキストを含む設定が行われている場合のみ、系列のツールチップ・ラベルが表示されます。


  • GroupTooltipLabelType: 軸に沿ってデータ・グループにツールチップ・ラベルを表示するかどうかを指定します。たとえば、特定の製品の売上げが年ごとまたは四半期ごとにまとめられているとします。グループ全体を示す一般的な語(「時間」など)のテキストを表示するか、グループの各メンバーを示す特定の語(四半期を表すQ1、Q2、Q3、Q4など)のテキストを表示するかを選択できます。

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

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

表24-1で、サポートされるトークンについて説明します。

表24-1 markerTooltipTemplate文字列トークン

トークン 説明

NEW_LINE

新しい行を挿入します。

SERIES_LABEL

このマーカーの系列の系列ラベル。

GROUP_LABEL

このマーカーのグループのグループ・ラベル。

X_VALUE

散布図またはバブルのマーカー、あるいは連続軸マーカーのX値。

Y_VALUE

このマーカーのY値(このマーカーにY値がある場合)。

Z_VALUE

バブル・マーカーのZ値(バブル・サイズ)。

PIE_VALUE

円グラフのスライスの値。

PIE_PERCENT

円グラフのスライスのパーセンテージ値。

ACTUAL_VALUE

ファンネル・スライスの実際の値。

TARGET_VALUE

ファンネル・スライスのターゲット値。

HIGH_VALUE

株価マーカーの高値。

LOW_VALUE

株価マーカーの低値。

CLOSE_VALUE

株価マーカーの終値。

OPEN_VALUE

株価マーカーの開始値。

VOLUME_VALUE

株価容量マーカーの容量値。

CUM_VALUE

積上げグラフの累積積上げ値。

CUM_PERCENT

積上げパーセント・グラフまたはパレート・グラフの累積パーセンテージ値。


24.7 特定のグラフ・タイプの外観のカスタマイズ

グラフ・コンポーネントでは、50以上のグラフ・タイプがサポートされます。一部のグラフ属性といくつかの子タグは、特定のグラフ・タイプにのみ関連します。

24.7.1 円グラフの外観の変更

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

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

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

  • dvt:pieFeelerタグ: 円グラフのスライスからスライス・ラベルへ延びる線(引出線と呼ばれる)の色を指定します。

  • dvt:sliceタグ: 円グラフのスライスのラベルの位置を指定します。

  • dvt:sliceLabelタグ: 円グラフまたはドーナツ・グラフの各スライスを説明するラベルの特性を指定します。各スライスはデータ値を表します。このタグのtextType属性を使用して、スライス・ラベルにテキストのみを表示するか、割合のみを表示するか、テキストと割合を表示するかを示します。数値を書式設定する場合やフォント特性を指定する場合は、dvt:sliceLabelタグ内にdvt:graphFontおよびaf:convertNumberタグを子として追加します。

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

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

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

開始する前に:

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

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

  1. 円グラフの1つのスライスを切り離すには、プロパティ・インスペクタで、円グラフから切り離すスライスを示すseriesタグのPieSliceExplode属性に、0から100の値を設定します。100が、使用できる最大の切離し距離です。

  2. 円グラフのスライスにアニメーションを使用するには、プロパティ・インスペクタで、dvt:pieGraphタグのInteractiveSliceBehavior属性を設定します。次の値の任意の組合せが有効です。

    • none: インタラクティブなスライスの動作は有効ではありません。

    • explode: クリックすると、円グラフのスライスが切り離されます。

    • explodeAll: Explode AllおよびUnite Allオプションをコンテキスト・メニューに追加します。

    たとえば、次のコードでは、ユーザーが円グラフのスライスを切り離し、コンテキスト・メニューを使用して、グラフのすべてのスライスの切離しや結合を指定できます。

    <dvt:pieGraph interactiveSliceBehavior="explode explodeAll"/>
    

注意:

Flashイメージ形式で使用できる属性はinteractiveSliceBehaviorのみです。また、pieSliceExplode属性は、すべてのイメージ形式で使用できます。


24.7.2 グラフの線の外観の変更

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

24.7.2.1 グラフにデータ線またはマーカーを表示する方法

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

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

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

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

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

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

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

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


注意:

lineDisplayed属性とmarkerDisplayed属性はどちらもFalseに設定しないでください。


24.7.2.2 グラフ系列の線の外観の変更方法

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

  • dvt:seriesSetタグで次の属性に値を指定すると、タグ内のすべてのdvt:seriesタグに作用します。

    • defaultMarkerShape: 折れ線グラフ、散布図および組合せグラフにのみ使用されます。系列セット内のすべての系列のデフォルト・マーカーの形状を示します。

    • defaultMarkerType: 組合せグラフにのみ使用されます。有効な値は、MT_AREAMT_BARMT_MARKERおよびMT_DEFAULTです。

  • dvt:seriesタグで、次の線属性を使用して個々の系列の設定を指定できます。

    • lineWidth: 線の幅をピクセルで指定します。

    • lineStyle: グラフで実線、点線、ダッシュ線、ダッシュと点の組合せの線のいずれを使用するかを指定します。

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

24.7.3 パレート・グラフのカスタマイズ

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

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

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

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

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

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

  2. プロパティ・インスペクタで、このタグの属性に値を指定します。

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

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

24.7.4 散布図の系列マーカーのカスタマイズ

散布図では、系列の関連データ値は、データ・マーカーの形や色で表されます。系列のマーカーの形や色を分類して、データ値の関係を表示できます。

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

図24-11 系列マーカーを使用する散布図

1つの系列を使用する散布図。

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

図24-12 系列アイテム・マーカーを使用する散布図

個別の系列アイテムを使用する散布図

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

  • markerShape - マーカーの色の設定に使用する行ヘッダー属性名を指定します。この属性を指定しない場合、グラフには、デフォルトの索引ベースの系列マーカーの色が表示されます。

  • markerColor - マーカーの形の設定に使用する行ヘッダー属性名を指定します。この属性を指定しない場合、グラフには、デフォルトの索引ベースの系列マーカーの形が表示されます。

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

<dvt:scatterGraph markerColor="Product" markerShape="Brand" value="#{bindings.View1.graphModel}"/>

24.8 特殊な機能のグラフへの追加

グラフのカスタマイズ機能には、系列に関連する参照線や軸に関連する参照領域を定義する機能、グラデーション特殊効果をグラフの数箇所に追加するオプション、グラフの一部を透明色に設定するオプション、およびグラフでのアラートと注釈の使用などがあります。また、これらの特殊機能により、グラフのインタラクティブな機能も使用できます。たとえば、コンテキスト・メニューを表示したり、ズームまたはスクロールのレベルが変更された場合やユーザーがグラフのデータ・マーカーをクリックした場合に応答したりできます。

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

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

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

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

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

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

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

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

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

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

  1. 構造ウィンドウでdvt:<type>Graphノードを右クリックし、「dvt:<type>Graphの中に挿入」「ADFデータ視覚化」「参照オブジェクト・セット」と選択します。

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

  3. 特定の軸に関連する参照領域を定義する場合は、プロパティ・インスペクタで、関連付けられている表示属性のドロップダウン・メニューを使用して、いつ参照領域を表示するかを指定します。X1軸、Y1軸およびY2軸の参照領域をいつ表示するか(displayX1displayY1およびdisplayY2の各属性)を指定するか、データ系列の表示設定(displaySeries属性)を指定できます。

    たとえば、参照領域をデフォルトのY1軸に関連付ける場合は、displayY1属性のドロップダウン・メニューを使用して、参照領域の表示をRO_DISPLAY_AUTOMATICまたはRO_DISPLAY_NEVERに変更します。デフォルトでは、この値はRO_DISPLAY_ALWAYSに設定され、グラフには常に参照領域が表示されます。

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

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

  4. 構造ウィンドウでdvt:referenceObjectSetノードを右クリックし、「dvt:referenceObjectSetの中に挿入」「参照オブジェクト」と選択します。

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

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

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

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

    3. 参照領域を作成する場合、指定した軸の参照領域を示す高低の値を指定します。

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

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

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

設計時に参照線または領域を作成すると、JSFページのグラフのXML内にXMLコードが生成されます。参照オブジェクト(線も領域も)は、dvt:referenceObjectSetタグでラップされます。例24-8に、Y1軸に関連付けられている3つの参照領域、Y2軸に関連付けられている1つの参照領域と、異なる系列に関連付けられている4つの参照線のコードを示します。

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

<dvt:barGraph value ="#{sampleGraph.graphDataModel}" graphType="BAR_VERT_CLUST2Y">
  <dvt:referenceObjectSet displayX1="RO_DISPLAY_AUTOMATIC"
                          displayY2="RO_DISPLAY_AUTOMATIC">
    <dvt:referenceObject index="1" type="RO_AREA" association="Y1AXIS"
                         location="RO_BACK" color="#55FF0000" lowValue="0"
                         highValue="4000"
                         displayedInLegend="true" text="Low"/>
    <dvt:referenceObject index="2" type="RO_AREA" association="Y1AXIS"
                         location="RO_BACK" color="#55FFFF00" lowValue="4000"
                         highValue="10000"
                         displayedInLegend="true" text="Medium"/>
    <dvt:referenceObject index="3" type="RO_AREA" association="Y1AXIS"
                         location="RO_BACK" color="#5500FF00" lowValue="10000"
                         highValue="18000"
                         displayedInLegend="true" text="High"/>
    <dvt:referenceObject index="4" type="RO_AREA" association="Y2AXIS"
                         location="RO_FRONT" color="#550000FF" lowValue="300"
                         highValue="700"/>
    <dvt:referenceObject index="5" type="RO_LINE" association="SERIES" series="0"
                         location="RO_FRONT" color="#ffff66" lineValue="5000"
                         lineWidth="3" lineStyle="LS_SOLID"/>
    <dvt:referenceObject index="6" type="RO_LINE" association="SERIES" series="0"
                         location="RO_FRONT" color="#ffff66" lineValue="16730"
                         lineWidth="3" lineStyle="LS_SOLID"/>
    <dvt:referenceObject index="7" type="RO_LINE" association="SERIES" series="1"
                         location="RO_BACK" color="#99cc66" lineValue="500"
                         lineWidth="3" lineStyle="LS_SOLID"/>
    <dvt:referenceObject index="8" type="RO_LINE" association="SERIES" series="1"
                         location="RO_BACK" color="#99cc66" lineValue="1711"
                         lineWidth="3" lineStyle="LS_SOLID"/>
  </dvt:referenceObjectSet>
</dvt:barGraph>

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

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

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

  1. 実行時に作成する子コンポーネント参照オブジェクトのマップを作成するメソッドを記述します。例24-9に、このメソッドを作成するコードを示します。

  2. 構造ウィンドウでdvt:<type>Graphノードを右クリックし、「dvt:<type>Graphの中に挿入」「ADFデータ視覚化」「参照オブジェクト・セット」と選択します。

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

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

    たとえば、(sampleGraph)マネージドBeanとgetReferenceObjectMapListメソッドの場合、属性にreferenceObjectMap="#{sampleGraph.referenceObjectMapList}"と設定します。

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

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

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

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

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

  • グラフの背景: dvt:backgroundタグを使用します。

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

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

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

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


    注意:

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


  • 時間セレクタ: dvt:timeSelectorタグを使用します。

  • 参照領域: dvt:referenceObjectタグを使用します。

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

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

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

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

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

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

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

  2. 選択した子ノードにdvt:specialEffects子ノードが含まれていない場合は、グラフ・ノードの子ノードを右クリックして、「dvt:<childnode>の中に挿入」「特殊効果」と選択します。

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

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

    1. fillType属性の場合、FT_GRADIENTを選択します。

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

    2. numStops属性には、グラデーションに使用するストップの数を入力します。

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

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

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

    2. gradientStopColor属性には、グラデーション内のこの部分に使用する色を入力します。

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

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

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

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

例24-10 グラデーションをグラフの背景に追加する場合に生成される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>

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

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

  • グラフの背景: dvt:backgroundタグを使用します。デフォルトでは、fillTransparent属性はtrueに設定されています。

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

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

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

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

ユーザーがバブル・グラフのバブルや散布図内の形状など、グラフのデータ・マーカーを1つ以上選択したときに、プログラムで応答できるようにするには、選択サポートを追加します。

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

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

選択サポートが有効な棒グラフ

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

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

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

複数選択がサポートされた棒グラフ

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

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

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

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

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

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

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

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

  1. マネージドBeanにメソッドを追加して、選択イベントに応答するリスナー・メソッドを定義します。マネージドBeanの詳細は、第2.6.1項「JDeveloperでのマネージドBeanの作成方法」を参照してください。

  2. ページにグラフを追加します。詳細は、第24.4項「グラフの作成」を参照してください。

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

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

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

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

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

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

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

    たとえば、この項の複数選択の例と同じ構成を行うには、ページにaf:outputFormattedコンポーネントを追加して、例24-12に示すような選択の詳細を返すように構成します。af:outputFormattedコンポーネントの構成の詳細は、第16章「出力コンポーネントの使用」を参照してください。

24.8.4.2 グラフのデータ・マーカー選択について

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

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

24.8.5 グラフへのコンテキスト・メニューの追加

グラフは、次の3つのタイプのファセットを使用して、右クリックのコンテキスト・メニューをサポートします。

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

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

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

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

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

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

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

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

各ファセットは、1つの子コンポーネントをサポートします。これらのファセットがすべて機能するには、特定のグラフ・タイプに対して選択を有効にしてサポートする必要があります。コンテキスト・メニューが表示されるのは、現時点ではFlashおよびHTML5イメージ形式の場合のみです。

Flashレンダリング形式を使用する場合、技術的な制限があるため、現在、コンテキスト・メニューのコンテンツは、Flash Playerのコンテキスト・メニューを使用して表示されます。このため、Flash Playerで定義されるいくつかの制限が課せられます。詳細は、24.8.5.2項「Flashレンダリング形式について」を参照してください。

図24-15に、HTML5イメージ形式でレンダリングされるカスタム・メニュー・アイテムを持つ散布図のコンテキスト・メニューを示します。

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

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

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

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

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

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

例24-14 カスタム・コンテキスト・メニューを作成するマネージド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は、例24-15に表示されるSelectionSampleクラスを呼び出します。このクラスのコードを追加のマネージドBeanに格納します。

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

24.8.5.2 Flashレンダリング形式について

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

  • Flashでは、コンテキスト・メニューのサブメニューは許可されません。

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

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

  • 各メニュー・キャプションには、1つ以上の表示可能な文字を含める必要があります。制御文字、新しい行、空白文字は無視されます。100文字を超えるキャプションは不可です。

  • 一致するアイテムを表示するかどうかを問わず、別のカスタム・アイテムと同一のメニュー・キャプションは無視されます。大文字/小文字、句読点、空白を問わず、メニュー・キャプションは、組込みキャプションまたは既存のカスタム・キャプションと比較されます。

  • 次のキャプションは許可されません。ただし、単語同士をつなげて使用して、カスタム・キャプションを作成できます。SaveZoom InZoom Out100%Show AllQualityPlayLoopRewindForwardBackMovie not loadedAboutPrintShow Redraw RegionsDebuggerUndoCutCopyPasteDeleteSelect AllOpenOpen in new windowCopy link

  • 次の単語は、それ自体または他の単語と一緒にカスタム・キャプションで表示することはできません。AdobeMacromediaFlash PlayerSettings

さらに、コンテキスト・メニュー・アイテムのFlashのリクエストは同期呼出しであるため、コンテキスト・メニューの開始時に、ELを評価するサーバー・リクエストは使用できません。選択したオブジェクトごとに異なるコンテキスト・メニューを提供するために、コンテキスト・メニューのポップアップでcontentDelivery="lazyUncached"設定が使用される場合、メニューはあらかじめフェッチされます。状態ごとに異なるコンテキスト・メニューの場合、メニュー定義内のEL式がレンダリング時に繰り返し呼び出されます。選択内容と通貨状態は異なります。あらかじめフェッチされたこれらのコンテキスト・メニューを使用する場合、アプリケーションでは次の事項を認識しておく必要があります。

  • コンテキスト・メニューの表示方法の決定に使用できるEL式で、長時間のコードや速度が遅いコードを実行しないでください。これは、メニュー・アイテムの選択後に呼ばれるaf:commandMenuItem属性(actionListenerなど)には適用されません。

  • 今後、Flashの制限が解決された場合、ADFコンテキスト・メニューがFlashコンテキスト・メニューのかわりに表示されます。アップグレードの互換性を確保するには、メニューがあらかじめフェッチされている場合と、メニューの開始時にEL式が評価される場合の両方でEL式が機能するようにコードを作成する必要があります。アプリケーションが依存するコンポーネントの状態は、selectioncurrencyのみです。

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

グラフでズームおよびスクロール・レベルが変更されたときに実行されるカスタム・コードを指定できます。マネージドBeanには、入力をZoomEventまたはScrollEventと解釈するメソッドを格納します。このイベントを使用すると、ユーザーはズームされる軸およびズームされた軸の現在の範囲を決定できます。

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

  1. マネージドBeanに、ズームまたはスクロール・イベントがトリガーされたときの動作を実行するカスタム・メソッドを記述します。例24-16に、このメソッドを作成するコードを示します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    2. 「TimeRelativeRange」フィールドに、相対範囲をミリ秒で指定します。

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

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

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

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

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

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

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

    1. 「TimeRangeMode」フィールドで、属性のドロップダウン・メニューから「TRM_EXPLICIT」を選択します。

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

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

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

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

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

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

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

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

開始する前に:

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

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

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

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

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

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

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

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

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

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

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

    // Add this import to your bean
    import java.util.Date;
    
    // Add these variables to your bean
    private static java.sql.Date m_startDate = java.sql.Date.valueOf("2011-01-02");
    private static java.sql.Date m_endDate = java.sql.Date.valueOf("2011-01-04");
    
    // Add these methods to your bean
    public Date getTimeAxisStartDate() {
      return m_startDate;
    }
    public Date getTimeAxisEndDate() {
      return m_endDate;
    }
    
  • オプションで、マネージドBeanに時間セレクタのリスナー用のメソッドを追加します。

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

    例24-18 時間セレクタのリスナーのサンプル・コード

    // Add these imports to your bean
    import java.util.Date;
    import oracle.adf.view.faces.bi.component.graph.UIGraph;
    import oracle.adf.view.faces.bi.event.TimeSelectorEvent;
    import javax.faces.event.AbortProcessingException;
    import java.text.DateFormat;
    
    // Add this method to your bean
    public void processTimeSelectorEvent(TimeSelectorEvent event) throws AbortProcessingException
    {
      java.sql.Date startDate = new java.sql.Date(event.getStartDate().getTime());
      java.sql.Date endDate = new java.sql.Date(event.getEndDate().getTime());
      DateFormat formatter = DateFormat.getDateTimeInstance(DateFormat.MEDIUM, DateFormat.MEDIUM);
      if (barGraph1 != null)
      {
        barGraph1.setTimeRangeStart(startDate);
        barGraph1.setTimeRangeEnd(endDate);
      }
    }
    

    この例では、barGraph1変数はページのバッキングBeanでUIGraphとして宣言されています。ユーザーがマスター・グラフで時間セレクタの範囲を変更すると、リスナーのコードによってディテール・グラフに新しい時間範囲が設定されます。

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

  1. 構造ウィンドウでdvt:<type>Graphコンポーネントを右クリックし、GraphTypeの中に挿入」「ADFデータ視覚化」「時間セレクタ」と選択します。

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

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

    • 「ExplicitStart」フィールドに、時間範囲の初期の開始日を返すメソッドへの参照を指定します。

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

    • 「ExplicitEnd」フィールドに、時間範囲の初期の終了日を返すメソッドへの参照を指定します。

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

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

      デフォルトでは、色は6桁の16進数のRGB値として定義されます。時間セレクタが表示されると、タイム・セレクタの背後のデータは非表示になります。データを表示するには、色の値の前に2桁を追加して、時間セレクタの透明色を有効にします。たとえば、図24-16では、塗りつぶしの色は#88c6d6ffと定義されています。

    • 時間セレクタが画面上に表示されるかどうかを決定する透明色をオプションで有効にするには、FillTransparentのドロップダウン・メニューから「TRUE」を選択します。

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

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

    • オプションで透明色を有効にするには、BorderTransparentのドロップダウン・メニューからTRUEを選択します。

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

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

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

    例24-19 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と、例24-17で参照されているgetTimeAxisStartDate()メソッドの場合は、初期日付に#{timeSelectorDemo.timeAxisStartDate}と入力します。

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

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

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

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

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

アラートは、エラーや警告など、個別の記号で強調表示する必要のあるデータ値をグラフ上に定義します。アイコンはアラートの場所を示します。カーソルをアラート・アイコン上に移動すると、そのアラートのテキストが表示されます。アラートは、dvt:alertタグを使用してグラフにいくつでも定義できます。アラートはグラフ・タグの子であるdvt:alertSetタグにラップされます。例24-20に、面グラフのアラートのセットを示します。

例24-20 グラフのアラートのセットのサンプル・コード

<dvt:areaGraph>
  <dvt:alertSet>
    <dvt:alert xValue="Boston" yValue="3.50" yValueAssignment="Y1AXIS"
         imageSource="myWarning.gif"/>
    <dvt:alert xValue="Boston" yValue="5.50" yValueAssignment="Y1AXIS"
          imageSource="myError.gif"/> 
  </dvt:alertSet>
</dvt:areaGraph>

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

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

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

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

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

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

<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 - xValueおよびyValueで定義されるグラフ内の正確なポイントに両方の軸とともに注釈を配置します。他の注釈との重複は回避されません。

    • percentage - xValueおよびyValueを使用して、グラフの描画エリアのパーセンテージが0から100で定義される正確なポイントに、両方の軸とともに注釈を配置します。他の注釈との重複は回避されません。

  • xValue - 注釈を配置するX値を指定します。この設定は、注釈の位置がabsoluteまたはpercentageの場合にのみ適用されます。

  • yValue - 注釈を配置するY値を指定します。この設定は、注釈の位置がabsoluteまたはpercentageの場合にのみ適用されます。

  • horizontalAlignment - 注釈の横位置を指定します。この設定は、注釈のposition属性がabsoluteまたはpercentageの場合にのみ適用されます。有効な値は、LEFT(デフォルト)、CENTERLEADINGまたはRIGHTです。

  • verticalAlignment - 注釈の縦位置を指定します。この設定は、注釈のposition属性がabsoluteまたはpercentageの場合にのみ適用されます。有効な値は、CENTER(デフォルト)、TOPまたはBOTTOMです。

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

グラフ・コンポーネントdvt:areaGraphdvt:bubbleGraphdvt:barGraphdvt:lineGraphdvt:comboGraphdvt:pieGraphおよびdvt:scatterGraphは、グラフ・コンポーネントの初期表示や部分ページ・リフレッシュ(PPR)イベントのスライドショーの遷移などのアニメーション効果をサポートします。アニメーション効果は、グラフのanimationOnDisplayおよびanimationOnDataChangeプロパティで次の値を使用して指定されます。

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

24.9.1 アクティブ・データを表示するグラフ・コンポーネントの構成方法

アクティブ・データ・サービスを使用するには、データの変更時にイベントを公開するデータ・ソースが必要です。さらに、これらのイベントと、そのサービスを表す関連データ・コントロールに対応するビジネス・サービスを作成する必要があります。ADSとアプリケーションの構成の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「アクティブ・データ・サービスの使用」の章を参照してください。

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

アクティブ・データを表示するグラフを構成する手順:

  1. 構造ウィンドウでdvt:<type>Graphノードを右クリックし、「ページ定義に移動」を選択します。

  2. プロパティ・インスペクタで、ChangeEventPolicy属性のドロップダウン・メニューから、「プッシュ」を選択します。

24.9.2 グラフのアニメーション効果の指定方法

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

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

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

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

    • alphaFade

    • conveyorFromLeftまたはconveyorFromRight

    • cubeToLeftまたはcubeToRight

    • flipLeftまたはflipRight

    • slideToLeftまたはslideToRight

    • transitionToLeftまたはtransitionToRight

    • zoom

  • animationOnDataChange: 適用するデータ変化のアニメーションでデータ・タイプの指定に使用します。有効な値は次のとおりです。

    • none: データ変化のアニメーション効果は適用されません。

    • activeData(デフォルト): アクティブ・データ・サービス(ADS)のデータ変化のアニメーション・イベントが適用されます。

    • auto: 部分ページ・リフレッシュ(PPR)およびADSのデータ変化アニメーション・イベントを適用します。

    • alphaFade

    • conveyorFromLeftまたはconveyorFromRight

    • cubeToLeftまたはcubeToRight

    • flipLeftまたはflipRight

    • slideToLeftまたはslideToRight

    • transitionToLeftまたはtransitionToRight

    • zoom

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

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

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

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

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

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