| Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1（11.1.1） B52029-02 |
|
 戻る |
 次へ |
| Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1（11.1.1） B52029-02 |
|
戻る |
次へ |
この章では、データ・バインドされたADFグラフ・コンポーネントを使用してデータを表示する方法とグラフのカスタマイズ・オプションについて説明します。
この章に含まれる項は次のとおりです。
ADFグラフのデータ・バインディングの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたADFグラフの作成に関する項を参照してください。
グラフ・コンポーネントには、棒グラフ、円グラフ、折れ線グラフ、散布図、株価チャートなど、50種類以上のグラフを作成する機能が用意されています。このコンポーネントでは、複数軸の複数データ・ポイントを様々な方法で評価できます。たとえば、一群のグラフにより、あるグループからの結果と他のグループからの結果の比較が容易になります。
コンポーネント・ギャラリには使用可能なグラフのカテゴリ、タイプおよび説明が表示され、グラフの作成およびクイック・スタート・レイアウトの使用が視覚的にサポートされます。図24-1に、グラフのコンポーネント・ギャラリを示します。
コンポーネント・ギャラリを使用してグラフをJSFページに挿入すると、グラフのカスタマイズをサポートする子タグのセットが自動的に挿入されます。例24-1に、図24-1のコンポーネント・ギャラリでクイック・スタート・レイアウトを選択した横棒グラフのコードを示します。
例24-1 横棒グラフのサンプル・コード
<dvt:horizontalBarGraph id="horizontalBarGraph1"
value="#{bindings.SalesStageDataView1.graphModel}"
subType="BAR_HORIZ_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:horizontalBarGraph>
グラフには多数のDVTタグがあります。これは、グラフの種類が多く、グラフ・コンポーネントの柔軟性が非常に高いためです。各グラフ・タグ名は、タグがADF Data Visualization Tools（DVT）タグ・ライブラリの1つであることを示す接頭辞（dvt:）で始まります。次のリストに、グラフ・コンポーネントに関連するタグのグループを示します。
グラフ・タグ: dvt:graphタグでは、サポートされているグラフ・タイプのグラフのインスタンスを作成します。特定のグラフ・タイプにのみ有効なグラフ属性と子タグも一部ありますが、グラフ・タグには、グラフ属性の包括的なセットがあり、すべてのグラフ子タグの使用がサポートされます。このため、dvt:graphタグには、グラフ・タイプの選択、グラフのカスタマイズや、あるグラフ・タイプから別のタイプへの変更に対する十分な柔軟性があります。
|
注意: JDeveloperでは、コンポーネント・パレットからの宣言的挿入にdvt:graphタグを使用できません。このタグと子タグは、.jspxファイルのソース・コードに入力する必要があります。 |
グラフ固有のタグ: 12個のグラフ固有のタグは、よく使用されるグラフ・タイプを作成する簡便な方法です。コンポーネント・ギャラリでは、1つ以上のタイプおよび多様なクイック・スタート・レイアウト・オプションとともにグラフのカテゴリとして表示されます。これらのタグのリストと説明は、24.2.1項「グラフ固有のタグ」を参照してください。
一般的なグラフの子タグ: これらのタグは、カスタマイズ用に大部分のグラフ・タイプでサポートされます。これらのタグのリストと説明は、24.2.2項「一般的なグラフの子タグ」を参照してください。
グラフ・タイプの子タグ: これらのタグは、特定のグラフ・タイプまたはグラフの特定部分に使用します。これらのタグのリストと説明は、24.2.3項「グラフ固有の子タグ」を参照してください。
子セット・タグ: これらのタグは、無数の関連するタグのセットをラップします。これらのタグのリストと説明は、24.2.4項「子セット・タグ」を参照してください。
すべてのタグとその属性の詳細、および有効な値のリストは、DVTタグのドキュメントを参照してください。JDeveloperで特定のタグのドキュメントにアクセスするには、構造ウィンドウでタグを選択し、[F1]キーを押します。JDeveloperのヘルプでADF Data Visualization Toolsタグ・ライブラリにアクセスするには、オンライン・ヘルプの目次でJavadocとタグ・ライブラリ・リファレンスのノードを開き、「JDeveloperタグ・ライブラリ・リファレンス」トピックのタグ・ライブラリへのリンクをクリックします。
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:stockGraph: データが株の高値、安値および終値を示すグラフを作成します。各株価マーカーは、選択された株価チャートの種類に応じて2〜4個（オプションの出来高マーカー以外）の異なる値を表します。
次のリストで、一般的なカスタマイズの種類と関連する子タグについて説明します。
グラフに対するアニメーション効果: dvt:animationOnDisplayおよびdvt:animationOnDataChangeタグ。
カスタム・アイコンでデータ・ポイントを強調表示するアラート: dvt:alertSetおよびdvt:alertタグ。
特定のデータ・ポイントに対する注意事項を挿入する注釈: dvt:annotationSetおよびdvt:annotationタグ。
グラフの外観とタイトル: dvt:background、dvt:graphFont、dvt:graphFootnote、dvt:graphPlotArea、dvt:graphSubtitleおよびdvt:graphTitleタグ。
棒、面、線および円グラフのスライス（系列アイテムとも呼ばれる）の色と外観: dvt:seriesSetおよびdvt:seriesタグ。
凡例の外観: dvt:legendArea、dvt:legendTextおよびdvt:legendTitleタグ。
各軸に関連するマーカーのカスタマイズ: dvt:markerText、dvt:x1Format、dvt:y1Format、dvt:y2Formatおよびdvt:zFormatタグ。
参照線および参照領域: dvt:referenceObjectSetおよびdvt:referenceObjectタグ。
順序軸（カテゴリ軸とも呼ばれる）のカスタマイズ: dvt:01Axis、dvt:01MajorTick、dvt:01TickLabelおよびdvt:01Titleタグ。
X軸のカスタマイズ: dvt:x1Axis、dvt:x1MajorTick、dvt:x1TickLabelおよびdvt:x1Titleタグ。
Y1軸のカスタマイズ: dvt:y1Axis、dvt:y1BaseLine、dvt:y1MajorTick、dvt:y1TickLabelおよびdvt:y1Titleタグ。
Y2軸のカスタマイズ: dvt:y2Axis、dvt:y2BaseLine、dvt:y2MajorTick、dvt:y2TickLabelおよびdvt:y2Titleタグ。
次のリストで、グラフ固有のカスタマイズの種類と関連する子タグについて説明します。
dvt:background、dvt:legendArea、dvt:graphPlotArea、dvt:graphPieFrame、dvt:seriesまたはdvt:timeSelectorサブコンポーネントとの組合せでのみグラフに使用されるグラデーション: dvt:specialEffectsおよびdvt:gradientStopStyleタグ。
グラフのサブコンポーネントに対する相互作用の指定: dvt:shapeAttrbutesSetおよびdvt:shapeAttributesタグ。
dvt:sliceLabel、dvt:stockVolumeFormat、dvt:x1Axis、dvt:x1Format、dvt:y1Axis、dvt:y1Format、dvt:y2Axis、dvt:y2Format、dvt:zFormat、dvt:numberFormatタグの数値の書式設定。
面、棒、組合せ、線、積上げ棒グラフの時間軸のカスタマイズ: dvt:timeAxisDateFormatおよびdvt:timeSelectorタグ。
マスター/ディテール・グラフの時間軸の範囲の選択: dvt:timeSelectorタグ。
パレート・グラフ: dvt:paretoLineおよびdvt:paretoMarkerタグ。
円グラフ: dvt:graphPieFrame、dvt:pieFeeler、dvt:sliceおよびdvt:sliceLabelタグ。
株価チャート: dvt:stockMarker、dvt:stockVolumeformatおよびdvt:volumeMarkerタグ。
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>
グラフのデータ要件はグラフ・タイプによって異なります。データ要件は次のいずれかです。
幾何学的: 一部のグラフ・タイプでは、データの表示に特定の数のデータ・ポイントが必要です。たとえば、線には最低2つの点が必要なため、折れ線グラフには最低2グループのデータが必要です。
複雑: 一部のグラフ・タイプでは、マーカー（グラフで実際にデータを表すコンポーネント）ごとに複数のデータ・ポイントが必要です。たとえば、散布図では、X軸とY軸の交点にマーカーを置けるよう、グループごとに2つの値が必要です。各グループに必要なデータ・ポイントがグラフに使用したデータにない場合、グラフ・コンポーネントでは可能な範囲でグラフを表示します。
論理的: 一部のグラフ・タイプでは特定の種類のデータを受容しません。次に例を示します。
負のデータ: 円グラフまたはパーセンテージ棒グラフ、折れ線グラフ、面グラフには負のデータを渡すことはできません。パーセンテージ・グラフでは負のデータに対するマーカーは表示されません。
nullまたはゼロのデータ: nullデータに対するマーカーは生成されないため、nullデータのマーカーは表示されません。また、グラフがゼロ・データを受け取り、軸線がゼロにある場合、マーカーは見えません。ただし、軸線がゼロ以外にある場合、ゼロ・マーカーは見えます。
不十分なデータ・セット（系列）: 二重Yグラフでは、Y軸ごとにデータ・セットが必要です。通常、セットごとに異なる情報を表します。たとえば、Y1軸は特定の国および期間の売上げを表し、Y2軸はすべての国の売上げ合計を表します。Y軸データを1セットのみ渡した場合、グラフは2つの異なるY軸にデータを表示できません。データは1つのY軸に表示されます。
類似するグラフは、類似するデータ要件を共有します。たとえば、面グラフというカテゴリでは、次のようにグラフをグループ分けできます。
絶対面グラフ。
積上げ面グラフ。
パーセンテージ面グラフ。
面グラフは、データが塗りつぶされた領域で表されるグラフです。次の種類の面グラフが使用できます。
絶対: 各面マーカーは、一連の（2つ以上の）データ値を結びます。この種のグラフのバリエーションとして、単一Yの絶対面グラフと分割二重Yの絶対面グラフがあります。
分割二重Yグラフでは、描画エリアが2つのセクションに分割され、異なるY軸に割り当てられたデータ・セットは異なる描画エリアに表示されます。
積上げ: 面マーカーが積み上げられます。各データ・セットの値は前のセットの値に加算されます。積層のサイズが累積合計を表します。この種のグラフのバリエーションとして、単一Yの積上げ面グラフと分割二重Yの積上げ面グラフがあります。
パーセンテージ: 面マーカーは、すべてのデータ・セットの累積合計に対する割合を表します。
面グラフのデータのガイドラインは次のとおりです。
面グラフには最低2グループのデータが必要です。グループは、すべての面マーカーを通る横軸に沿った位置で表されます。3か月間のデータを示すグラフでは、このグループにJan、FebおよびMarなどのラベルが付けられます。
面グラフには1つ以上のデータ系列が必要です。塗りつぶされた領域はデータの系列またはセットを表し、アメリカ、ヨーロッパ、アジアなどの凡例テキストでラベルが付けられます。
パーセンテージ面グラフは負の数値を持つことができません。
二重Yグラフには2セットのデータが必要です。
棒グラフは、データが一連の棒として表されるグラフです。次の種類の棒グラフが使用できます。
集合: 棒の各まとまりが1グループのデータを表します。たとえば、データが従業員で分類されている場合、特定の従業員の給与の棒と歩合の棒が1つのまとまりとなります。この種のグラフのバリエーションとして、集合縦棒グラフと集合横棒グラフがあります。集合棒グラフのすべてのバリエーションは、単一Yグラフ、二重Yグラフおよび分割二重Yグラフにできます。
積上げ: 各データ・セットの棒が前のデータ・セットに追加されます。積層のサイズがデータの累積合計を表します。この種のグラフのバリエーションとして、積上げ縦棒グラフと積上げ横棒グラフがあります。積上げ棒グラフのすべてのバリエーションは、単一Yグラフ、二重Yグラフおよび分割二重Yグラフにできます。
パーセンテージ: 棒が積み上げられ、すべてのデータ・セットの累積合計に対する特定のデータ・セットの割合が表されます。パーセンテージ棒グラフは、単一Yグラフにのみできます。
棒グラフのデータのガイドラインは次のとおりです。
パーセンテージ棒グラフは負の数値を持つことができません。
二重Yグラフには2セットのデータが必要です。
バブル・グラフは、データが円形のデータ・マーカー（バブル）の位置とサイズで表されるグラフです。バブル・グラフの各データ・マーカーは3グループの値を表します。
1つ目のデータ値はX値です。マーカーのX軸上の位置を決めます。
2つ目のデータ値はY値です。マーカーのY軸上の位置を決めます。
3つ目のデータ値はZ値です。マーカーのサイズを決めます。
使用可能なバブル・グラフの種類は、単一Yのバブル・グラフと二重Yのバブル・グラフです。
バブル・グラフのデータのガイドラインは次のとおりです。
バブル・グラフでは、1つのデータ・マーカーにつき最低3つのデータ値が必要です。
複数グループのデータの場合、バブル・グラフでは3の倍数のデータが必要です。たとえば、特定のバブル・グラフで、Parisに3つ、Tokyoに3つなどのように値が必要です。3つの値の例には、X値が平均寿命、Y値が平均所得、Z値が人口を表す場合などがあります。
|
注意: バブル・グラフを見る際、マーカーのツールチップを確認することでデータ・グループを特定できます。ただし、グループを特定することは、データ・マーカーの全体的なパターンをつかむことに比べると重要ではありません。 |
組合せグラフでは異なるタイプのデータ・マーカーを使用して異なるデータ・セットを表示します。使用されるデータ・マーカーは、棒、面および線です。
組合せグラフのデータのガイドラインは次のとおりです。
組合せグラフには最低2セットのデータが必要です。そうでない場合、異なるマーカー・タイプを表示できません。
組合せグラフには最低2グループのデータが必要です。そうでない場合、面マーカーまたは線マーカーをレンダリングできません。
ファンネル・グラフは、プロセスのステップに関連するデータを視覚的に表したものです。ファンネルの特定のステップ（スライス）の値がそのスライスの割当てに近付いた分、スライスが塗りつぶされます。ファンネルは目標値、実績値およびレベルを色で表す3次元のチャートをレンダリングします。ファンネル・グラフでは、目標値を100%としてデータを表します。したがって、実績値が50で目標値が200の場合、スライスの25%が塗りつぶされます。
ファンネル・グラフのデータのガイドラインは次のとおりです。
ファンネル・グラフには2つの系列（データ・セット）が必要です。これらの2セットのデータは、目標データ値と実績データ値となります。しきい値はグラフの凡例に表示されます。
別の種類のファンネル・グラフには1セットのデータのみが必要です。このグラフに表示されるデータ値は合計値の割合です。このタイプのファンネル・グラフを作成するには、グラフのfunnelPercentMeasureプロパティをTrueに設定します。この設定は、グラフ用のXMLで行います。
ファンネル・グラフでは、最低1グループのデータをステージとして使用する必要があります。
折れ線グラフは、データを線、一連のデータ・ポイントまたは線で結ばれたデータ・ポイントとして表します。次の種類の折れ線グラフが使用できます。
絶対: 各線セグメントは2つのデータ・ポイントを結びます。この種のグラフでは、軸を単一Y、二重Yおよび分割二重Yにできます。
積上げ: 各データ・セットの線が前のデータ・セットに追加されます。積層のサイズがデータの累積合計を表します。この種のグラフでは、軸を単一Y、二重Yおよび分割二重Yにできます。
パーセンテージ: 線が積み上げられ、各線がすべてのデータ・セットの累積合計に対する特定のデータ・セットの割合を表します。パーセンテージ折れ線グラフは、単一Yグラフにのみできます。
折れ線グラフのデータのガイドラインは次のとおりです。
線には最低2つの点が必要なため、折れ線グラフには最低2グループのデータが必要です。グループは各色のマーカーで表されます。グループには、月の名前などのティック・ラベルが付けられます。
パーセンテージ折れ線グラフは負の数値を持つことができません。
二重Yグラフには2セットのデータが必要です。
パレート・グラフは、不具合の原因を特定することを目的として設計されています。パレート・グラフでは、一連の棒が異なる不具合の原因を表します。これらの棒は値の大きい方から順に並べられます。線は、グラフのすべての棒の合計値に対する棒の累積割合を示します。線は常に100%で終わります。
パレート・グラフは常に二重Yグラフです。Y1軸は棒が表す値に対応します。Y2軸は累積パーセンテージ値に対応します。
パレート・グラフのデータのガイドラインは次のとおりです。
パレート・グラフには最低2グループのデータが必要です。
パレート・グラフは負の数値を持つことができません。
パレート・グラフに複数セットのデータを渡した場合、最初のデータ・セットのみが使用されます。
パレート・グラフに対するデータの一部としてパーセンテージ値を渡さないでください。グラフは渡されたデータを基にパーセンテージを計算します。
円グラフは、データを1つ以上の円のセクションとして表し、円が切り分けられたパイのように見えます。次の種類の円グラフが使用できます。
円: 各円の中心は埋まっています。円グラフは、1つまたは複数の円で構成されます。
ドーナツ: 各円の中心が空いており、ここにパイの合計値が表示されます。ドーナツ・グラフは、1つまたは複数の輪で構成されます。
円グラフのデータ構造は次のとおりです。
各円またはドーナツは1グループのデータを表し、月の名前などのラベルが付きます。1グループのデータのみの場合、複数円または複数ドーナツ・グラフ・タイプを選択しても、1つの円またはドーナツのみが表示されます。また、すべてのデータがゼロのグループがある場合、そのグループに対する円またはドーナツは表示されません。
データの系列またはセットは、すべて同じ色のスライスで示されます。各データ・セットの凡例テキストが表示されます。たとえば、国別のデータ・セットがある場合、各国の名前が凡例テキストに表示されます。
円グラフのデータのガイドラインは次のとおりです。
円グラフは負の数値を持つことができません。
複数円グラフには最低2グループのデータが必要です。
極グラフは円形の散布図です。極グラフでは、散布図同様、データがデータ・マーカーの位置で表されます。極グラフでは、マーカーが表示される描画エリアは円形です。散布図の詳細は、24.3.11項を参照してください。
散布図同様、極グラフは、多数のデータ項目間の全体的な関連性を示す場合に特に有用です。データに方向性がある場合は、散布図ではなく、極グラフを使用してください。
極グラフの各データ・マーカーは2つのデータ値を表します。
1つ目のデータ値はX値です。マーカーのX軸上の位置を決めます。これは、円の時計回りの位置です。
2つ目のデータ値はY値です。マーカーのY軸上の位置を決めます。これは、グラフの中心からの距離です。
極グラフのデータのガイドラインでは、各マーカーに最低2つのデータ値が必要です。
レーダー・グラフは、多角形の折れ線グラフで、円形の散布図である極グラフと似ています。過去3年間の月ごとの売上げなどの周期的に起こるパターンを表す場合に、レーダー・グラフを使用します。
レーダー・グラフのデータ構造は次のとおりです。
多角形の辺の数とデータのグループの数は同数です。多角形の各角がグループを表します。
データの系列またはセットは、線またはすべて同じ色のマーカー、あるいはその両方で示されます。凡例テキストでラベル付けされます。
レーダー・グラフのデータのガイドラインとして、最低3グループのデータが必要です。
散布図は、データをデータ・マーカーの位置で表します。散布図は、多数のデータ・ポイント間の全体的な関連性を示す場合に特に有用です。たとえば、特定の製品の売上げと利益の関連性を調べる場合に散布図を使用できます。
散布図は単一Yまたは二重Yにできます。散布図の各データ・マーカーは2つの値を表します。
1つ目のデータ値はX値です。マーカーのX軸上の位置を決めます。
2つ目のデータ値はY値です。マーカーのY軸上の位置を決めます。
散布図のデータのガイドラインは次のとおりです。
散布図には、マーカーごとに2つのデータ値が必要です。
複数グループのデータの場合、データは2の倍数である必要があります。
株価チャートは株価を表します。オプションで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つの株のみの値を表示できます。このため、このグラフには凡例は表示されません。系列ラベル（株の名前）をグラフのタイトルに表示する必要があります。
出来高付き始値-終値ローソク足株価チャートのデータ要件は次のとおりです。
各株価マーカーには、始値、終値、出来高の順の3つのデータ値のグループが必要です。1日以上の株価データを表示する場合、月曜日に3つのデータ値、火曜日に3つのデータ値のように、データは3の倍数である必要があります。
系列（データのセット）は1つの株に対するマーカーで表されます。ローソク足株価チャートでは、1つの株のみの値を表示できます。このため、このグラフには凡例は表示されません。系列ラベル（株の名前）をグラフのタイトルに表示する必要があります。
始値-高値-安値-終値ローソク足株価チャートのデータ要件は次のとおりです。
各株価マーカーには、始値、高値、安値、終値の順の4つのデータ値のグループが必要です。1日以上の株価データを表示する場合、月曜日に4つのデータ値、火曜日に4つのデータ値のように、データは4の倍数である必要があります。
データの系列（セット）は1つの株に対するのマーカーで表されます。ローソク足株価チャートでは、1つの株のみの値を表示できます。このため、このグラフには凡例は表示されません。系列ラベル（株の名前）をグラフのタイトルに表示する必要があります。
出来高付き始値-高値-安値-終値ローソク足株価チャートのデータ要件は次のとおりです。
各株価マーカーには、始値、高値、安値、終値、出来高の順の5つのデータ値のグループが必要です。1日以上の株価データを表示する場合、月曜日に5つのデータ値、火曜日に5つのデータ値のように、データは5の倍数である必要があります。
データの系列（セット）は1つの株に対するのマーカーで表されます。ローソク足株価チャートでは、1つの株のみの値を表示できます。このため、このグラフには凡例は表示されません。系列ラベル（株の名前）をグラフのタイトルに表示する必要があります。
グラフ・コンポーネントの作成には次のデータソースを使用できます。
ADFデータ・コントロール: ADFデータ・コントロール・パネルからデータ・コレクションをドラッグ・アンド・ドロップして、データ・バインドされたグラフを宣言的に作成します。『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたADFグラフの作成に関する項での説明のとおり、行セット・データを持つデータ・コレクションを使用するグラフを作成できます。
階層データ: 階層データを提供するデータ・コントロールからグラフを作成できます。ただし、現在のリリースには、グラフでサポートされる階層データ・コントロールの実装は含まれていません。
表形式データ: : 24.4.1項「表形式データを使用したグラフの作成方法」に示すとおり、dvt:graphタグのtabularData属性を使用してCSV（カンマ区切りの値）データをグラフに使用できます。
|
注意: 現時点では、dvt:graphタグのみが表形式データをサポートします。グラフ固有のタグではサポートされません。 |
表形式データからグラフを作成するプロセスのステップは次のとおりです。
グラフのマネージドBeanのメソッドでの表形式データの格納。
マネージドBeanに格納された表形式データを使用するグラフの作成。
dvt:graphコンポーネントのtabularData属性では、グリッドの作成やデータの移入にグラフで使用するデータのリストを指定できます。このリストを作成するには、グラフのデータの系列とグループの理解およびリストの構造の知識が必要です。
グラフには、データの系列およびグループが表示されます。系列とグループは、グリッドの行と列にたとえることができます。通常、グリッドの行はグラフの系列として表示され、グリッドの列はグラフのグループとして表示されます。
大半のグラフでは、系列は同じ色のマーカーのセットとして表示されます。通常、グラフの凡例に、各系列の識別子と対応する色が表示されます。たとえば、棒グラフで黄色の棒が靴の売上げを示し、緑色の棒がブーツの売上げを示す、などです。
グループの表示は、グラフ・タイプによって異なります。集合棒グラフでは、各まとまりがグループです。積上げ棒グラフでは、各積層がグループです。複数円グラフでは、各円がグループです。グループは年などの期間を表す場合もあります。グループが地域などの地理上の場所を表す場合もあります。
グラフ・タイプのデータ要件に応じて、1つのグループに複数のデータ値が必要な場合があります。たとえば、散布図では、データ・マーカーごとに2つの値が必要です。1つ目の値はX軸上のマーカーの位置を決め、2つ目の値はY軸上のマーカーの位置を決めます。
表形式データを含むリストは、グラフに渡すデータ値ごとに3メンバーのObject配列で構成されます。各配列のメンバーは次のように編成される必要があります。
1つ目のメンバー（索引0）は、データ値のグリッドの列ラベルです。これは通常Stringです。グラフに時間軸がある場合は、Java Dateです。列ラベルは、通常、グラフのグループを識別します。
2つ目のメンバー（索引1）は、データ値のグリッドの行ラベルです。これは通常Stringです。行ラベルはグラフで系列ラベルとして、通常、凡例に表示されます。
3つ目のメンバー（索引2）はデータ値で、通常Doubleです。
図24-2には、2006、2007および2008の3つの列があります。このグラフにはShoesとBootsの2つの行もあります。このデータから、3年間のブーツと靴の年間売上げを比較するグラフが生成されます。
例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, 122000, 175000},
{90000, 110000, 150000}
};
for (int c = 0; c < colLabels.length; c++)
{
for (int r = 0; r < rowLabels.length; r++)
{
list.add (new Object [] {colLabels[c], rowLabels[r],
new Double (values[r][c])});
}
}
return list;
}
dvt:graphタグのtabularData属性を使用して、マネージドBeanのメソッドに格納されたデータを参照します。グラフ固有のタグでは、tabularData属性はサポートされません。
マネージドBeanからのデータを使用するグラフを作成する手順:
.jspxページのソース・エディタで、ページの目的の場所にdvt:graphタグを入力します。
構造ウィンドウでdvt:graphノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタの「データ」属性カテゴリで、tabularData属性のドロップダウン・メニューをクリックし、「式ビルダー」を選択します。
次のダイアログから検索ボックスを使用してマネージドBeanを特定します。
マネージドBeanのノードを展開し、表形式データのリストを含むメソッドを選択します。
「OK」をクリックします。
式ビルダーでは、選択したマネージドBeanのメソッドを参照するよう、tabularData属性が設定されています。たとえば、sampleGraphという名前のマネージドBeanとgetTabularDataという名前のメソッドの場合、tabularData属性には#(sampleGraph.tabularData)と設定されます。
大部分のADFグラフ・タイプに、カスタマイズ可能な一般的な機能があります。次のタイプのカスタマイズが、大半のグラフ・タイプでサポートされています。
色、背景、凡例、タイトル、軸、ラベル、マーカーおよびツールチップのカスタマイズ
数値および書式設定
サイズおよびスタイル機能
これらのカスタマイズの大半をサポートする宣言的な方法が使用できます。
|
注意: JDeveloperでは、無効な色の値を避けるため、色に関連する属性を指定する場合に色の選択ダイアログが提供されています。 |
ほとんどのグラフ・タイプで、データ値の各セットに対するエントリが凡例に表示されます。このエントリは関連するデータ値のセットを識別し、グラフ内でのセットの色を示します。たとえば、サンプルの棒グラフでは、黄色の棒を使用して靴の売上げを示し、緑色の棒を使用してブーツの売上げを示します。グラフ・コンポーネントでは、関連するデータ値の各セットは系列と呼ばれています。
グラフでは、データ・ポイントの各セットに異なる色が自動的に割り当てられます。塗りつぶしや枠の色などの各系列に割り当てられた色はカスタマイズできます。特定のグラフ・タイプでは、折れ線グラフの線の幅やスタイル（実線、点線、ダッシュ線など）などのその他の特性を指定することもできます。
1つのdvt:seriesSetタグを使用して、グラフの個々のdvt:seriesタグをすべてラップします。
グラフの系列アイテムに色とスタイルを指定する手順:
構造ウィンドウでgraphノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「系列セット」と選択します。
必要に応じてプロパティ・インスペクタを使用し、dvt:seriesSetタグの属性に値を指定します。
このタグの属性によって、セット内のすべての系列タグのデフォルト設定が決まります。ただし、指定した系列のこの設定を、dvt:seriesタグの対応する属性に値を入力することでオーバーライドできます。
構造ウィンドウでseriesSetノードを右クリックし、「dvt:seriesSetの中に挿入」→「系列」と選択します。
最初のdvt:seriesタグが「グラフ・バインディングの作成」ダイアログに表示される最初の系列を表します。
プロパティ・インスペクタを使用して、dvt:seriesタグに、必要に応じて色と他の特性を指定します。
系列アイテムごとに、ステップ3とステップ4を繰り返します。
グラフでは、特定数の系列について個別にプロパティ（色など）が格納されます。その数を超えると、グラフで系列プロパティが再度使用されます。デフォルトでは、グラフで個別のプロパティが表示されるのは、30までの異なる系列アイテムについてです。
グラフのseriesObjectCount属性の値によって、同じプロパティが再度使用されない系列の数が決まります。seriesObjectCountが4に設定されている場合、系列5のプロパティは系列1と同じになり、系列6のプロパティは系列2と同じになります。
系列アイテムに使用される異なる色の数を制御する手順:
構造ウィンドウで「graph」ノードを右クリックし、「プロパティに移動」を選択します。
「外観」属性カテゴリで、グラフのseriesObjectCount属性にゼロベースの値を指定します。
dvt:numberFormatタグを使用して、次のgraphタグに関連する数値の書式を指定します。
dvt:sliceLabel
dvt:stockVolumeFormat
dvt:x1Axis
dvt:x1Format
dvt:y1Axis
dvt:y1Format
dvt:y2Axis
dvt:y2Format
dvt:zFormat
数値の書式はdvt:numberFormatタグに直接指定できます。また、af:convertNumberタグをdvt:numberFormatの子タグとして使用できます。次の項に、各手法の使用例を示します。
dvt:numberFormat内にaf:convertNumberタグを使用して、グラフのY1軸の数値を書式設定できます。この例では、dvt:numberFormatタグはdvt:y1Axisの子です。
グラフのY1軸の数値を書式設定する手順:
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「Y1軸」と選択します。
プロパティ・インスペクタで、必要に応じてdvt:y1Axisの属性に値を入力します。
構造ウィンドウで「dvt:y1Axis」ノードを右クリックし、「dvt:y1Axisの中に挿入」→「数値フォーマット」と選択します。
構造ウィンドウで「dvt:y1Axis」ノードを右クリックし、「dvt:y1Axisの中に挿入」→「af:convertNumber」と選択します。
プロパティ・インスペクタで、必要に応じてaf:convertNumberタグの属性に値を指定します。
dvt:numberFormatタグを直接使用して、グラフのマーカー・テキストの数値を書式設定できます。このタグの属性で、パーセントの書式設定、数値の位取り、小数部の桁の制御、記号の配置などを行えます。
グラフの各軸のマーカー・テキストに異なる書式を指定できます。この手順では、dvt:numberFormatタグを使用してdvt:y1-axisのマーカー・テキストを書式設定します。
グラフのY1軸のマーカー・テキストの数値を書式設定する手順:
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「マーカー・テキスト」と選択します。
プロパティ・インスペクタで、必要に応じてdvt:markerTextの属性に値を入力します。
構造ウィンドウで「dvt:markerText」ノードを右クリックし、「dvt:markerTextの中に挿入」→「Y1フォーマット」と選択します。
プロパティ・インスペクタで、必要に応じてdvt:y1Format属性に値を入力します。
構造ウィンドウで「dvt:y1Format」ノードを右クリックし、「dvt:y1Formatの中に挿入」→「数値フォーマット」と選択します。
プロパティ・インスペクタで、必要に応じてdvt:numberFormatタグの属性に値を指定します。
例24-5に、グラフのY1軸のマーカー・テキストの数値を書式設定する場合に生成されるXMLコードを示します。この例では、数値の後に記号が続き、マーカーの上にテキストが表示されるよう指定します。たとえば、棒グラフの場合、棒の上にテキストが表示されます。
次のグラフのサブコンポーネントのテキストを書式設定できます。
注釈: 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タグを、テキストに書式設定する特定のサブコンポーネントの子として使用します。グラフのテキストの書式設定の例としては、24.5.5.2項「グラフのタイトルと脚注の指定方法」を参照してください。
グラフの幅と高さはカスタマイズでき、コンテナのサイズ変更に基づいて動的にサイズ変更することができます。グラフで使用されるスタイルシートを制御することもできます。グラフのこれらの2つの側面は、ともにグラフのinlineStyle属性を使用するという点で関連性があります。
dvt:<type>Graphタグの属性の値を指定すると、グラフの初期サイズを指定できます。グラフの動的サイズ変更を指定しない場合、初期サイズが、グラフの唯一の表示サイズです。
グラフが初めて表示される際のサイズを指定する手順:
構造ウィンドウでグラフのノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタの「スタイル」属性カテゴリで、グラフ・タグのInlineStyle属性に値を入力します。次に例を示します。
inlineStyle="width:200px;height:200px"
JSFページでコンテナのサイズが変更されたときにグラフがサイズ変更されるようにするには、dvt:<type>Graphタグの2つの属性のそれぞれに値を入力する必要があります。この機能用に指定する値は、サイズの異なるブラウザ・ウィンドウの領域を使用するグラフ・コンポーネントの作成にも有用です。
グラフの動的サイズ変更を有効にする手順:
構造ウィンドウでグラフのノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタの「動作」属性カテゴリで、DynamicResize属性に「DYNAMIC_SIZE」を選択します。
プロパティ・インスペクタの「スタイル」属性カテゴリで、InlineStyle属性の幅と高さの両方に、ピクセルの定数または相対的割合を入力します。
たとえば、コンテナと同じ幅で200ピクセルの高さのグラフを作成するには、inlineStyle属性に"width:100%;height:200px;"と設定します。
dvt:<type>Graphタグに使用できる標準スタイルを選択できます。グラフに使用するカスタム・スタイルシートを指定することもできます。
グラフに特定のスタイルシートを選択する手順:
グラフに用意されている標準スタイルシートを使用する場合は、次のようにします。
構造ウィンドウでグラフのノードを右クリックし、「プロパティに移動」を選択します。
「外観」属性ウィンドウで、style属性ドロップダウン・リストからスタイル・シートを選択します。
カスタム・スタイルシートを使用する場合は、プロパティ・インスペクタの「スタイル」属性カテゴリで次の属性を設定します。
StyleClass属性に対し、「プロパティ」メニュー選択肢から「編集」を選択し、このゲージに使用するCSSスタイル・クラスを選択します。
InlineStyle属性の幅と高さに、ピクセルの定数または相対的割合を入力します。
たとえば、コンテナと同じ幅で200ピクセルの高さのグラフを作成するには、inlineStyle属性に"width:100%;height:200px;"と設定します。
グラフでは、使用しているスタイルに基づいて、背景と描画エリアにデフォルト設定が自動的に指定されます。これらの設定は、グラフの子タグを使用してカスタマイズできます。
グラフには、タイトル、サブタイトル、脚注のオプションも指定できます。デフォルトでは、タイトルと脚注にはテキストは指定されていません。この情報を入力する際、テキストに使用するフォントとフォント特性も指定できます。
グラフの背景と描画エリアに関連する次の箇所をカスタマイズできます。
背景: グラフがプロットされる領域。
描画エリア: 円グラフ以外のすべてのグラフでデータがプロットされるフレーム。描画エリアの最低2つの境界に軸が表示されます。
円フレーム: 軸を使用しない円グラフがプロットされるフレーム。
グラフの背景と描画エリアをカスタマイズする手順:
グラフの背景をカスタマイズする場合は、次のようにします。
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「背景色」と選択します。
プロパティ・インスペクタを使用して、カスタマイズする属性の色をdvt:backgroundタグに入力します。
円グラフ以外のグラフの描画エリアをカスタマイズする場合は、次のようにします。
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「描画エリア」と選択します。
プロパティ・インスペクタを使用して、カスタマイズする属性の色をdvt:graphPlotAreaタグに入力します。
円グラフの描画エリアをカスタマイズする場合は、次のようにします。
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「円フレーム」と選択します。
プロパティ・インスペクタを使用して、カスタマイズする属性の色をdvt:graphPieFrameタグに入力します。
グラフのタイトル、サブタイトルおよび脚注を指定できます。これらのテキスト・エントリに、グラフの個別の子タグを使用します。これらの各子タグの属性では、テキスト・フィールドの水平方向の位置合せ、テキストの内容と、テキストをレンダリングするかどうかを定義できます。
タイトル、サブタイトルおよび脚注のタグでは、子グラフ・フォント・タグの使用がサポートされ、各テキスト・フィールドに使用するフォント特性を指定できます。
グラフのタイトルと脚注を指定する手順:
グラフのタイトルを入力する場合は、次のようにします。
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「グラフ・タイトル」と選択します。
プロパティ・インスペクタを使用してdvt:graphTitleタグの属性に値を指定します。
テキストに特定のフォント特性を指定する場合は、構造ウィンドウで「dvt:graphTitle」ノードを右クリックし、「dvt:graphTitleの中に挿入」→「フォント」と選択します。
プロパティ・インスペクタを使用してdvt:graphFontタグの属性に値を指定します。
グラフのサブタイトルを入力する場合は、次のようにします。
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「サブタイトル」と選択します。
プロパティ・インスペクタを使用してdvt:graphSubtitleタグの属性に値を指定します。
テキストに特定のフォント特性を指定する場合は、構造ウィンドウで「dvt:graphSubtitle」ノードを右クリックし、「dvt:graphSubtitleの中に挿入」→「フォント」と選択します。
プロパティ・インスペクタを使用してdvt:graphFontタグの属性に値を指定します。
グラフの脚注を入力する場合は、次のようにします。
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「脚注」と選択します。
プロパティ・インスペクタを使用してdvt:graphFootnoteタグの属性に値を指定します。
テキストに特定のフォント特性を指定する場合は、構造ウィンドウで「dvt:graphFootnote」ノードを右クリックし、「dvt:graphFootnoteの中に挿入」→「フォント」と選択します。
プロパティ・インスペクタを使用してdvt:graphFontタグの属性に値を指定します。
順序軸（o1軸とも呼ばれる）:グラフの順序（カテゴリ）軸は、レーティングやステージなどの順序付けされたデータを示したり、異なる都市や異なる製品などの名前のデータを示します。順序軸は、棒グラフ、折れ線グラフ、組合せグラフまたはレーダー・グラフに表示されます。順序軸が水平で時間データを含む場合は、時間軸と呼ばれます。
順序軸の例は、縦棒グラフの描画エリアの下部を横切る線です。この軸上の値は、標示されているデータの程度は示しません。そのかわり、データが属する異なるグループを示します。
X1軸: X1軸は、グラフの横軸に沿って表示される値を示します。この軸は、グループ・ラベルではなく、一定間隔の数値を持ちます。X軸とも呼ばれます。
Y1軸: Y1軸は、第1Y軸です。通常、描画エリアの左側の縦方向の値軸です。一定間隔の数値を持ちます。
Y2軸: Y2軸は、第2Y軸です。通常、描画エリアの右側の縦軸です。一定間隔の数値を持ちます。
各軸には、カスタマイズをサポートするいくつかのグラフ子タグがあります。次の項で、軸の様々なカスタマイズに使用できるオプションについて説明します。
次のグラフ子タグで、軸のタイトルと外観のカスタマイズがサポートされます。
タイトル: 軸のタイトルのテキストと位置合せを指定します。dvt:o1Title、dvt:x1Title、dvt:y1Titleおよびdvt:y2Titleのタグがあります。適切なタイトル・タグを使用しないと、軸にタイトルは表示されません。
軸: 軸の色、線幅、スケーリング、ティック・マーク間の増分と可視性を制御します。dvt:o1Axis、dvt:x1Axis、dvt:y1Axisおよびdvt:y2Axisのタグがあります。
|
注意: 順序軸には数値は表示されないため、dvt:o1Axisタグにはスケーリング属性はありません。 |
X1軸のタイトルと外観を指定する手順:
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「X1タイトル」と選択します。
プロパティ・インスペクタで、軸のタイトルを入力し、必要に応じてこのタグの他の属性に値を指定します。
タイトルのフォント属性を指定する場合は、次のようにします。
構造ウィンドウで「dvt:x1Title」ノードを右クリックし、「dvt:x1Titleの中に挿入」→「フォント」と選択します。
プロパティ・インスペクタで、フォントの特性に値を入力します。
必要に応じて、構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「X1軸」と選択します。
プロパティ・インスペクタで、このタグに値を入力します。
他のグラフの軸のタイトルと外観を制御する手順は、X軸に対する手順と似ています。ただし、カスタマイズする特定の軸に関連するタイトルと軸のタグを挿入します。
ティック・マークは、グラフのスケール上の特定の値を示すために使用されます。次のグラフ子タグで、軸のティック・マークとラベルのカスタマイズがサポートされます。
主ティック: 軸のティック・マークの色、幅とスタイルを制御します。dvt:o1MajorTick、dvt:x1MajorTick、dvt:y1MajorTickおよびdvt:y2MajorTickのタグがあります。
ティック・ラベル: ティック・ラベルの向きを制御し、ラベルのフォント特性を指定できます。dvt:o1TickLabel、dvt:x1TickLabel、dvt:y1TickLabelおよびdvt:y2TickLabelのタグがあります。これらのタグは、ラベルのフォント特性を変更するdvt:graphFont子タグを持つこともできます。
X軸のティック・マークとティック・ラベルの外観を制御する手順:
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「X1主ティック」と選択します。
プロパティ・インスペクタで、このタグの属性に値を入力します。
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「X1ティック・ラベル」と選択します。
プロパティ・インスペクタで、ティック・ラベルの属性に値を入力します。
ティック・ラベルのフォント特性を指定する場合は、次のようにします。
構造ウィンドウで「dvt:x1TickLabel」ノードを右クリックし、「dvt:x1TickLabelの中に挿入」→「フォント」と選択します。
プロパティ・インスペクタで、フォントの特性に値を入力します。
他のグラフの軸のティック・マークの外観を制御する手順は、X軸に対する手順と似ています。ただし、カスタマイズする特定の軸の主ティックとティック・ラベルのタグを挿入します。
dvt:markerTextタグで、軸の数値の書式を制御できます。dvt:markerTextの子タグ（dvt:x1Format、dvt:y1Formatおよびdvt:y2Format）で特定の軸の数値書式をラップします。
|
注意: 順序軸には数値は含まれないため、この軸には書式はありません。 |
これらの軸の数値に書式設定するには、24.5.2項「グラフの数値の書式設定」に示す、適切な軸に対する子タグを挿入します。
Y軸にはdvt:y1Axisとdvt:y2Axisというグラフ子タグがあり、軸の最初の値がサポートされます。二重Yグラフの各Y軸に異なるスケーリングを指定できます。たとえば、Y1軸は売上数量（単位: 100）を表し、Y2軸は売上高（単位: 1000ドル）を表すことができます。
散布図やバブル・グラフなどの一部のグラフには、最小値や最大値も設定可能なdvt:x1Axis子タグが含まれています。
Y1軸の最初の値を指定する手順:
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「Y1軸」と選択します。
プロパティ・インスペクタで、Y1軸の最初の値をAxisMinValueフィールドに入力します。
AxisMinAutoScaledフィールドで、属性ドロップダウン・リストから「false」を選択します。
最小値が適用されるようにするには、この属性を設定する必要があります。
Y2軸の最初の値を設定するには、同様の手順を使用しますが、グラフの子としてdvt:y2Axisタグを挿入します。
グラフ・コンポーネントには、凡例をカスタマイズする次の種類の子タグが用意されています。
グラフに関連する凡例エリアの色、枠、可視性と位置を指定するdvt:legendAreaタグ。
凡例の色付けされた各エントリに関連するテキストのフォント特性と位置を指定するdvt:legendTextタグ。
凡例エリアのオプションのタイトルとフォント特性を指定するdvt:legendTitleタグ。
凡例エリア、凡例テキストとタイトルをカスタマイズする手順:
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「凡例エリア」と選択します。
プロパティ・インスペクタを使用して、このタグの属性に値を指定します。
凡例テキストをカスタマイズする場合は、次のようにします。
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「凡例テキスト」と選択します。
プロパティ・インスペクタを使用して、このタグの属性に値を入力します。
「dvt:legendText」ノードを右クリックし、「dvt:legendTextの中に挿入」→「フォント」と選択します。
プロパティ・インスペクタを使用して、フォント・タグの属性に値を指定します。
凡例のタイトルを入力する場合は、次のようにします。
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「凡例タイトル」と選択します。
プロパティ・インスペクタを使用して、このタグの属性に値を入力します。
「dvt:legendTitle」ノードを右クリックし、「dvt:legendTitleの中に挿入」→「フォント」と選択します。
プロパティ・インスペクタを使用して、フォント・タグの属性に値を指定します。
ツールチップは、データ・マーカーのIDや詳細情報を表示するのに便利です。markerTextを表示する領域のない小さいグラフには非常に便利です。
dvt:graphコンポーネントについてのみ、プログラムから各グラフ・マーカー（棒など）で情報のツールチップが表示されるように指定できます。グラフのツールチップのカスタマイズには、次のグラフの属性が使用できます。
markerTooltipType: マーカー（棒など）に対するツールチップを表示するかどうかを指定し、ツールチップに表示する情報の種類を示します。テキストのみ、値のみ、あるいはテキストと値の情報を表示できます。特定のグラフ・タイプでは、積上げグラフ・マーカーごとに累積データ値を表示したり、円グラフのスライス・マーカーごとに割合のデータを表示できます。
seriesTooltipType: 凡例に表示される値のセットごとにツールチップを表示するかどうかを指定します。この属性では、系列ツールチップに表示される情報の種類も制御されます。たとえば、系列全体を示す一般的な語（「製品」など）のテキストを表示するか、系列の特定のメンバーを示す特定の語（特定の製品名など）のテキストを表示するかを選択できます。
|
注意: グラフでは、グラフのmarkerTooltipType属性にテキストを含む設定が行われている場合のみ、系列のツールチップ・ラベルが表示されます。 |
groupLabelType: 軸上のデータ・グループに対するツールチップ・ラベルを表示するかどうかを指定します。たとえば、特定の製品の売上げが年ごとまたは四半期ごとにまとめられているとします。グループ全体を示す一般的な語（「時間」など）のテキストを表示するか、グループの各メンバーを示す特定の語（四半期を表すQ1、Q2、Q3、Q4など）のテキストを表示するかを選択できます。
ほとんどのグラフで、データ・マーカー上にカーソルを置くと、ツールチップが表示されます。折れ線グラフでは、線上ではなく、折れ線グラフのデータ・マーカー上、またはデータ・マーカーと思われる場所にカーソルを置く必要があります。
グラフ・コンポーネントでは、50以上のグラフ・タイプがサポートされます。一部のグラフ属性といくつかの子タグは、特定のグラフ・タイプにのみ関連します。
データ・コントロール・パネルを使用してグラフを挿入する場合、コンポーネント・ギャラリに使用できるグラフのカテゴリ、タイプおよびクイック・スタート・レイアウトが表示され、そこから選択できます。グラフ・タイプを選択すると、そのグラフのsubType属性が設定されます。ファンネル・グラフとレーダー・グラフ以外のすべてのグラフ・タイプを変更できます。
グラフのタイプを変更する手順:
構造ウィンドウでグラフのノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタの「共通」属性カテゴリで、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グラフ。
円グラフの外観をカスタマイズできます。また、円グラフの1つのスライスを他のスライスから切り離すよう指定できます。
円グラフの外観は、グラフ・タグ内に次の子タグを挿入することでカスタマイズできます。
dvt:pieFeelerタグ: 円グラフのスライスからスライス・ラベルへ延びる線（引出線と呼ばれる）の色を指定します。
dvt:sliceタグ: 円グラフのスライスのラベルの位置を指定します。
dvt:sliceLabelタグ: 円グラフまたはドーナツ・グラフの各スライスを説明するラベルの特性を指定します。各スライスはデータ値を表します。このタグのtextType属性を使用して、スライス・ラベルにテキストのみを表示するか、割合のみを表示するか、テキストと割合を表示するかを示します。数値を書式設定する場合またはフォント特性を指定する場合は、dvt:sliceLabelタグ内にdvt:graphFontおよびdvt:numberFormatタグを追加します。
円グラフで1つのスライスが他のスライスから切り離されている場合、この表示は円グラフのスライスの切離しと呼ばれます。1つのスライスを切り離すのはそのスライスを強調表示するためで、グラフ内で最も大きい分量が割り当てられていることもあります。
円グラフのスライスは、グラフの凡例で示されるデータのセットです。したがって、スライスは円グラフの系列アイテムです。
円グラフから1つのスライスを切り離す手順:
24.5.1.1項「個々の系列アイテムの色とスタイルの指定方法」の手順に従い、個々の系列アイテムをラップする系列セットを作成します。
プロパティ・インスペクタで、円グラフから切り離すスライスを示すseriesタグのPieSliceExplode属性に、0〜100の値を設定します。100が、使用できる最大の切離し距離です。
グラフ・タグの属性と系列タグの属性を使用して、折れ線グラフの線の外観を変更できます。
折れ線グラフには、データ線またはデータ・マーカーを表示できます。データ線ではなく、マーカーを表示する場合、マーカーが凡例に自動的に表示されます。dvt:lineGraphタグの次の属性が、このオプションに関連します。
lineDataLineDisplayed: 折れ線グラフにデータ線を表示するかどうかを指定します。次の値が該当します。
Trueは、グラフにデータ線が表示されることを示します。
Falseは、折れ線グラフにデータ線ではなく、マーカーが表示されることを示します。
markerDisplayed: 折れ線グラフにマーカーが表示されるか、データ線が表示されるかを指定します。次の値が該当します。
Trueは、折れ線グラフにマーカーが表示されることを示します。
Falseは、折れ線グラフにデータ線が表示されることを示します。
|
注意: 折れ線グラフのlineDataLineDisplayed属性とmarkerDisplayed属性の両方にFalseを設定しないでください。 |
次のリストで説明するように、dvt:seriesSetタグとdvt:seriesタグを使用して線の外観をカスタマイズできます。
dvt:seriesSetタグで次の属性に値を指定すると、タグ内のすべてのdvt:seriesタグに作用します。
defaultMarkerShape: 折れ線グラフ、散布図および組合せグラフにのみ使用されます。系列セット内のすべての系列のデフォルト・マーカーの形状を示します。
defaultMarkerType: 組合せグラフにのみ使用されます。有効な値は、MT_AREA、MT_BAR、MT_MARKERおよびMT_DEFAULTです。
dvt:seriesタグで、次の線属性を使用して個々の系列の設定を指定できます。
lineWidth: 線の幅をピクセルで指定します。
lineStyle: グラフで実線、点線、ダッシュ線、ダッシュと点の組合せの線のいずれを使用するかを指定します。
dvt:seriesSetタグとdvt:seriesタグの使用の詳細は、24.5.1.1項「個々の系列アイテムの色とスタイルの指定方法」の手順を参照してください。
パレート・グラフは、一連の棒を使用して不具合の原因を示します。棒は値の大きい方から小さい方に順に並べられます。パレート線は、グラフのすべての棒の合計値に対する棒の累積割合を示します。線は常に100%で終わります。
パレート線とパレート・マーカーは、次のグラフの子タグを使用してカスタマイズできます。
dvt:ParetoLineタグ: 色、線幅と線のスタイル（実線、ダッシュ線、点線、ダッシュと点の組合せなど）を指定できます。
dvt:paretoMarkerタグ: パレート・マーカーの形状を指定できます。
パレート・グラフをカスタマイズする手順:
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「パレート線」と選択します。
プロパティ・インスペクタで、このタグの属性に値を指定します。
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「パレート・マーカー」と選択します。
プロパティ・インスペクタで、markerShape属性に値を選択します。
グラフのカスタマイズ機能には、系列に関連する参照線や軸に関連する参照領域を定義する機能、グラデーション特殊効果をグラフの数箇所に追加するオプション、グラフの一部を透明色に設定するオプション、およびグラフでのアラートと注釈の使用などがあります。これらの特別な機能では、グラフのインタラクティブな機能を使用することもできます。
参照線および領域は、系列や軸の数や関連付けにかかわらず、常に表示する、ロールオーバーのみに表示する、または表示しない設定が可能です。
系列（グラフの凡例で1つの色で表示されるデータ値のセット）に関連付けられる参照線を作成できます。参照線付きの系列が複数ある場合、カーソルを系列マーカーまたは対応する系列凡例アイテム上に移動したときのみ参照線が表示されます。これは、複数の参照線はユーザーにとって紛らわしいからです。
軸に関連付ける参照領域を作成することもできます。通常、これらの領域はY軸に関連付けられます。複数の参照領域がある場合、カーソルを関連する軸上に移動すると、これらの領域も表示されます。
実行時までアプリケーションで必要な参照線と領域の数がわからない場合、参照線と領域を実行時に動的に作成することができます。
参照線も参照領域も、次のタグを使用して作成されます。
dvt:referenceObjectSet: このグラフの参照線または参照領域のすべての参照オブジェクト・タグをラップします。
dvt:referenceObject: タグが参照線を表すか、参照領域を表すかを示し、タグの特性を指定します。
設計時に参照線または領域をグラフに追加する手順:
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「参照オブジェクト・セット」と選択します。
設計時に参照オブジェクトを作成する場合、dvt:referenceObjectSetタグの属性は設定しません。
構造ウィンドウでdvt:referenceObjectSetノードを右クリックし、「dvt:referenceObjectSetの中に挿入」→「参照オブジェクト」と選択します。
プロパティ・インスペクタで次のようにします。
「共通」属性カテゴリで、参照オブジェクトのindex属性に値を指定し、参照オブジェクトのtype属性にRO_LINEまたはRO_AREAを指定し、association属性に関連付けるオブジェクト（参照線の場合は系列、参照領域の場合は特定の軸）を指定します。また、displayedInLegend属性を使用してオブジェクトを凡例に表示するかどうかを指定し、凡例に表示するテキストがある場合はこれを指定します。
参照線を作成する場合、線に関連する属性に値を指定します。これには、線が関連付けられる系列の番号の指定も含まれます。系列番号は、グラフ・データ・バインディング・ダイアログに系列が表示される順番のことです。
参照領域を作成する場合、指定した軸の参照領域を示す高低の値を指定します。
構造ウィンドウでグラフのノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで「外観」属性カテゴリを選択し、次のようにして参照線と参照領域の表示を制御します。
参照線（系列に関連付けられている）を定義した場合、dvt:seriesノードを開き、seriesReferenceObjectDisplay属性に動作の値を指定します。
値RO_DISPLAY_AUTOMATICは、カーソルが系列アイテム（棒など）またはグラフの凡例の対応する下位列エントリの上に移動したときにのみ参照線が表示されるようにします。これを選択すると、複数の系列の参照線が一度に表示されて混乱を招くことがなくなります。
参照領域（特定の軸に関連付けられている）を定義した場合、適切な軸または軸の属性（X1ReferenceObjectDisplay、Y1ReferenceObjectDisplayまたはY2ReferenceObjectDisplay）に値を指定します。
値RO_DISPLAY_AUTOMATICは、関連付けられている軸上にマウスが移動したときにのみ参照領域が表示されるようにします。これを選択すると、複数の参照領域が一度に表示されて混乱を招くことがなくなります。
設計時に参照線または領域を作成すると、JSFページのグラフのXML内にXMLコードが生成されます。参照オブジェクト（線も領域も）は、dvt:referenceObjectSetタグでラップされます。例24-6に、Y1軸に関連付けられている3つの参照領域、Y2軸に関連付けられている1つの参照領域と、異なる系列に関連付けられている4つの参照線のコードを示します。
例24-6 グラフの参照線と領域のXMLコード
<dvt:barGraph value ="#{sampleGraph.graphDataModel}" graphType="BAR_VERT_CLUST2Y"
imageFormat="FLASH"
y1ReferenceObjectDisplay="RO_DISPLAY_AUTOMATIC"
y2ReferenceObjectDisplay="RO_DISPLAY_AUTOMATIC"
seriesReferenceObjectDisplay="RO_DISPLAY_AUTOMATIC">
<dvt:referenceObjectSet>
<dvt:referenceObject index="1" type="RO_AREA" association="Y1AXIS"
location="RO_BACK" color="#55FF0000" lowValue="0" highValue="4000"/>
<dvt:referenceObject index="2" type="RO_AREA" association="Y1AXIS"
location="RO_BACK" color="#55FFFF00" lowValue="4000" highValue="10000"/>
<dvt:referenceObject index="3" type="RO_AREA" association="Y1AXIS"
location="RO_BACK" color="#5500FF00" lowValue="10000" highValue="18000"/>
<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>
参照オブジェクトを実行時に動的に作成する場合、dvt:referenceObjectSetタグのみを使用します。このタグのreferenceObjectMap属性に、子コンポーネント参照オブジェクトのマップを作成するコードへのメソッド参照を設定します。このマップを作成するメソッドは、マネージドBeanに格納する必要があります。
参照線または領域を動的に作成する手順:
実行時に作成する子コンポーネント参照オブジェクトのマップを作成するメソッドを記述します。例24-7に、このメソッドを作成するコードを示します。
構造ウィンドウでグラフのノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「参照オブジェクト・セット」と選択します。
プロパティ・インスペクタで、referenceObjectMap属性に、子コンポーネント参照オブジェクトのマップを作成するコードへのメソッド参照を指定します。
たとえば、(sampleGraph)マネージドBeanとgetReferenceObjectMapListメソッドの場合、属性にreferenceObjectMap="#{sampleGraph.referenceObjectMapList}"と設定します。
例24-7 子参照オブジェクトのマップのコード
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;
}
グラデーションは、オブジェクトの色が段階的に変わる特殊効果です。グラデーションの各色は、ストップで表します。最初のストップはストップ0、2番目はストップ1のようになります。特殊効果をサポートするグラフのサブコンポーネントには、特殊効果のストップをいくつでも指定できます。
グラフの次のサブコンポーネントにグラデーション特殊効果を定義できます。
グラフの背景: dvt:backgroundタグを使用します。
グラフの描画エリア: dvt:graphPlotAreaタグを使用します。
グラフの円フレーム: dvt:graphPieFrameタグを使用します。
凡例エリア: dvt:legendAreaタグを使用します。
系列: dvt:seriesタグを使用します。
時間セレクタ: dvt:timeSelectorタグを使用します。
グラデーション特殊効果を使用する方法は、この効果がサポートされるグラフの各部分で同じです。
特殊効果を追加するグラフのサブコンポーネントごとに、dvt:specialEffectsタグをサブコンポーネントの子タグとして挿入する必要があります。たとえば、グラデーションをグラフの背景に追加する場合、dvt:backgroundタグの子であるdvt:specialEffectsタグを1つ作成します。
その後、オプションでサブコンポーネントの塗りつぶし色の変化の割合を制御する場合は、コンポーネントの塗りつぶしの色と変化の割合の制御に必要な数のdvt:gradientStopStyleタグを挿入します。このdvt:gradientStopStyleタグは、1つのdvt:specialEffectsタグの子タグとして挿入する必要があります。
グラデーション特殊効果をグラフの背景に追加する手順:
構造ウィンドウで、グラフ・ノードの子であるdvt:backgroundを右クリックし、「dvt:backgroundの中に挿入」→「特殊効果」を選択します。
プロパティ・インスペクタを使用してdvt:specialEffectsタグの属性に値を入力します。
fillType属性には、FT_GRADIENTを選択します。
gradientDirection属性には、グラデーションの塗りつぶしに使用する変化の方向を選択します。
numStops属性には、グラデーションに使用するストップの数を入力します。
オプションで各グラデーション・ストップの色と変化の割合を制御する場合は、dvt:specialEffectsノードを右クリックし、dvt:specialEffects内に挿入→「dvt:gradientStopStyle」と選択します。
プロパティ・インスペクタを使用してdvt:gradientStopStyleタグの属性に値を入力します。
stopIndex属性には、specialEffectsタグ内に含まれるdvt:gradientStopStyleタグ内の索引としてゼロベースの整数を入力します。
gradientStopColor属性には、グラデーション内のこの部分に使用する色を入力します。
gradientStopPosition属性には、指定したストップ色のグラデーションでの相対距離を入力します。グラデーションのスケールは0〜100です。0または100が指定されない場合、これらのポイントにはデフォルトの位置が使用されます。
指定するグラデーション・ストップごとに、ステップ3とステップ4を繰り返します。
例24-8に、グラデーションの塗りつぶしをグラフの背景に追加し、2つのストップを指定する場合に生成されるXMLコードを示します。
例24-8 グラデーションをグラフの背景に追加する場合に生成されるXMLコード
<dvt:graph >
<dvt:background borderColor="#848284">
<dvt:specialEffects fillType="FT_GRADIENT" gradientDirection="GD_RADIAL">
<dvt:gradientStopStyle stopIndex="0" gradientStopPosition="60"
gradientStopColor="FFFFCC"/>
<dvt:gradientStopStyle stopIndex="1" gradientStopPosition="90"
gradientStopColor="FFFF99"/>
</dvt:specialEffects>
</dvt:background>
</dvt:graph>
グラフの各箇所に関連する子タグにborderTransparentおよびfillTransparent属性を設定することで、これらの箇所で透明色を表示するよう指定できます。次のリストに、透明色をサポートするグラフの各部分を示します。
グラフの凡例エリア: dvt:legendAreaタグを使用します。
グラフの円フレーム: dvt:graphPieFrameタグを使用します。
グラフの描画エリア: dvt:graphPlotAreaタグを使用します。
次のような多くのインタラクティブな機能をグラフに追加できます。
マーカーと凡例の淡色表示
マーカーには線、棒、面、散布マーカー、バブルおよび円グラフのスライスが含まれます。
ズームとスクロール
ズームとスクロールのレベルの変更
特定のデータのセット内の1つのデータ・マーカーまたはグラフの凡例の対応するエントリの上にカーソルを移動すると、そのセットのすべてのデータ・マーカーが強調表示されるようにすることができます。強調表示効果は、セットの他のデータ・マーカーを淡色表示することによって視覚的に実現します。たとえば、棒グラフに4つの製品（P1、P2、P3、P4）の月ごとの売上げを表示する場合、製品P2の1月にカーソルを移動すると、P2のすべての棒が強調表示され、P1、P3およびP4の棒は淡色表示されます。
グラフでは特定のデータのセットのすべてのデータ・マーカー（P2のすべての棒など）を系列として参照するため、系列内のデータ・マーカーを強調表示する機能は、グラフの系列ロールオーバー動作機能の一部です。
系列ロールオーバー動作は、棒グラフ、折れ線グラフ、面グラフ、円グラフ、散布図、極グラフ、レーダー・グラフおよびバブル・グラフでのみ使用できます。
系列内のすべてのデータ・マーカーを淡色表示する手順:
構造ウィンドウでグラフのノードを右クリックし、「プロパティに移動」を選択します。
「外観」属性カテゴリのSeriesRolloverBehaviorフィールドでドロップダウン・リストを使用して「RB_DIM」を選択します。
グラフでズームおよびスクロール・レベルが変更されたときに実行されるカスタム・コードを指定できます。マネージドBeanには、入力をZoomAndScrollEventと解釈するメソッドを格納します。このイベントを使用すると、ユーザーはズームされる軸およびズームされた軸の現在の範囲を決定できます。
グラフでのズームとスクロールに対応するカスタム動作を指定する手順:
マネージドBeanに、ズームまたはスクロール・イベントがトリガーされたときの動作を実行するカスタム・メソッドを記述します。例24-9に、このメソッドを作成するコードを示します。
構造ウィンドウでグラフのノードを右クリックし、「プロパティに移動」を選択します。
「動作」属性カテゴリを選択し、拡張ノードを開きます。
zoomAndScrollListenerフィールドに、マネージドBeanに格納するメソッドへの参照を指定します。
たとえば、setZoomAndScrollメソッドがSampleGraphマネージドBeanに格納されている場合、"#{sampleGraph.zoomAndScroll)"という設定になります。
例24-9 ズームとスクロールを設定するためのサンプル・コード
Managed bean sampleGraph.java
public void setZoomAndScroll(ZoomAndScrollEvent event) {
System.out.println("Start Group: " + event.getAxisStartGroup(ZoomAndScrollEvent.O1AXIS));
System.out.println("Group Count: " + event.getAxisGroupCount(ZoomAndScrollEvent.O1AXIS));
System.out.println("Start Group Label: " + event.getAxisStartGroupLabel(ZoomAndScrollEvent.O1AXIS));
System.out.println("End Group Label: " + event.getAxisEndGroupLabel(ZoomAndScrollEvent.O1AXIS));
System.out.println("Axis Min: " + event.getAxisMin(ZoomAndScrollEvent.O1AXIS));
System.out.println("Axis Max: " + event.getAxisMax(ZoomAndScrollEvent.O1AXIS));
時間データを表示する相対的範囲と明示的範囲を定義できます。
時間データを表示する単純な相対範囲（過去7日間など）を定義できます。これによって、新しいデータ・ポイントがアクティブ・データ・グラフの表示に追加され、古いデータがグラフの左端からはみ出ることになります。相対時間範囲の指定は、アクティブ・データ・グラフでの使用に限定されません。
時間データを表示する相対範囲を指定する手順:
構造ウィンドウでグラフのノードを右クリックし、「プロパティに移動」を選択します。
「外観」属性カテゴリで、dvt:timeAxisノードを開き、次の属性に値を指定します。
timeRangeMode属性に、相対範囲を時間範囲の終わりに適用する（過去7日間など）か、始めに適用する（最初の7日間など）かに応じてTRM_RELATIVE_LASTまたはTRM_RELATIVE_FIRSTの値を指定します。
relativeTimeRange属性に、相対範囲をミリ秒で指定します。
時間データを表示する明示的範囲（3月15日〜3月25日など）を定義できます。この例では、開始と終了の値に指定されていないため、年、時間、分および秒にはデフォルト値が使用されます。
時間データを表示する明示的範囲を指定する手順:
構造ウィンドウでグラフのノードを右クリックし、「プロパティに移動」を選択します。
「外観」属性カテゴリで、dvt:timeAxisノードを開き、次の属性に値を指定します。
timeRangeMode属性に、値TRM_EXPLICITを指定します。
explicitTimeRangeStart属性に、時間範囲の最初の日付を入力します。
explicitTimeRangeEnd属性に、時間範囲の最後の日付を入力します。
アラートは、エラーや警告など、個別の記号で強調表示する必要のあるデータ・ポイントをグラフ上に定義します。アイコンはアラートの場所を示します。カーソルをアラート・アイコン上に移動すると、そのアラートのテキストが表示されます。アラートは、dvt:alertタグを使用してグラフにいくつでも定義できます。アラートはグラフ・タグの子であるdvt:alertSetタグにラップされます。例24-10に、面グラフのアラートのセットを示します。
例24-10 グラフのアラートのセットのサンプル・コード
<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タグにラップされます。例24-11に、面グラフの注釈のセットを示します。
グラフ・コンポーネントdvt:areaGraph、dvt:barGraph、dvt:lineGraph、dvt:comboGraphおよびdvt:pieGraphは、アクティブ・データへのアニメーション効果をサポートします。アクティブ・データ・サービス（ADS）では、ADFモデル・レイヤーを使用して、ADF Facesコンポーネントをアクティブ・データ・ソースにバインドできます。このためには、コンポーネントとバインディングを構成して、コンポーネントがソースで更新されたデータを表示できるようにする必要があります。
アクティブ・データ・サービスを使用するには、データが変化したときにイベントを公開するデータ・ソースが必要です。また、これらのサービスを表すために、これらのイベントと関連付けられたデータ・コントロールに対応するビジネス・サービスを作成する必要があります。ADSおよびアプリーケーションの構成の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のアクティブ・データ・サービスの使用に関する章を参照してください。
データ・バインドされたグラフを構成し、対応するページ定義ファイルでバインディング要素に値を設定することによってアクティブ・データを表示します。
アクティブ・データを表示するグラフを構成する手順:
構造ウィンドウでグラフのノードを選択します。
プロパティ・インスペクタで、「ID」フィールドに一意の値を入力します。
識別子を選択しないと、1つ自動的に入力されます。
そのページの関連ページ定義ファイルを開きます。
ページ定義ファイルの構造ウィンドウで、コンポーネントにバインドされた属性を表すノードを選択します。プロパティ・インスペクタで、ChangeEventPolicy属性にPushを選択します。
グラフ・コンポーネントでアクティブ・データが表示されるように構成したら、グラフに次のアニメーション属性を設定します。
animationOnDisplay: オプション。ADSと一緒にまたは単独で、適用する初期レンダリング効果のタイプの指定に使用します。有効な値は次のとおりです。
NONE: （デフォルト）初期レンダリング効果は表示されません。
AUTO: グラフ・タイプまたはゲージ・タイプに基づいて自動的に選択された初期レンダリング効果が適用されます。
animationOnDataChange: 適用するデータ変化のアニメーションでデータ・タイプの指定に使用します。有効な値は次のとおりです。
NONE: データ変化のアニメーション効果は適用されません。
AUTO: （デフォルト）アクティブ・データ・サービス（ADS）のデータ変化のアニメーション・イベントが適用されます。
ON: 部分ページ・リフレッシュ（PPR）のデータ変化のアニメーション・イベントが適用されます。
animationDuration: アニメーション効果をミリ秒で指定するために使用します。
animationIndicators: 表示するデータ変化のインジケータのタイプを指定するために使用します。有効な値は次のとおりです。
NONE: データ変化のインジケータは表示されません。
ALL: （デフォルト）すべてのデータ変化のインジケータを表示します。
animationUpColor: データ値が増加したことを示すために使用するRGB16色の指定に使用します。
animationDownColor: データ値が減少したことを示すために使用するRGB16色の指定に使用します。
