Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1 (11.1.1.7.0) B52029-11 |
|
前 |
次 |
この章では、ADFグラフ・コンポーネントを使用してデータを表示する方法とグラフのカスタマイズ・オプションについて説明します。
この章では、次の項目について説明します。
ADFグラフのデータ・バインディングの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたグラフの作成に関する項を参照してください。
グラフ・コンポーネントには、面グラフ、棒グラフ、バブル・グラフ、組合せグラフ、ファンネル・グラフ、折れ線グラフ、パレート・グラフ、円グラフ、レーダー・グラフ、散布図、スパークチャート、株価チャートなど、50種類以上のグラフを作成する機能が用意されています。このコンポーネントでは、複数軸の複数データ・ポイントを様々な方法で評価できます。たとえば、一群のグラフにより、あるグループからの結果と他のグループからの結果の比較が容易になります。
コンポーネント・ギャラリには使用可能なグラフのカテゴリ、タイプおよび説明が表示され、グラフの作成およびクイック・スタート・レイアウトの指定が視覚的にサポートされます。図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.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に、複数の円グラフ内の双方向サポートを示します。
多くのグラフ・タイプとグラフ・コンポーネントの高い柔軟性のために、グラフには多数のDVTタグがあります。各グラフ・タグ名の先頭にある接頭辞(dvt:
)は、タグがADFデータ視覚化ツール(DVT)タグ・ライブラリの1つであることを示します。次のリストに、グラフ・コンポーネントに関連するタグのグループを示します。
グラフ固有のタグ:13個のグラフ固有のタグは、よく使用されるグラフ・タイプを作成する簡便な方法です。コンポーネント・ギャラリでは、1つ以上のタイプおよび多様なクイック・スタート・レイアウト・オプションとともにグラフのカテゴリとして表示されます。これらのタグのリストと説明は、24.2.1項「グラフ固有のタグ」を参照してください。
一般的なグラフの子タグ:これらのタグは、カスタマイズ用に大部分のグラフ・タイプでサポートされます。これらのタグのリストと説明は、24.2.2項「一般的なグラフの子タグ」を参照してください。
グラフ・タイプの子タグ:これらのタグは、特定のグラフ・タイプまたはグラフの特定部分に使用します。これらのタグのリストと説明は、24.2.3項「グラフ固有の子タグ」を参照してください。
子セット・タグ:これらのタグは、無数の関連するタグのセットをラップします。これらのタグのリストと説明は、24.2.4項「子セット・タグ」を参照してください。
すべてのタグとその属性の詳細、および有効な値のリストは、DVTタグのドキュメントを参照してください。JDeveloperで特定のタグのドキュメントにアクセスするには、構造ウィンドウでタグを選択し、[F1]キーを押します。JDeveloperのヘルプでADF Data Visualization Toolsタグ・ライブラリにアクセスするには、オンライン・ヘルプの目次でJavadocとタグ・ライブラリ・リファレンスのノードを開き、「JDeveloperタグ・ライブラリ・リファレンス」トピックのタグ・ライブラリへのリンクをクリックします。
グラフ固有のタグは次の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: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:attributeFormat
。
凡例の外観: dvt:legendArea
、dvt:legendText
およびdvt:legendTitle
タグ。
各軸に関連するマーカーのカスタマイズ: dvt:markerText
、dvt:x1Format
、dvt:y1Format
、dvt:y2Format
およびdvt:zFormat
タグ。
参照線および参照領域: dvt:referenceObjectSet
およびdvt:referenceObject
タグ。
棒グラフ、面グラフ、組合せグラフ、折れ線グラフ、レーダー・グラフ、株価チャートで使用される順序軸(カテゴリ軸とも呼ばれる)のグループ・ラベルによるカスタマイズ: dvt:o1Axis
、dvt:o1MajorTick
、dvt:o1TickLabel
、dvt:o1Title
タグ。
散布図とバブル・グラフで使用されるX軸の数値ラベルによるカスタマイズ: dvt:x1Axis
、dvt:x1MajorTick
、dvt:x1TickLabel
、dvt:x1MinorTick
、dvt:x1Title
タグ。
Y1軸のカスタマイズ: dvt:y1Axis
、dvt:y1BaseLine
、dvt:y1MajorTick
、dvt:y1TickLabel
、dvt:y1MinorTick
およびdvt:y1Title
タグ。
Y2軸のカスタマイズ: dvt:y2Axis
、dvt:y2BaseLine
、dvt:y2MajorTick
、dvt:y2TickLabel
、dvt:y2MinorTick
およびdvt:y2Title
タグ。
グラフ固有のカスタマイズや関連する子タグの種類は次のとおりです。
dvt:background
、dvt:legendArea
、dvt:graphPlotArea
、dvt:graphPieFrame
、dvt:series
、dvt:referenceObject
またはdvt:timeSelector
サブコンポーネントとの組合せでのみグラフに使用されるグラデーション: dvt:specialEffects
およびdvt:gradientStopStyle
タグ。
グラフのサブコンポーネントに対する相互作用の指定: dvt:shapeAttrbutesSet
およびdvt:shapeAttributes
タグ。
グラフの数値データ値の書式設定: dvt:sliceLabel
、dvt:x1TickLabel
、dvt:y1TickLabel
、dvt:y2TickLabel
、dvt:x1Format
、dvt:y1Format
、dvt:y2Format
、dvt:zFormat
およびdvt:stockVolumeFormat
。
面、棒、組合せ、線、積上げ棒グラフの時間軸のカスタマイズ: dvt:timeAxisDateFormat
およびdvt:timeSelector
タグ。
マスター/ディテール・グラフの時間軸の範囲の選択: dvt:timeSelector
タグ。
パレート・グラフ: dvt:paretoLine
およびdvt:paretoMarker
タグ。
円グラフ: dvt:graphPieFrame
、dvt:pieFeeler
、dvt:slice
およびdvt:sliceLabel
タグ。
スパークチャート: dvt:sparkItem
タグでは、スパークチャートのデータが提供されます。
株価チャート: 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つのバリエーションでは、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の倍数である必要があります。
スパークチャートは、単一系列のデータ値での傾向や変化の表示に使用されます。これは、簡単な視覚化要約チャートで、テキストを付けて表にスタンプされるか、インラインで使用されるように設計されています。スパークチャートにはラベルがないため、表の隣接する列や周囲のテキストにより、スパークチャートのコンテンツのコンテキストが示されます。
スパークチャートでは、表形式データやgraphDataModel
は受け入れられません。スパークチャートのデータのガイドラインは次のとおりです。
株価チャートでは、株価を表示し、必要に応じてグラフに1つ以上の株式の取引出来高も表示できます。株価またはローソク足株価チャートが出来高を含む場合、出来高はグラフの下部に棒で表示されます。
ローソク足株価チャートは株価を表し、オプションで1つの株の出来高を表示します。ローソク足株価チャートが出来高を含む場合、出来高はグラフの下部に棒で表示されます。
ローソク足株価チャートでは、始値と終値のうち低い方の値がローソクの下端で示されます。高い方の値がローソクの上端で示されます。終値が始値より高い場合、ローソクは緑色です。始値が終値より高い場合、ローソクは赤色です。
高値-安値-終値株価チャートのデータ要件は次のとおりです。
各株価マーカーには、高値、安値、終値の順の3つのデータ値のグループが必要です。1日以上の株価データを表示する場合、月曜日に3つのデータ値、火曜日に3つのデータ値のように、データは3の倍数である必要があります。
データの系列(セット)は、1つの株を表す同じ色のマーカーで示されます。系列はA株のように凡例テキストでラベル付けされます。1つの株のみの場合でも、ローソク足チャートを除き、凡例が表示されます。大半の高値-安値-終値株価チャートの系列は1つのみです。複数の系列を表示し、異なる株の値が重なる場合、株価マーカーによって他の株価マーカーが覆われます。
出来高付き高値-安値-終値株価チャートのデータ要件は次のとおりです。
各株価マーカーには、高値、安値、終値、出来高の順の4つのデータ値のグループが必要です。1日以上の株価データを表示する場合、データは4の倍数で、月曜日の高値、月曜日の安値、月曜日の終値、月曜日の出来高(他の曜日に続く)の順である必要があります。
出来高も表示する高値-安値-終値株価チャートでは、1つの株のみのデータを表示できます。この株のラベルはグラフの凡例に表示されます。
始値-高値-安値-終値株価チャートのデータ要件は次のとおりです。
各株価マーカーには、始値、高値、安値、終値の順の4つのデータ値のグループが必要です。1日以上の株価データを表示する場合、月曜日に4つのデータ値、火曜日に4つのデータ値のように、データは4の倍数である必要があります。
データの系列(セット)は、1つの株を表す同じ色のマーカーで示されます。系列はA株のように凡例テキストでラベル付けされます。1つの株のみの場合でも凡例は表示されます。大半の始値-高値-安値-終値株価チャートの系列は1つのみです。複数の系列を表示し、異なる株の値が重なる場合、株価マーカーによって他の株価マーカーが覆われます。
出来高付き始値-高値-安値-終値株価チャートのデータ要件は次のとおりです。
各株価マーカーには、始値、高値、安値、終値、出来高の順の5つのデータ値のグループが必要です。1日以上の株価データを表示する場合、データは5の倍数で、月曜日の始値、月曜日の高値、月曜日の安値、月曜日の終値、月曜日の出来高(他の曜日に続く)の順である必要があります。
出来高も表示する始値-高値-安値-終値株価チャートでは、1つの株のみのデータを表示できます。この株のラベルはグラフの凡例に表示されます。
始値-終値ローソク足株価チャートのデータ要件は次のとおりです。
各株価マーカーには、始値、終値の順の2つのデータ値のグループが必要です。1日以上の株価データを表示する場合、月曜日に2つのデータ値、火曜日に2つのデータ値のように、データは2の倍数である必要があります。
1つの系列(データのセット)は、1つの株のマーカーで表されます。ローソク足チャートでは、1つの株のみの値を表示できます。このため、これらのグラフには凡例は表示されず、グラフのタイトルに系列のラベル(株式名)を示します。
出来高付き始値-終値ローソク足株価チャートのデータ要件は次のとおりです。
各株価マーカーには、始値、終値、出来高の順の3つのデータ値のグループが必要です。1日以上の株価データを表示する場合、月曜日に3つのデータ値、火曜日に3つのデータ値のように、データは3の倍数である必要があります。
1つの系列(データのセット)は、1つの株のマーカーで表されます。ローソク足チャートでは、1つの株のみの値を表示できます。このため、これらのグラフには凡例は表示されず、グラフのタイトルに系列のラベル(株式名)を示します。
始値-高値-安値-終値ローソク足株価チャートのデータ要件は次のとおりです。
各株価マーカーには、始値、高値、安値、終値の順の4つのデータ値のグループが必要です。1日以上の株価データを表示する場合、月曜日に4つのデータ値、火曜日に4つのデータ値のように、データは4の倍数である必要があります。
1つの系列(データのセット)は、1つの株のマーカーで表されます。ローソク足チャートでは、1つの株のみの値を表示できます。このため、これらのグラフには凡例は表示されず、グラフのタイトルに系列のラベル(株式名)を示します。
グラフ・コンポーネントの作成には次のデータソースを使用できます。
ADFデータ・コントロール: ADFデータ・コントロール・パネルからデータ・コレクションをドラッグ・アンド・ドロップして、データバインドされたグラフを宣言的に作成します。『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたグラフの作成に関する項での説明のとおり、行セット・データを持つデータ・コレクションを使用してグラフを作成できます。
階層データ: 階層データを提供するデータ・コントロールからグラフを作成できます。ただし、現在のリリースには、グラフでサポートされる階層データ・コントロールの実装は含まれていません。
表形式データ: 24.4.2項「表形式データを使用したグラフの作成方法」に示すとおり、tabularData
属性を使用してCSV(カンマ区切りの値)データをグラフに使用できます。
簡単なUI優先開発を使用してページを設計している場合は、コンポーネント・ギャラリを使用してグラフをJSFページに追加します。ページにグラフ・コンポーネントをドラッグ・アンド・ドロップすると、「グラフの作成」ダイアログに使用可能なグラフ・タイプのカテゴリが説明とともに表示され、グラフの作成を視覚的に支援します。グラフのタイトルおよび凡例のクイックスタート・レイアウトも指定できます。図24-6に、デフォルトの縦方向の集合棒グラフ・タイプが選択された棒グラフ用「棒グラフの作成」ダイアログを示します。
ダイアログが完了して、ページにグラフが追加されると、プロパティ・インスペクタを使用して、データ値を指定し、グラフに追加の表示属性を構成できます。
プロパティ・インスペクタで、各属性フィールドのドロップダウン・メニューを使用して、プロパティの説明、およびEL式ビルダーまたはその他の専用ダイアログの表示などのオプションを表示できます。図24-7に、棒グラフ・コンポーネントのvalue
属性のドロップダウン・メニューを示します。
注意: アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用してグラフを作成でき、バインドが自動的に行われます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたグラフの作成に関する項を参照してください。 |
ページにグラフを追加する手順:
コンポーネント・パレットで、「ADFデータ視覚化」ページの「グラフとゲージ」パネルから希望するグラフのカテゴリをページにドラッグ・アンド・ドロップし、「グラフの作成」ダイアログを開きます。
ダイアログを使用して、グラフ・タイプと、グラフ・タイトル、凡例およびラベルの表示用クイック・スタート・レイアウトを選択します。ダイアログのヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
プロパティ・インスペクタで、グラフの属性を表示します。ヘルプ・ボタンを使用して、グラフ・タイプ・コンポーネントの完全なタグ・ドキュメントを表示します。
「共通」セクションを開きます。このセクションを使用して、次の属性を設定します。
SubType: グラフ・タイプのバリエーションを変更する場合は、属性ドロップダウン・メニューから希望するタイプを選択します。グラフによって有効な値は異なります。
たとえば、棒グラフに対する有効な値は次のとおりです。
BAR_VERT_CLUST
: 縦向きの集合棒グラフ。
BAR_VERT_CLUST_SPLIT2Y
: 集合縦棒分割二重Yグラフ。
BAR_VERT_CLUST2Y
: 集合縦棒二重Yグラフ。
BAR_VERT_FLOAT_STACK
: フローティング積み上げ縦棒グラフ。
BAR_VERT_PERCENT
: パーセント縦棒グラフ。
BAR_VERT_STACK
: 積上げ縦棒グラフ。
BAR_VERT_STACK_SPLIT2Y
: 積上げ縦棒分割二重Yグラフ。
BAR_VERT_STACK2Y
: 積上げ縦棒二重Yグラフ。
「グラフ・データ」セクションを開きます。次のフィールドの値を設定して、グラフのデータ値を指定します。
Value: EL式を使用してデータ・モデル(DataModel
のインスタンス)を指定します。または、メトリック値をJava.lang.Number
オブジェクトまたはString
のいずれかとして設定します。
TabularValue: または、表形式のデータ・セットをJava.util.List
オブジェクトとして指定します。詳細は、24.4.2項「表形式のデータを使用したグラフの作成方法」を参照してください。
「外観」セクションを開きます。次のフィールドの値を設定して、表示属性を指定します。
ShortDesc: グラフの目的およびスクリーン・リーダーで使用するための構造の説明を入力します。
EmptyText: グラフにデータがない場合に表示するエラー・テキストを指定します。
クライアントがサポートしている場合、新しいグラフはクライアントにHTML5イメージ形式で表示されます。グラフのイメージ形式の詳細は、第24.4.4項「グラフのイメージ形式に関する必知事項」を参照してください。
表形式データからグラフを作成するプロセスのステップは次のとおりです。
グラフのマネージド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-8には、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.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; }
グラフ・タグのtabularData
属性を使用して、マネージドBeanのメソッドに格納されたデータを参照します。
マネージドBeanからのデータを使用するグラフを作成する手順:
構造ウィンドウでdvt:<type>Graphノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタの「グラフ・データ」セクションで、TabularData属性のドロップダウン・メニューをクリックし、「式ビルダー」を選択します。
次のダイアログから検索ボックスを使用してマネージドBeanを特定します。
マネージドBeanのノードを展開し、表形式データのリストを含むメソッドを選択します。
「OK」をクリックします。
式ビルダーでは、選択したマネージドBeanのメソッドを参照するよう、tabularData
属性が設定されています。たとえば、sampleGraph
という名前のマネージドBeanとgetTabularData
という名前のメソッドの場合、tabularData
属性には#(sampleGraph.tabularData)
と設定されます。
tabularData
属性を参照するリストから取得したデータを持つグラフを作成する場合、デフォルトでは集合縦棒グラフが作成されます。表形式データがそのグラフ・タイプのデータ要件を満たすかぎり、graphType
属性の設定を50種類以上のグラフのいずれにも変更できます。グラフ・タグのその他多数の属性の設定も変更できます。
構造ウィンドウでグラフの子タグをdvt:<type>Graph
ノードにドラッグし、属性に設定を指定することでグラフをカスタマイズします。
グラフでは、HTML5、FlashおよびPNGなどのイメージ形式がサポートされています。使用されるイメージ形式は、アプリケーションの設定およびクライアント環境によって異なります。Skyrosスキンを使用している場合、デフォルトではグラフはHTML5イメージ形式を使用して表示されます。新しいアプリケーションでは、デフォルトでこのスキンが使用されます。
アプリケーションがカスタム・スキンを使用している場合は、アプリケーションのweb.xml
ファイルにパラメータoracle.adf.view.rich.dvt.DEFAULT_IMAGE_FORMAT
を追加することにより、アプリケーションがHTML5形式を使用するように構成できます。web.xmlのコンテキスト初期化パラメータの詳細は、第A.2.3.24項「グラフとゲージのイメージ形式」を参照してください。スキニングとスタイルの詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
指定したイメージ形式をクライアントで使用できない場合、アプリケーションでは使用可能な形式がデフォルトになります。たとえば、クライアントがHTML5をサポートしていない場合、アプリケーションでは次が使用されます。
Flash (Flash Playerが使用可能な場合)。
adf-config.xml
でflash-player-usage
コンテキスト・パラメータを設定すれば、アプリケーション全体にわたってFlashコンテンツの使用を無効にできます。詳細は、A.4.3項「コンポーネント出力形式としてのFlashの構成」を参照してください。
Portable Network Graphics (PNG)出力形式。PNG出力形式は、グラフの印刷時にも使用されます。静的レンダリングは、PNG出力形式使用時には完全にサポートされますが、次のような一部のインタラクティブ機能は使用できません。
アニメーション
コンテキスト・メニュー
ドラッグ・アンド・ドロップ・ジェスチャ
円グラフのスライスのインタラクティブ動作
参照オブジェクトのホバー動作
ポップアップのサポート
選択項目
系列のロールオーバー動作
データ・コントロール・パネルまたはコンポーネント・パレットを使用してグラフを挿入する場合、コンポーネント・ギャラリに使用できるグラフのカテゴリ、タイプおよびクイック・スタート・レイアウトのオプションが表示され、そこから選択できます。グラフ・タイプを選択すると、そのグラフのsubType
属性が設定されます。ファンネル・グラフとレーダー・グラフ以外のすべてのグラフ・タイプを変更できます。
グラフのタイプを変更する手順:
構造ウィンドウでdvt:<type>Graphノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタの「共通」属性カテゴリで、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グラフ。
大部分のADFグラフ・タイプに、カスタマイズ可能な一般的な機能があります。次のタイプのカスタマイズが、大半のグラフ・タイプでサポートされています。
グラフのデータ値の色、スタイルおよび表示の変更。詳細は、24.6.1項「グラフのデータ値の色、スタイルおよび表示の変更」を参照してください。
グラフのカテゴリ・データ値および数値データ値の書式設定。詳細は、24.6.2項「グラフのデータ値の書式設定」を参照してください。
グラフのテキストの書式設定。詳細は、24.6.3項「グラフのテキストの書式設定」を参照してください。
注意: JDeveloperでは、無効な色の値を避けるため、グラフ要素で色関連の属性を指定する場合に色の選択ダイアログが用意されています。 |
ビジュアル・エディタでグラフ・コンポーネントを編集する場合、グラフ機能のカスタマイズに対応するために特殊なコンテキスト・メニューやプロパティ・インスペクタのボタンを利用できます。エディタのポップアップにより、カスタマイズするグラフ機能の選択内容が確認されます。たとえば、図24-9では、折れ線グラフの描画エリアに表示されたポップアップを示しています。
ビジュアル・エディタでグラフ機能を選択すると、専用の編集コンテキスト・メニューが使用できるようになります。図24-10に示す折れ線グラフの描画エリアのコンテキスト・メニューからは、横のグリッド・マークのデフォルト表示の削除など、様々なオプションを選択できます。コンテキスト・メニューやプロパティ・インスペクタのボタンを使用すると、描画エリアの特殊塗りつぶし効果を構成することもできます。グラフ・タグの選択は、ビジュアル・エディタ、構造ウィンドウ、プロパティ・インスペクタおよびソース・エディタで同期化されます。
折れ線グラフの構成の詳細は、第24.7.2項「グラフの線の外観の変更」を参照してください。特殊な塗りつぶし効果の構成の詳細は、第24.8.2項「グラフでのグラデーション特殊効果の使用」を参照してください。
ほとんどのグラフ・タイプで、グラフの棒、折れ線、面、ポイントおよびスライスとして表されるデータ値のセットごとにエントリが凡例に表示されます。このエントリは関連するデータ値のセットを識別し、グラフ内でのセットの色を示します。たとえば、棒グラフでは、黄色の棒を使用して靴の売上げを示し、緑色の棒を使用してブーツの売上げを示します。グラフ・コンポーネントでは、関連のデータ値の各セットを系列として参照します。
グラフでは、データ値の各セットに異なる色が自動的に割り当てられます。塗りつぶしや枠の色などの各系列に割り当てられた色はカスタマイズできます。一部のグラフ・タイプでは、グラフの凡例で系列の非表示または表示により、グラフ内のデータ値の表示をフィルタ処理できます。
特定のグラフ・タイプでは、折れ線グラフの線の幅やスタイルなどの追加属性を、実線、点線、ダッシュ線などの選択肢で指定できます。詳細は、24.7.2項「グラフでの線の外観の変更」を参照してください。
散布図の場合、データ値の相互依存関係を表すために、データ・マーカーの形状や色を系列と区別することができます。詳細は、24.7.4項「散布図の系列マーカーのカスタマイズ」を参照してください。
グラフ内の各系列の色にグラデーション特殊効果を追加してカスタマイズすることもできます。詳細は、24.8.2項「グラフでのグラデーション特殊効果の使用」を参照してください。
1つのdvt:seriesSet
タグを使用して、グラフの個々のdvt:series
タグをすべてラップし、グラフ・データ・マーカーの色およびスタイルの属性を設定します。
グラフの系列アイテムに色とスタイルを指定する手順:
構造ウィンドウで、dvt:<type>Graphノードのdvt:seriesSet子タグを右クリックし、「プロパティに移動」を選択します。
必要に応じてプロパティ・インスペクタを使用し、dvt:seriesSet
タグの属性に値を指定します。
このタグの属性によって、セット内のすべての系列タグのデフォルト設定が決まります。ただし、指定した系列のこの設定を、dvt:series
タグの対応する属性に値を入力することでオーバーライドできます。
構造ウィンドウで、dvt:seriesSetノードを開きます。
dvt:seriesノードを右クリックして、「プロパティに移動」を選択します。
最初のdvt:series
タグが「グラフ・バインディングの作成」ダイアログに表示される最初の系列を表します。
プロパティ・インスペクタを使用して、dvt:series
タグに、必要に応じて色と他の特性を指定します。
追加の系列アイテムを構成するには、構造ウィンドウでdvt:seriesSetノードを右クリックして、「dvt:seriesSetの中に挿入」→「系列」を選択します。
プロパティ・インスペクタを使用して、dvt:series
タグに、必要に応じて色と他の特性を指定します。
面、棒、バブル、組合せ、折れ線、円、レーダーおよび散布図のグラフ・タイプについては、実行時にグラフ内の系列の非表示または表示を有効にできます。グラフでは少なくとも1系列を表示する必要がありますが、ユーザーは対応する凡例アイテムをクリックすることにより、データの表示をフィルタ処理できます。
系列アイテムの非表示および表示を有効にする手順:
構造ウィンドウでdvt:<type>Graphノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタの「外観」セクションの「系列」セクションで、グラフのhideAndShowBehavior属性を設定します。有効な値は、次のとおりです。
none
: デフォルト値で、系列の非表示および表示の動作は無効です。
withRescale
: 見える系列のみが表示されるようにグラフのサイズを変更します。
withoutRescale
: 系列は非表示なりますが、グラフのサイズは変わりません。
データ・コレクション内の属性には、データ値またはデータ値のカテゴリを指定できます。データ値は、棒の高さや散布図のポイントなどのマーカーで表される数値です。データ値のカテゴリは、順序軸ラベルとして表されるメンバーか、またはツールチップ内の追加プロパティとして表示されます。数値属性とカテゴリ属性はどちらも、ADF Facesコンバータ・タグ(数値データ値の場合はaf:convertNumber
、カテゴリ・データ値の場合はaf:convertNumber
、af:convertDateTime
およびaf:convertColor
)を使用して書式設定できます。
コンバータ・タグの属性で、パーセントの書式設定、数値の位取り、小数部の桁の制御、記号の配置などが行えます。ADF Facesコンバータの詳細は、第6章「入力の検証および変換」を参照してください。
グラフ内のカテゴリ・データ値は、グラフのデータ・モデルを定義するページ定義ファイル(<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:convertNumber
、af:convertDateTime
およびaf:convertColor
を使用できます。
たとえば、例24-4のページ定義で定義される雇用日とボーナスのカテゴリ・データ値の書式を設定できます。
ページ定義ファイルで定義されるカテゴリ・データ値の書式設定の手順:
構造ウィンドウでdvt:<type>Graphを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「属性フォーマット」と選択します。
プロパティ・インスペクタで、Name属性の情報を入力します。
たとえば、例24-4の雇用日の値を指定するには、Name属性にHiredate
を入力します。
構造ウィンドウで、指定した属性フォーマット・タグを右クリックし、「dvt:attributeFormatの中に挿入」→「<Type>の変換」と選択します。
たとえば、引き続きHiredate
の書式を設定するには、dvt:attributeFormatノードを右クリックして、「dvt:attributeFormatの中に挿入」→「日時の変換」と選択します。
構造ウィンドウでaf:convert<Type>ノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタを使用して、コンバータ用の値を入力します。詳細は、第6章「入力の検証および変換」を参照してください。
たとえば、例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つの場合、グラフには時間軸が表示されます。時間軸には、単一のラベル(「June 27, 2001」など)とは対照的に、階層形式で日付が表示されます。順序軸に単一ラベルを表示するには、時間軸をオフにし(たとえば |
ADF Faces af:convertNumber
タグを使用して、次のgraph
タグに関連する数値データ値の書式設定を指定します。
dvt:sliceLabel
dvt:stockVolumeFormat
dvt:x1TickLabel
dvt:x1Format
dvt:y1TickLabel
dvt:y1Format
dvt:y2TickLabel
dvt:y2Format
dvt:zFormat
たとえば、デフォルトでは円グラフは、全体に対する各部分の関係を円のスライスとして表して、各スライスのラベルには各スライスが表す割合が表示されます。定価を決める材料費、労務費および利益などの値として各スライスが表示されるように円グラフを構成できます。dvt:sliceLabel
タグのtextType
属性を指定して、スライスで表される値を表示し、それに応じて数値の書式を設定します。
円グラフのスライス・ラベルで数値の書式を設定する手順:
構造ウィンドウで円グラフ・タグの子のdvt:sliceLabelタグを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、TextType属性のドロップダウン・リストから「LD_VALUE」を選択し、グラフ内の円のスライスが1つの値を表すことを指定します。
プロパティ・インスペクタで、「区分ラベルの構成」をクリックし、ドロップダウン・リストから「数値書式」を選択します。
af:convertNumberタグには、プロパティ・インスペクタで、通貨記号にドル記号を使用して通貨の値を指定します。
例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軸に関連するマーカー・テキストの数値を書式設定する手順:
構造ウィンドウでdvt:<type>Graphノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「マーカー・テキスト」と選択します。
プロパティ・インスペクタで、必要に応じてdvt:markerTextの属性に値を入力します。
たとえば、グラフ内のテキストを表示するために、rendered
属性にtrue
を選択します。
プロパティ・インスペクタで、「マーカーの構成」をクリックし、「Y1フォーマット」を選択します。
プロパティ・インスペクタで、必要に応じてdvt:y1Format属性に値を入力します。
プロパティ・インスペクタで、「数値書式の構成」をクリックし、必要に応じて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)に設定されている場合、子の |
コンパクトできれいな表示を実現するために、グラフでは、軸ラベル、マーカー・テキストおよびツールチップに表示される値のスケールおよび精度が自動的に決まります。たとえば、40,000の値は40Kと書式設定され、0.230546は小数点以下2桁の0.23として表示されます。
af:convertNumber
が指定されている場合でも、自動書式設定は行われます。af:convertNumber
子タグをサポートするグラフ・タグには、グラフの自動数値書式設定の制御に使用できるscaling
属性およびautoPrecision
属性があります。デフォルトでは、これらの属性値はscaling="auto"
およびautoPrecision="on"
に設定されています。af:convertNumber
で指定される小数部の桁の設定(minFractionDigits
、maxFractionDigits
またはpattern
など)は、autoPrecision
がoff
に設定されていないかぎり無視されます。
次のグラフのサブコンポーネントのテキストを書式設定できます。
注釈: 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.6.5.2項「グラフのタイトルと脚注の指定方法」を参照してください。
カスケード・スタイル・シート(CSS)を使用してスキンを作成し、アプリケーションでそのスキンを使用するように構成することにより、アプリケーション内のすべてのページにわたり、グラフ・コンポーネントのfont
属性を設定できます。グラフ・コンポーネントで使用フォントを定義するスキンを適用することで、アプリケーション内のページは、CSSファイルの変更で簡単に変更できる一貫したスタイルで、より小さく整理されたものになります。
ADFデータ視覚化ツールのスキン・セレクタを使用すれば、グラフ・コンポーネントのフォント・スタイルを定義できます。フォント・スタイルの設定をサポートするグラフ・コンポーネントのスキン・セレクタには、次のものがあります。
af|dvt-graph
af|dvt-graphFootnote
af|dvt-graphSubtitle
af|dvt-graphTitle
af|dvt-o1Titl
e
af|dvt-x1Title
af|dvt-y1Title
af|dvt-y2Title
af|dvt-pieLabel
af|dvt-ringTotalLabel
af|dvt-legendTitle
af|dvt-legendText
af|dvt-markerText
af|dvt-o1TickLabel
af|dvt-x1TickLabel
af|dvt-y1TickLabel
af|dvt-y2TickLabel
af|dvt-annotation
af|dvt-sliceLabel
af|dvt-tooltips
ADFデータ視覚化ツールの汎用スキン・セレクタを使用すれば、複数のグラフ・コンポーネントにわたるfont
属性も使用できます。グローバル・スキン・セレクタ名は:alias
擬似クラスで終わり、複数のコンポーネントのスキンに影響を与えます。グラフ・フォントのグローバル・スキン・セレクタには、次のものがあります。
.AFDvtGraphFont:alias
: すべてのグラフ・コンポーネントのfont
属性を指定します。
.AFDvtGraphTitlesFont:alias
: すべてのグラフ・タイトル・コンポーネントのfont
属性を指定します。
.AFDvtGraphLabelsFont:alias
: すべてのグラフ・ラベル・コンポーネントのfont
属性を指定します。
カスタム・スキンを使用してグラフ・フォントを設定する手順:
グラフ・サブコンポーネント用に定義されたスキン・スタイル・セレクタを含むアプリケーションに、カスタム・スキンを追加します。次の属性の値を指定できます。
-tr-font-family
: フォント・ファミリ(名前)を指定します。複数のフォントを指定できない場合があります。複数のフォントが指定されている場合、最初のフォントが使用されます。
-tr-font-size
: フォントのサイズを指定します。絶対サイズの単位は次のように定義されます。
pt
: ポイントは、CSS2で使用される標準フォント・サイトで、1ポイントは1/72インチに相当します。
in
: インチで、1インチは72ポイントに相当します。
cm
: センチメートルで、1センチメートルは約28ポイントに相当します。
mm
: ミリメートルで、1ミリメートルは約2.8ポイントに相当します。
pc: パイカで、1パイカは12ポイントに相当します。
この属性には、次のフォント・サイズ名も使用できます。
xx-small
: 8ポイント
x-small
: 9ポイント
small
: 10ポイント
medium
: 12ポイント
large
: 14ポイント
x-large
: 16ポイント
xx-large
: 18ポイント
-tr-font-style
: フォントのスタイルを指定します。有効な値は、normal
またはitalic
です。
-tr-font-weight
: フォントの太さを指定します。有効な値は、normal
またはbold
です。
-tr-text-decoration
: 下線強調を描画するかどうかを指定します。有効な値は、none
またはunderline
です。
-tr-color
: フォントの色を指定します。有効な値は、HTMLおよびCSSの色名です。World Wide Web Consortiumでは、aqua
、black
、blue
、fuchsia
、gray
、green
、lime
、maroon
、navy
、olive
、orange
(CSS 2.1)、purple
、red
、silver
、teal
、white
およびyellow
の17色を有効色名としています。
この他、3、6または8桁のHEX (アルファ・チャネルは8桁HEXの最初の2桁)、RGBまたはRGBAも使用できます。
たとえば、mySkin.css
ファイルのすべてのグラフ・タイトル用フォント・ファミリは次のように指定します。
af|dvt-graphTitle { -tr-font-family: Comic Sans MS; }
カスタム・スキンをtrinidad-skins.xml
ファイル内のアプリケーションに登録します。
カスタム・スキン登録の詳細は、第20.2.3項「カスタム・スキンの登録方法」を参照してください。
trinidad-config.xml
ファイルでカスタム・スキンを使用するようにアプリケーションを構成します。
trinidad-config.xml
の構成の詳細は、第20.2.4項「カスタム・スキンを使用するためのアプリケーションの構成方法」を参照してください。
アプリケーションとともにデプロイされるように、カスタム・スキンをjarファイルにパッケージ化します。スキンを定義し、CSSファイルを参照するtrinidad-skins.xml
ファイルは、META-INF
ディレクトリに内に存在する必要があります。
カスタム・スキンのパッケージ化の詳細は、第20.7項「JARファイルへのカスタム・スキン・ファイルのデプロイ」を参照してください。
アプリケーションへのカスタム・スキン適用の詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
グラフの幅と高さはカスタマイズでき、コンテナのサイズ変更に基づいて動的にサイズ変更することができます。グラフで使用されるスタイルシートを制御することもできます。グラフのこれらの2つの側面は、ともにグラフのinlineStyle
属性を使用するという点で関連性があります。
dvt:<type>Graph
タグの属性の値を指定すると、グラフの初期サイズを指定できます。グラフの動的サイズ変更を指定しない場合、初期サイズが、グラフの唯一の表示サイズです。
グラフが初めて表示される際のサイズを指定する手順:
構造ウィンドウでdvt:<type>Graphノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタの「スタイル」セクションで、グラフ・タグのinlineStyle
属性の値を入力します。次に例を示します。
inlineStyle="width:200px;height:200px"
JSFページでコンテナのサイズが変更されたときにグラフがサイズ変更されるようにするには、dvt:<type>Graph
タグの2つの属性のそれぞれに値を入力する必要があります。この機能用に指定する値は、サイズの異なるブラウザ・ウィンドウの領域を使用するグラフ・コンポーネントの作成にも有用です。
グラフの動的サイズ変更を有効にする手順:
構造ウィンドウでdvt:<type>Graphノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタの「動作」属性カテゴリで、DynamicResize
属性に「DYNAMIC_SIZE」を選択します。
プロパティ・インスペクタの「スタイル」属性カテゴリで、InlineStyle
属性の幅と高さの両方に、ピクセルの定数または相対的割合を入力します。
たとえば、コンテナの50%の幅で200ピクセルの高さのグラフを作成するには、inlineStyle
属性に"width:50%;height:200px;"
という設定を使用します。
ベスト・プラクティスのヒント: 100%の幅を指定する場合は、 |
dvt:<type>Graph
タグに使用できる標準スタイルを選択できます。グラフに使用するカスタム・スタイルシートを指定することもできます。
グラフに特定のスタイルシートを選択する手順:
グラフに用意されている標準スタイルシートを使用する場合は、次のようにします。
構造ウィンドウでdvt:<type>Graphノードを右クリックし、「プロパティに移動」を選択します。
「外観」属性カテゴリで、style
属性ドロップダウン・リストからスタイル・シートを選択します。
カスタム・スタイルシートを使用する場合は、プロパティ・インスペクタの「スタイル」セクションで次の属性を設定します。
StyleClass
属性に対し、「プロパティ」メニュー選択肢から「編集」を選択し、このゲージに使用するCSSスタイル・クラスを選択します。
InlineStyle
属性の幅と高さに、ピクセルの定数または相対的割合を入力します。
たとえば、コンテナの50%の幅で200ピクセルの高さのグラフを作成するには、inlineStyle
属性に"width:50%;height:200px;"
という設定を使用します。
グラフでは、使用しているスタイルに基づいて、背景と描画エリアにデフォルト設定が自動的に指定されます。これらの設定は、グラフの子タグを使用してカスタマイズできます。
グラフには、タイトル、サブタイトル、脚注のオプションも指定できます。デフォルトでは、タイトルと脚注にはテキストは指定されていません。この情報を入力する際、テキストに使用するフォントとフォント特性も指定できます。
グラフの背景と描画エリアに関連する次の箇所をカスタマイズできます。
背景:グラフがプロットされる領域。
描画エリア:円グラフ以外のすべてのグラフでデータがプロットされるフレーム。描画エリアの最低2つの境界に軸が表示されます。
円フレーム:軸を使用しない円グラフがプロットされるフレーム。
グラフの背景と描画エリアをカスタマイズする手順:
グラフの背景をカスタマイズする場合は、次のようにします。
構造ウィンドウでdvt:backgroundノードを右クリックし、「プロパティに移動」を選択します。
背景の塗りつぶしの色を変更するには、FillColor属性のプルダウン・メニューから「編集」を選択し、プロパティ・エディタで使用する色を選択します。
円グラフ以外のグラフの描画エリアをカスタマイズする場合は、次のようにします。
構造ウィンドウでdvt:graphPlotAreaノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタを使用して、カスタマイズする属性の色をdvt:graphPlotArea
タグに入力します。
円グラフの描画エリアをカスタマイズする場合は、次のようにします。
構造ウィンドウでdvt:graphPieFrameノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタを使用して、カスタマイズする属性の色をdvt:graphPieFrame
タグに入力します。
グラフのタイトル、サブタイトルおよび脚注を指定できます。これらのテキスト・エントリに、グラフの個別の子タグを使用します。これらの各子タグの属性では、テキスト・フィールドの水平方向の位置合せ、テキストの内容と、テキストをレンダリングするかどうかを定義できます。
タイトル、サブタイトルおよび脚注のタグでは、子グラフ・フォント・タグの使用がサポートされ、各テキスト・フィールドに使用するフォント特性を指定できます。
グラフのタイトルと脚注を指定する手順:
グラフのタイトルを入力する場合は、次のようにします。
構造ウィンドウでdvt:<type>Graphノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「グラフ・タイトル」と選択します。
プロパティ・インスペクタを使用してdvt:graphTitle
タグの属性に値を指定します。
テキストに特定のフォント特性を指定する場合は、構造ウィンドウで「dvt:graphTitle」ノードを右クリックし、「dvt:graphTitleの中に挿入」→「フォント」を選択します。
プロパティ・インスペクタを使用してdvt:graphFont
タグの属性に値を指定します。
グラフのサブタイトルを入力する場合は、次のようにします。
構造ウィンドウでdvt:<type>Graphノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「サブタイトル」と選択します。
プロパティ・インスペクタを使用してdvt:graphSubtitle
タグの属性に値を指定します。
テキストに特定のフォント特性を指定する場合は、構造ウィンドウで「dvt:graphSubtitle」ノードを右クリックし、「dvt:graphSubtitleの中に挿入」→「フォント」を選択します。
プロパティ・インスペクタを使用してdvt:graphFont
タグの属性に値を指定します。
グラフの脚注を入力する場合は、次のようにします。
構造ウィンドウでdvt:<type>Graphノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「脚注」と選択します。
プロパティ・インスペクタを使用してdvt:graphFootnote
タグの属性に値を指定します。
テキストに特定のフォント特性を指定する場合は、構造ウィンドウで「dvt:graphFootnote」ノードを右クリックし、「dvt:graphFootnoteの中に挿入」→「フォント」を選択します。
プロパティ・インスペクタを使用してdvt:graphFont
タグの属性に値を指定します。
グラフには次の軸を使用できます。
順序軸(o1軸とも呼ばれる):グラフの順序(カテゴリ)軸は、レーティングやステージなどの順序付けされたデータを示したり、異なる都市や異なる製品などの名前のデータを示します。順序軸は、棒グラフ、折れ線グラフ、組合せグラフまたはレーダー・グラフに表示されます。順序軸が水平で時間データを含む場合は、時間軸と呼ばれます。
順序軸の例は、縦棒グラフの描画エリアの下部を横切る線です。この軸上の値は、標示されているデータの程度は示しません。そのかわり、データが属する異なるグループを示します。
X1軸:X1軸は、グラフの横軸に沿って表示される値を示します。この軸は、グループ・ラベルではなく、一定間隔の数値を持ちます。X軸とも呼ばれます。
Y1軸:Y1軸は、第1Y軸です。通常、描画エリアの左側の縦方向の値軸です。一定間隔の数値を持ちます。
Y2軸:Y2軸は、第2Y軸です。通常、描画エリアの右側の縦軸です。一定間隔の数値を持ちます。
各軸には、カスタマイズをサポートするいくつかのグラフ子タグがあります。次の項で、軸の様々なカスタマイズに使用できるオプションについて説明します。
次のグラフ子タグで、軸のタイトルと外観のカスタマイズがサポートされます。
タイトル:軸のタイトルのテキストと位置合せを指定します。dvt:o1Title
、dvt:x1Title
、dvt:y1Title
およびdvt:y2Title
のタグがあります。適切なタイトル・タグを使用しないと、軸にタイトルは表示されません。
軸: 色、線幅、スケーリング、ティック・マーク間の増分、軸の可視性および特定のグラフ・タイプでのスクロールを制御します。dvt:o1Axis
、dvt:x1Axis
、dvt:y1Axis
およびdvt:y2Axis
のタグがあります。
注意: 順序軸には数値は表示されないため、 |
X1軸のタイトルと外観を指定する手順:
構造ウィンドウでdvt:<type>Graphノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「X1タイトル」と選択します。
プロパティ・インスペクタで、軸のタイトルを入力し、必要に応じてこのタグの他の属性に値を指定します。
タイトルのフォント属性を指定する場合は、次のようにします。
構造ウィンドウでグラフの「dvt:x1Title」ノードを右クリックし、「dvt:x1Titleの中に挿入」→「フォント」を選択します。
プロパティ・インスペクタで、フォントの特性に値を入力します。
他のグラフの軸のタイトルと外観を制御する手順は、X軸に対する手順と似ています。ただし、カスタマイズする特定の軸に関連付けるタイトルのタグを挿入します。
グラフ軸上のスクロールは、次のグラフ・タイプに対して指定できます。
dvt:o1Axis
、dvt:y1Axis
およびdvt:y2Axis
タグの面、棒および折れ線グラフ。
dvt:x1Axis
、dvt:y1Axis
およびdvt:y2Axis
タグのバブル・グラフおよび散布図。
デフォルトでは、グラフ軸のscrolling
属性はoff
に設定されています。scrolling
属性には次の値を指定できます。
off
: スクロールは無効です(デフォルト)。
on
: スクロールは有効で、スクロールバーが常に表示されます。
asNeeded
: スクロールは有効ですが、スクロールバーは最初表示されません。グラフでズームすると、スクロールバーが表示され、そのセッション中は表示されたままになります。
hidden
: スクロールは有効ですた、スクロールバーは常に非表示です。ユーザーはパン・スクローリングを使用できます。
ティック・マークは、グラフのスケール上の特定の値を示すために使用されます。次のグラフ子タグで、軸のティック・マークとラベルのカスタマイズがサポートされます。
主ティック:軸のティック・マークの色、幅とスタイルを制御します。dvt:o1MajorTick
、dvt:x1MajorTick
、dvt:y1MajorTick
およびdvt:y2MajorTick
のタグがあります。主ティックの増分は、デフォルトでは自動的に計算されますが、majorIncrement
属性でティックの段階を指定できます。
副ティック: 軸上の副ティック・マークの色、幅およびスタイルを制御します。dvt:x1MinorTick
、dvt:y1MinorTick
およびdvt:y2MinorTick
のタグがあります。副ティックの増分は、デフォルトでは主ティックの増分の半分ですが、minorIncrement
属性でティックの段階を指定できます。副ティックにはラベルは付けられません。
ティック・ラベル: 主ティックのラベルの向きを制御し、ラベルのフォント特性を指定できます。dvt:o1TickLabel
、dvt:x1TickLabel
、dvt:y1TickLabel
およびdvt:y2TickLabel
のタグがあります。これらのタグは、ラベルのフォント特性を変更するdvt:graphFont
子タグを持つこともできます。
順序軸のティック・ラベルの外観を制御する手順:
ビジュアル・エディタで、グラフ上の「O1ティック・ラベル」要素を選択します。
または、構造ウィンドウで「dvt:o1Axis」
要素を選択し、プロパティ・インスペクタで「O1軸の構成」ボタンをクリックして、「値ラベル」を選択します。
プロパティ・インスペクタで、次のプロパティに必要に応じて値を入力します。
TextRotation: ティック・ラベルを読みやすくするために、テキストの回転度数の指定に使用します。
注意: 最良の結果を得るには、90度の倍数の回転角度を使用します。Flashイメージ・タイプの場合、90度以外の角度の回転テキストをサポートするには埋込みフォントが必要であり、すべてのロケールで埋込みフォントが使用可能とはかぎりません。 |
TickLabelSkipMode: 順序軸上でティック・ラベルを表示するかどうか、およびどのように表示するかの指定に使用します。TLS_MANUAL
で値を設定すると、必要に応じてtickLabelSkipCount
を使用してティック・ラベル間に表示するティック・ラベルの数を設定し、tickLabelSkipFirst
を使用してスキップする最初のティック・ラベルのインデックスを設定することができます。
必要に応じて、プロパティ・インスペクタで「フォントの構成」ボタンをクリックし、子のdvt:graphFont
タグのプロパティを設定します。
X軸のティック・マークとティック・ラベルの外観を制御する手順:
構造ウィンドウでdvt:<type>Graphノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「X1主ティック」と選択します。
プロパティ・インスペクタで、このタグの属性に希望の値を入力し、「ティック・ラベルの構成」ボタンをクリックしてグラフに「X1ティック・ラベル」タグを追加します。
プロパティ・インスペクタで、「X1ティック・ラベル」に希望の値を入力し、必要な場合は「フォントの構成」ボタンをクリックしてティック・ラベルのフォント特性を指定します。
グラフで副ティックを指定する場合は、次のようにします。
構造ウィンドウでdvt:<type>Graphノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「X1副ティック」と選択します。
プロパティ・インスペクタで、フォントの特性に値を入力します。
注意:
|
他のグラフの軸のティック・マークの外観を制御する手順は、X軸に対する手順と似ています。ただし、主ティックとラベルのタグをカスタマイズして、カスタマイズする特定の軸に関連付ける副ティックを挿入します。
dvt:markerText
タグで、軸の数値の書式を制御できます。dvt:markerText
の子タグ(dvt:x1Format
、dvt:y1Format
およびdvt:y2Format
)で特定の軸の数値書式をラップします。
これらの軸の数値の書式を設定するには、24.6.2項「グラフのデータ値の書式設定」に示すように、該当する軸に対する子タグを挿入します。
Y軸にはdvt:y1Axis
とdvt:y2Axis
というグラフの子タグがあり、軸の最初の値がサポートされます。二重Yグラフの各Y軸に異なるスケーリングを指定できます。たとえば、Y1軸は売上数量(単位: 100)を表し、Y2軸は売上高(単位: 1000ドル)を表すことができます。
散布図やバブル・グラフなどの一部のグラフには、最小値や最大値も設定可能なdvt:x1Axis
子タグが含まれています。
Y1軸の最初の値を指定する手順:
構造ウィンドウでdvt:<type>Graphノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「Y1軸」と選択します。
プロパティ・インスペクタで、Y1軸の最初の値をAxisMinValue
フィールドに入力します。
AxisMinAutoScaled
フィールドで、属性ドロップダウン・リストから「false」を選択します。
最小値が適用されるようにするには、この属性を設定する必要があります。
Y2軸の最初の値を設定するには、同様の手順を使用しますが、グラフの子としてdvt:y2Axis
タグを挿入します。
グラフ・コンポーネントには、凡例をカスタマイズする次の種類の子タグが用意されています。
グラフに関連する凡例エリアの色、枠、可視性、位置およびスクロール可能性を指定するdvt:legendArea
タグ。
凡例の色付けされた各エントリに関連するテキストのフォント特性と位置を指定するdvt:legendText
タグ。
凡例エリアのオプションのタイトルとフォント特性を指定するdvt:legendTitle
タグ。
凡例エリア、凡例テキストとタイトルをカスタマイズする手順:
構造ウィンドウでdvt:legendAreaノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタを使用して、このタグの属性に値を指定します。たとえば、凡例エリアには次の属性を指定できます。
AutomaticPlacementおよびPosition: グラフの右または下部での凡例エリアの自動配置を、デフォルト値AP_ALWAYS
で指定します。AP_NEVER
での値の設定には、凡例エリアの配置に使用されるposition
属性の値が必要です。
Scrolling: 使用可能なスペースより大きなスペースが必要な場合、asNeeded
の値を使用して、汎用エリアでのスクロールを指定します。デフォルトではこの値はoff
に設定されています。
PositionHint: 値alignToCenter
を使用して、描画エリアの中央方向に凡例の位置を指定します。デフォルトでは、値は、グラフ枠のエッジ方向へ凡例を配置するalignToEdge
に設定されます。
MaxWidth: 凡例エリアの最大幅をグラフ・エリアのパーセンテージとして指定します。デフォルトでは、この値は空の文字列に設定されており、この場合は幅がグラフの設定値に基づいて自動的に設定されます。
たとえば、凡例の最大幅をグラフ・エリアの50%に設定するには、50%
と入力します。
凡例テキストをカスタマイズする場合は、次のようにします。
構造ウィンドウでdvt:<type>Graphノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「凡例テキスト」と選択します。
プロパティ・インスペクタを使用して、このタグの属性に値を入力します。
「dvt:legendText」ノードを右クリックし、「dvt:legendTextの中に挿入」→「フォント」を選択します。
プロパティ・インスペクタを使用して、フォント・タグの属性に値を指定します。
凡例のタイトルを入力する場合は、次のようにします。
構造ウィンドウでdvt:<type>Graphノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「凡例タイトル」と選択します。
プロパティ・インスペクタを使用して、このタグの属性に値を入力します。
「dvt:legendTitle」ノードを右クリックし、「dvt:legendTitleの中に挿入」→「フォント」を選択します。
プロパティ・インスペクタを使用して、フォント・タグの属性に値を指定します。
ツールチップは、データ・マーカーのIDや詳細情報を表示するのに便利です。markerText
を表示する領域のない小さいグラフには非常に便利です。タイトル、サブタイトル、脚注、凡例テキスト、注釈などのテキストが切り捨てられている場合は、そのコンポーネントのツールチップがグラフに自動的に表示されます。
ほとんどのグラフで、データ・マーカー上にカーソルを置くと、ツールチップが表示されます。折れ線または面グラフでは、単に線上または面上ではなく、データ・マーカー上、あるいは線または面の隅にカーソルを置く必要があります。
各グラフ・マーカー(棒など)で情報付きのツールチップが表示されるように指定できます。グラフのツールチップのカスタマイズには、次のグラフの属性が使用できます。
MarkerTooltipType: マーカー(棒など)に対するツールチップを表示するかどうかを指定し、ツールチップに表示する情報の種類を特定します。テキストのみ、値のみ、あるいはテキストと値の情報を表示できます。特定のグラフ・タイプでは、積上げグラフ・マーカーごとに累積データ値を表示したり、円グラフのスライス・マーカーごとに割合のデータを表示できます。
SeriesTooltipLabel: 凡例に表示される値のセットごとにツールチップを表示するかどうかを指定します。この属性では、系列ツールチップに表示される情報の種類も制御されます。たとえば、系列全体を示す一般的な語(「製品」など)のテキストを表示するか、系列の特定のメンバーを示す特定の語(特定の製品名など)のテキストを表示するかを選択できます。
注意: グラフでは、グラフの |
GroupTooltipLabelType: 軸上のデータ・グループに対するツールチップ・ラベルを表示するかどうかを指定します。たとえば、特定の製品の売上げが年ごとまたは四半期ごとにまとめられているとします。グループ全体を示す一般的な語(「時間」など)のテキストを表示するか、グループの各メンバーを示す特定の語(四半期を表すQ1、Q2、Q3、Q4など)のテキストを表示するかを選択できます。
グラフのmarkerTooltipTemplate
属性をトークン化された文字列に設定することにより、グラフ内のすべてのマーカー・ツールチップの書式をすばやく設定できます。この属性には1つの文字列を指定でき、これには事前に定義されたトークンのセットをいくつでも含めることができます。次に例を示します。
<dvt:lineGraph markerTooltipTemplate="Template Based Tooltip NEW_LINE SERIES_LABEL GROUP_LABEL NEW_LINE Value: Y_VALUE"/>
表24-1に、サポートされるトークンのリストを示します。
表24-1 markerTooltipTemplate文字列トークン
トークン | 説明 |
---|---|
|
新しい行を挿入します。 |
|
このマーカーの系列の系列ラベル。 |
|
このマーカーのグループのグループ・ラベル。 |
|
散布図またはバブル・マーカーあるいは連続時間軸マーカーのX値。 |
|
このマーカーのY値(このマーカーにY値がある場合)。 |
|
バブル・マーカーのZ値(バブルのサイズ)。 |
|
円グラフのスライスの値。 |
|
円グラフのスライスのパーセント値。 |
|
ファンネル・セクションの実際の値。 |
|
ファンネル・セクションのターゲット値。 |
|
株価マーカーの高値。 |
|
株価マーカーの低値。 |
|
株価マーカーの終値。 |
|
株価マーカーの始値。 |
|
株の出来高マーカーの出来高値。 |
|
積上げグラフの累積積上げ値。 |
|
積上げパーセント・グラフまたはパレート・グラフの累積パーセント値。 |
グラフ・コンポーネントでは、50以上のグラフ・タイプがサポートされます。一部のグラフ属性といくつかの子タグは、特定のグラフ・タイプにのみ関連します。
円グラフの外観をカスタマイズできます。また、円グラフの1つのスライスを他のスライスから切り離すよう指定できます。
円グラフの外観は、グラフ・タグ内に次の子タグを挿入することでカスタマイズできます。
dvt:pieFeeler
タグ: 円グラフのスライスからスライス・ラベルへ延びる線(引出線と呼ばれる)の色を指定します。
dvt:slice
タグ: 円グラフのスライスのラベルの位置を指定します。
dvt:sliceLabel
タグ: 円グラフまたはドーナツ・グラフの各スライスを説明するラベルの特性を指定します。各スライスはデータ値を表します。このタグのtextType
属性を使用して、スライス・ラベルにテキストのみを表示するか、割合のみを表示するか、テキストと割合を表示するかを示します。数値を書式設定する場合やフォント特性を指定する場合は、dvt:sliceLabel
タグ内にdvt:graphFont
およびaf:convertNumber
タグを子として追加します。
円グラフで1つのスライスが他のスライスから切り離されている場合、この表示は円グラフのスライスの切離しと呼ばれます。1つのスライスを切り離すのはそのスライスを強調表示するためで、グラフ内で最も大きい分量が割り当てられていることもあります。
円グラフのスライスは、グラフの凡例で示されるデータのセットです。したがって、スライスは円グラフの系列アイテムです。
始める前に:
24.6.1.1項「個々の系列アイテムの色とスタイルの指定方法」の手順に従い、個々の系列アイテムをラップする系列セットを作成します。
円グラフで1つのスライスをカスタマイズする手順:
円グラフでスライスを1つ切り離すには、プロパティ・インスペクタで、円グラフから切り離すスライスを示すseries
タグの「PieSliceExplode」属性に0から100の値を設定します(100が、使用できる最大の切離し距離です)。
円グラフでスライスをアニメーション化するには、プロパティ・インスペクタで、dvt:pieGraph
タグ上の「InteractiveSliceBehavior」属性を設定します。次の値の組合せが有効です。
none
: インタラクティブなスライスの動作は無効です。
explode
: ユーザーは円グラフのスライスをクリックして切り離すことができます。
explodeAll
: コンテキスト・メニューに「すべて開く」および「すべて閉じる」のオプションを追加します。
たとえば、ユーザーが円グラフ内のスライスを切り離し、コンテキスト・メニューを使用して次のコードのグラフですべてのスライスを開くまたは閉じるように指定できます。
<dvt:pieGraph interactiveSliceBehavior="explode explodeAll"/>
注意:
|
グラフのdvt:seriesSet
子の属性を使用して、グラフの線の外観を変更できます。
折れ線、組合せまたはレーダー・グラフには、データ線またはデータ・マーカーを表示できます。データ線ではなく、マーカーを表示する場合、マーカーが凡例に自動的に表示されます。
プロパティ・インスペクタで、dvt:seriesSet
タグの次の属性を設定して、データ線またはデータ・マーカーを表示します。
LineDisplayed: グラフにデータ線を表示するかどうかを指定します。次の値を設定できます。
True
は、グラフにデータ線が表示されることを示します。
False
は、グラフにデータ線ではなく、マーカーが表示されることを示します。
MarkerDisplayed: グラフにマーカーまたはデータ線を表示するかどうかを指定します。次の値を設定できます。
True
は、グラフにマーカーが表示されることを示します。
False
は、グラフにデータ線が表示されることを示します。
注意:
|
次のリストで説明するように、dvt:seriesSet
タグとdvt:series
タグを使用して線の外観をカスタマイズできます。
dvt:seriesSet
タグで次の属性に値を指定すると、タグ内のすべてのdvt:series
タグに作用します。
defaultMarkerShape
: 折れ線グラフ、散布図および組合せグラフにのみ使用されます。系列セット内のすべての系列のデフォルト・マーカーの形状を示します。
defaultMarkerType
: 組合せグラフにのみ使用されます。有効な値は、MT_AREA
、MT_BAR
、MT_MARKER
およびMT_DEFAULT
です。
dvt:series
タグで、次の線属性を使用して個々の系列の設定を指定できます。
lineWidth
: 線の幅をピクセルで指定します。
lineStyle
: グラフで実線、点線、ダッシュ線、ダッシュと点の組合せの線のいずれを使用するかを指定します。
dvt:seriesSet
タグとdvt:series
タグの使用の詳細は、24.6.1.1項「個々の系列アイテムの色とスタイルの指定方法」の手順を参照してください。
パレート・グラフは、一連の棒を使用して不具合の原因を示します。棒は値の大きい方から小さい方に順に並べられます。パレート線は、グラフのすべての棒の合計値に対する棒の累積割合を示します。線は常に100%で終わります。
パレート線とパレート・マーカーは、次のグラフの子タグを使用してカスタマイズできます。
dvt:paretoLine
タグ: 色、線幅と線のスタイル(実線、ダッシュ線、点線、ダッシュと点の組合せなど)を指定できます。
dvt:paretoMarker
タグ: パレート・マーカーの形状を指定できます。
パレート・グラフをカスタマイズする手順:
構造ウィンドウでdvt:paretoLineノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、このタグの属性に値を指定します。
構造ウィンドウでdvt:paretoMarkerノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、markerShape
属性に値を選択します。
散布図では、1系列の関連データ値は、データ・マーカーの形状と色で表されます。データ値の相互依存関係を表すために、データ・マーカーの形状や色を系列と区別することができます。
たとえば、図24-11に、Product
属性やBrand
属性をまとめて使用して、データ・マーカーの形や色で表される系列を決定する散布図を示します。
行ヘッダーの属性を使用して、デフォルト系列の指定をオーバーライドできます。図24-12に、Brand
属性のデータ値が形にマップされ、Product
属性が色にマップされて表示される散布図を示します。
次の属性を使用して、散布図の系列マーカーをカスタマイズします。
markerShape
- マーカーの色の設定に使用する行ヘッダー属性名を指定します。この属性が指定されていない場合、グラフにはデフォルトのインデックス・ベース系列のマーカーの色が表示されます。
markerColor
- マーカーの形の設定に使用する行ヘッダー属性名を指定します。この属性が指定されていない場合、グラフにはデフォルトのインデックス・ベース系列のマーカーの形状が表示されます。
たとえば、次のコードを使用して、BrandとProductを別の系列アイテム・マーカーとして指定します。
<dvt:scatterGraph markerColor="Product" markerShape="Brand" value="#{bindings.View1.graphModel}"/>
グラフのカスタマイズ機能には、系列に関連する参照線や軸に関連する参照領域を定義する機能、グラデーション特殊効果をグラフの数箇所に追加するオプション、グラフの一部を透明色に設定するオプション、およびグラフでのアラートと注釈の使用などがあります。また、これらの特殊機能により、グラフのインタラクティブな機能も使用できます。たとえば、コンテキスト・メニューを表示したり、ズームまたはスクロールのレベルが変更された場合やユーザーがグラフのデータ・マーカーをクリックした場合に応答したりできます。
参照線および領域は、系列や軸の数や関連付けにかかわらず、常に表示する、ロールオーバーのみに表示する、または表示しない設定が可能です。
系列(グラフの凡例で1つの色で表示されるデータ値のセット)に関連付けられる参照線を作成できます。参照線付きの系列が複数ある場合、カーソルを系列マーカーまたは対応する系列凡例アイテム上に移動したときのみ参照線が表示されます。これは、複数の参照線はユーザーにとって紛らわしいからです。
軸に関連付ける参照領域を作成することもできます。通常、これらの領域はY軸に関連付けられます。複数の参照領域がある場合、カーソルを関連する軸上に移動すると、これらの領域も表示されます。
実行時までアプリケーションで必要な参照線と領域の数がわからない場合、参照線と領域を実行時に動的に作成することができます。
参照線も参照領域も、次のタグを使用して作成されます。
dvt:referenceObjectSet
: このグラフの参照線または参照領域のすべての参照オブジェクト・タグをラップします。
dvt:referenceObject
: タグが参照線を表すか、参照領域を表すかを示し、タグの特性を指定します。
設計時に参照線または領域をグラフに追加する手順:
構造ウィンドウでdvt:<type>Graphノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「参照オブジェクト・セット」と選択します。
dvt:referenceObjectSetノードを右クリックして、「プロパティに移動」を選択します。
特定の軸に関連する参照領域を定義する場合は、プロパティ・インスペクタで、関連付けられている表示属性のドロップダウン・メニューを使用して、いつ参照領域を表示するかを指定します。X1軸、Y1軸およびY2軸の参照領域をいつ表示するか(displayX1、displayY1およびdisplayY2の各属性)を指定するか、データ系列の表示設定(displaySeries属性)を指定できます。
たとえば、参照領域をデフォルトのY1軸に関連付ける場合は、displayY1属性のドロップダウン・メニューを使用して、参照領域の表示をRO_DISPLAY_AUTOMATIC
またはRO_DISPLAY_NEVER
に変更します。デフォルトでは、この値はRO_DISPLAY_ALWAYS
に設定され、グラフには常に参照領域が表示されます。
値RO_DISPLAY_AUTOMATIC
は、関連付けられている軸上にマウスが移動したときにのみ参照領域が表示されるようにします。これを選択すると、複数の参照領域が一度に表示されて混乱を招くことがなくなります。
オプションで、参照領域にグラデーション特殊効果を適用できます。詳細は、24.8.2.1項「グラデーション特殊効果のグラフへの追加方法」を参照してください。
構造ウィンドウでdvt:referenceObjectSet
ノードを右クリックし、「dvt:referenceObjectSetの中に挿入」→「参照オブジェクト」と選択します。
dvt:referenceObjectノードを右クリックして、「プロパティに移動」を選択します。
プロパティ・インスペクタで次のようにします。
「共通」セクションで、参照オブジェクトのindex
属性に値を指定し、参照オブジェクトのtype
属性にRO_LINE
またはRO_AREA
を指定し、association
属性に関連付けるオブジェクト(参照線の場合は系列、参照領域の場合は特定の軸)を指定します。また、displayedInLegend
属性を使用してオブジェクトを凡例に表示するかどうかを指定し、凡例に表示するテキストがある場合はこれを指定します。
参照線を作成する場合、線に関連する属性に値を指定します。これには、線が関連付けられる系列の番号の指定も含まれます。系列番号は、グラフ・データ・バインディング・ダイアログに系列が表示される順番のことです。
参照領域を作成する場合、指定した軸の参照領域を示す高低の値を指定します。
必要に応じて追加の属性を構成します。
たとえば、Color属性のドロップダウン・メニューを使用して参照線または参照領域の色を入力します。詳細なヘルプを参照するには、[F1]を押すか、「ヘルプ」をクリックします。
設計時に参照線または領域を作成すると、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>
参照オブジェクトを実行時に動的に作成する場合、dvt:referenceObjectSet
タグのみを使用します。このタグのreferenceObjectMap
属性に、子コンポーネント参照オブジェクトのマップを作成するコードへのメソッド参照を設定します。このマップを作成するメソッドは、マネージドBeanに格納する必要があります。
参照線または領域を動的に作成する手順:
実行時に作成する子コンポーネント参照オブジェクトのマップを作成するメソッドを記述します。例24-9に、このメソッドを作成するコードを示します。
構造ウィンドウでdvt:<type>Graphノードを右クリックし、「dvt:<type>Graphの中に挿入」→「ADFデータ視覚化」→「参照オブジェクト・セット」と選択します。
dvt:referenceObjectSetノードを右クリックして、「プロパティに移動」を選択します。
プロパティ・インスペクタで、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; }
グラデーションは、オブジェクトの色が段階的に変わる特殊効果です。グラデーションの各色は、ストップで表します。最初のストップはストップ0、2番目はストップ1のようになります。特殊効果をサポートするグラフのサブコンポーネントには、特殊効果のストップをいくつでも指定できます。
グラフの次のサブコンポーネントにグラデーション特殊効果を定義できます。
グラフの背景: dvt:background
タグを使用します。
グラフの描画エリア: dvt:graphPlotArea
タグを使用します。
グラフの円フレーム: dvt:graphPieFrame
タグを使用します。
凡例エリア: dvt:legendArea
タグを使用します。
系列: dvt:series
タグを使用します。
注意: デフォルトでは、グラフの系列グラデーションは、 |
時間セレクタ: dvt:timeSelector
タグを使用します。
参照エリア: dvt:referenceObject
タグを使用します。
グラデーション特殊効果を使用する方法は、この効果がサポートされるグラフの各部分で同じです。
特殊効果を追加するグラフのサブコンポーネントごとに、dvt:specialEffects
タグをサブコンポーネントの子タグとして挿入する必要があります(まだ存在しない場合)。たとえば、グラデーションをグラフの描画エリアに追加する場合は、dvt:graphPlotArea
タグの子であるdvt:specialEffects
タグを1つ作成します。
その後、オプションでサブコンポーネントの塗りつぶし色の変化の割合を制御する場合は、コンポーネントの塗りつぶしの色と変化の割合の制御に必要な数のdvt:gradientStopStyle
タグを挿入します。このdvt:gradientStopStyle
タグは、1つのdvt:specialEffects
タグの子タグとして挿入する必要があります。
グラデーション特殊効果をグラフに追加するには:
構造ウィンドウで、グラデーション特殊効果を持たせるコンポーネントに対応するグラフの子ノードを見つけ、必要に応じて開きます。
たとえば、グラデーション特殊効果をグラフの描画エリアに設定するには、dvt:graphPlotAreaノードを見つけて、必要に応じて開きます。
選択した子ノードにdvt:specialEffects子ノードが含まれていない場合は、グラフ・ノードの子ノードを右クリックして、「dvt:<childnode>の中に挿入」→「特殊効果」と選択します。
dvt:specialEffectsノードを右クリックして、「プロパティに移動」を選択します。
プロパティ・インスペクタを使用して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が指定されない場合、これらのポイントにはデフォルトの位置が使用されます。
例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>
グラフの各箇所に関連する子タグにborderTransparent
およびfillTransparent
属性を設定することで、これらの箇所で透明色を表示するよう指定できます。次のリストに、透明色をサポートするグラフの各部分を示します。
グラフの背景: dvt:background
タグを使用します。デフォルトでは、fillTransparent
属性はtrue
に設定されています。
グラフの凡例エリア: dvt:legendArea
タグを使用します。
グラフの円フレーム: dvt:graphPieFrame
タグを使用します。
グラフの描画エリア: dvt:graphPlotArea
タグを使用します。
ユーザーがバブル・グラフのバブルや散布図内の形状など、グラフのデータ・マーカーを1つ以上選択したときに、プログラムで応答できるようにするには、選択サポートを追加します。
図24-13に、選択が有効な棒グラフを示します。各データ・マーカーは、その上を移動すると強調表示され、マーカーが選択可能であることが視覚的に示されます。
グラフでは、単一選択と複数選択のサポートを有効にできます。コンテキスト・メニューを表示したり、ユーザーがデータ・マーカーをクリックしたときにプログラムで応答したりするには、選択を有効にする必要があります。
たとえば、図24-14に、単一および複数選択をサポートし、選択されたシリーズの情報を出力する棒グラフを示します。複数の選択を行うには、キーボードの[Ctrl]を押しながら複数のデータ・マーカーを選択します。
選択サポートを追加するには、選択イベントを処理して必要なロジックを実行するリスナーを、マネージド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>
グラフに選択サポートを追加するには:
マネージドBeanにメソッドを追加して、選択イベントに応答するリスナー・メソッドを定義します。マネージドBeanの詳細は、第2.6.1項「JDeveloperでのマネージドBeanの作成方法」を参照してください。
ページにグラフを追加します。詳細は、第24.4項「グラフの作成」を参照してください。
この項の複数選択サポートの例と同じ構成を行う場合は、棒グラフを作成します。
構造ウィンドウでdvt:<type>Graphノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「動作」セクションを開いて次の属性の値を指定します。
DataSelection: single
またはmultiple
を指定して、単一または複数のデータ・マーカーの選択サポートを有効にします。デフォルトはnoneで、選択はデフォルトでは有効になっていません。
SelectionListener: 選択リスナーへの参照を指定します。
たとえば、graphSelection
という名前のマネージドBeanでselectionListener
メソッドを指定するには、「SelectionListener」フィールドに#{graphSelection.selectionListener}
と入力します。
必要に応じて追加の構成を行います。
たとえば、この項の複数選択の例と同じ構成を行うには、ページにaf:outputFormatted
コンポーネントを追加して、例24-12に示すような選択の詳細を返すように構成します。af:outputFormatted
コンポーネントの構成の詳細は、第16章「出力コンポーネントの使用」を参照してください。
グラフでは、次の3タイプのいずれかのファセットを使用する右クリック・コンテキスト・メニューがサポートされます。
コンポーネント内の選択不可能な領域(描画エリアなど)に表示されるコンテキスト・メニュー
選択可能要素(散布図のマーカーなど)で表示されるコンテキスト・メニュー
複数選択可能要素で表示されるコンテキスト・メニュー
コンテキスト・メニューは、次のコンテキスト・メニュー・ファセットを使用して、グラフ・コンポーネント用に定義できます。
bodyContextMenu
: グラフ・コンポーネント内の選択不可能な要素で表示されるコンテキスト・メニューを指定します。
contextMenu
: グラフ・コンポーネント内の選択可能要素で表示されるコンテキスト・メニューを指定します。
multiSelectContextMenu
: グラフ・コンポーネント内で複数の要素が選択されるときに表示されるコンテキスト・メニューを指定します。
各ファセットでは、1つの子コンポーネントがサポートされます。これらのファセットすべてを機能させるには、特定のグラフ・タイプ用に選択を有効にし、サポートされるようにする必要があります。コンテキスト・メニューが表示されるのは、現時点ではFlashおよびHTML5イメージ形式の場合のみです。
技術的な制限のために、Flashのレンダリング形式の使用時には、現在のところコンテキスト・メニューのコンテンツはFlash Playerのコンテキスト・メニューを使用して表示されます。このため、Flash Playerにより定義されたいくつかの制限があります。詳細は、24.8.5.2項「Flashレンダリング形式に関する必知事項」を参照してください。
図24-15に、HTML5イメージ形式でレンダリングされるカスタム・メニュー・アイテムを持つ散布図のコンテキスト・メニューを示します。
例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; } }
技術的な制限のために、Flashのレンダリング形式の使用時には、現在のところコンテキスト・メニューのコンテンツはFlash Playerのコンテキスト・メニューを使用して表示されます。このため、Flash Playerにより定義されたいくつかの制限があります。
Flashでは、コンテキスト・メニューのサブメニューは使用できません。
Flashでは、カスタム・メニュー項目は15に制限されます。コンポーネントの組込みメニュー項目(円グラフのinteractiveSliceBehavior
メニュー項目など)は、制限に考慮されます。
Flashでは、メニュー項目がテキストのみに制限されます。ADF Facesメニューで可能なアイコンなどのコントロールは、Flashメニューでは使用できません。
各メニュー・キャプションには、1つ以上の表示可能な文字を含める必要があります。制御文字、改行文字およびその他の空白文字は無視されます。キャプションは100文字以内です。
別のカスタム項目と同一のメニュー・キャプションは、一致する項目の表示または非表示に関係なく無視されます。メニュー・キャプションは、組込みキャプションまたは既存のカスタム・キャプションと比較されます(大文字/小文字、句読点、空白は考慮されません)。
次のキャプションは許可されません。ただし、単語同士をつなげて使用して、カスタム・キャプションを作成できます: 保存、ズーム・イン、ズーム・アウト、100%、すべて表示、品質、再生、ループ、巻戻し、進む、戻る、ロードされない映画、バージョン情報、印刷、再描画リージョンの表示、デバッガ、元に戻す、切取り、コピー、貼付け、削除、すべて選択、開く、新規ウィンドウで開くおよびリンクのコピー。
次の単語は、単独または他の単語とともにカスタム・キャプションで表示できません: Adobe、Macromedia、Flash Playerまたは設定。
さらに、Flashからのコンテキスト・メニュー項目のリクエストは同期コールであるため、コンテキスト・メニューの呼出し時には、ELを評価するサーバー・リクエストは不可能です。選択したオブジェクトごとに異なるコンテキスト・メニューを提供するために、コンテキスト・メニューのポップアップでcontentDelivery="lazyUncached"
設定が使用される場合、メニューはあらかじめフェッチされます。状況により変化するコンテキスト・メニューの場合、これはメニュー定義内のEL式が、異なる選択や通貨の状況により、レンダリング時に繰り返しコールされることを意味します。あらかじめフェッチされたこれらのコンテキスト・メニューを使用する場合、アプリケーションでは次の事項を認識しておく必要があります。
コンテキスト・メニューの表示方法の定義に使用するEL式では、実行時間の長いコードまたは遅いコードは実行しないでください。これは、actionListener
など、メニュー項目が選択された後にコールされるaf:commandMenuItem
属性には当てはまりません。
今後、Flashの制限が解決された場合、ADFコンテキスト・メニューがFlashコンテキスト・メニューのかわりに表示されます。アップグレードの互換性を確保するには、メニューがあらかじめフェッチされている場合と、メニューの開始時にEL式が評価される場合の両方でEL式が機能するようにコードを作成する必要があります。アプリケーションが依存するコンポーネントの状態は、selection
とcurrency
のみです。
グラフでズームおよびスクロール・レベルが変更されたときに実行されるカスタム・コードを指定できます。マネージドBeanには、ZoomAndScrollEvent
またはScrollEvent
を入力として受け入れるメソッドを格納します。これらのイベントを使用すると、ユーザーはズームされる軸およびズームされた軸の現在の範囲を決定できます。
グラフでのズームとスクロールに対応するカスタム動作を指定する手順:
マネージドBeanに、ズームまたはスクロール・イベントがトリガーされたときの動作を実行するカスタム・メソッドを記述します。例24-16に、このメソッドを作成するコードを示します。
構造ウィンドウでdvt:<type>Graphノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、まだ有効にしていない場合は、メソッドで管理される軸のスクロールを構成します。
たとえば、例24-16のサンプル・コードを使用する場合は、dvt:o1Axisノードのスクロールを有効にします。スクロールの構成の詳細は、第24.6.6.2項「軸のスクロールの指定方法」を参照してください。
プロパティ・インスペクタで、「動作」セクションを開いて次のいずれかまたは両方を実行します。
「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)); }
特定のデータのセット内の1つのデータ・マーカーまたはグラフの凡例の対応するエントリの上にカーソルを移動すると、そのセットのすべてのデータ・マーカーが強調表示されるようにすることができます。マーカーには線、棒、面、散布マーカー、バブルおよび円グラフのスライスが含まれます。強調表示効果は、セットの他のデータ・マーカーを淡色表示することによって視覚的に実現します。たとえば、棒グラフに4つの製品(P1、P2、P3、P4)の月ごとの売上げを表示する場合、製品P2の1月にカーソルを移動すると、P2のすべての棒が強調表示され、P1、P3およびP4の棒は淡色表示されます。
グラフでは特定のデータのセットのすべてのデータ・マーカー(P2のすべての棒など)を系列として参照するため、系列内のデータ・マーカーを強調表示する機能は、グラフの系列ロールオーバー動作機能の一部です。
系列ロールオーバー動作は、棒グラフ、折れ線グラフ、面グラフ、円グラフ、散布図、極グラフ、レーダー・グラフおよびバブル・グラフでのみ使用できます。
系列内のすべてのデータ・マーカーを淡色表示する手順:
構造ウィンドウでdvt:<type>Graphノードを右クリックし、「プロパティに移動」を選択します。
「外観」属性カテゴリのSeriesRolloverBehavior
フィールドでドロップダウン・リストを使用して「RB_DIM」を選択します。
時間データを表示する相対的範囲と明示的範囲を定義できます。また、時間セレクタを追加して、ユーザーが時間軸上で時間範囲を選択できるようにすることもできます。
時間データを表示する単純な相対範囲(過去7日間など)を定義できます。これによって、新しいデータ・ポイントがアクティブ・データ・グラフの表示に追加され、古いデータがグラフの左端からはみ出ることになります。相対時間範囲の指定は、アクティブ・データ・グラフでの使用に限定されません。
時間データを表示する相対範囲を指定する手順:
構造ウィンドウでdvt:<type>Graphノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「外観」セクションを開いて、次の属性の値を指定します。
「TimeRangeMode」フィールドに、相対範囲を時間範囲の終わりに適用する(最後の7日間など)か、始めに適用する(最初の7日間など)かに応じて、値TRM_RELATIVE_LASTまたはTRM_RELATIVE_FIRSTを指定します。
「TimeRelativeRange」フィールドに、相対範囲をミリ秒で指定します。
たとえば、7日間の範囲を指定する場合は、日数(7
)に1日をミリ秒にした数(86400000
)を掛けた、604800000
となります。
時間データを表示する明示的範囲(3月15日から3月25日など)を定義できます。この例では、開始と終了の値に指定されていないため、年、時間、分および秒にはデフォルト値が使用されます。
時間データを表示する明示的範囲を指定する手順:
マネージドBeanに、時間範囲の開始日と終了日を返すメソッドを作成します。マネージドBeanの詳細は、2.6項「マネージドBeanの作成と使用」を参照してください。
構造ウィンドウでdvt:<type>Graphノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「外観」セクションを開いて、次の属性の値を指定します。
「TimeRangeMode」フィールドで、属性のドロップダウン・メニューから「TRM_EXPLICIT
」を選択します。
「TimeRangeStart」フィールドに、時間範囲の開始日を返すメソッドへの参照を指定します。
「TimeRangeEnd」フィールドに、時間範囲の終了日を返すメソッドへの参照を指定します。
時間軸を表示するように構成されているグラフには、時間セレクタを追加できます。時間セレクタを使用すると、ユーザーは時間軸でデータの範囲を選択できます。通常、時間セレクタは、ディテールが時間セレクタの日付範囲に基づいて表示される、マスター/ディテール・グラフで使用されます。
グラフに時間セレクタを追加するには、グラフにdvt:timeSelector
コンポーネントを追加し、マネージドBeanまたはバッキングBeanに範囲の開始日と終了日を返すためのメソッドを追加します。マスター/ディテール・グラフを構成する場合は、ユーザーが時間セレクタを移動したときにディテール・グラフを更新するためのリスナーを時間セレクタに追加します。
図24-16に、時間セレクタを使用するように構成されたマスター/ディテール・グラフの簡単な例を示します。ユーザーがマスター・グラフで時間セレクタを別の日付範囲に移動すると、棒グラフの表示が自動的に更新されます。
始める前に:
グラフの属性やグラフの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、第24.2項「グラフ・タグの理解」を参照してください。
次のタスクを完了する必要があります。
時間値に基づいて軸を表示するグラフをページに作成します。詳細は、第24.4.1項「ページへのグラフの追加方法」を参照してください。
面、棒、折れ線、組合せの各グラフおよび株価チャートには、列ラベルにオブジェクト・タイプがjava.util.Date
の日付が指定された場合に、時間軸が表示されます。時間セレクタを使用するには、日付を昇順でソートし、日、週、月などの一定の間隔を使用するようにします。
たとえば、図24-16の折れ線グラフでは、o1軸に販売日付を、系列に総売上げを使用しています。図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
として宣言されています。ユーザーがマスター・グラフで時間セレクタの範囲を変更すると、リスナーのコードによってディテール・グラフに新しい時間範囲が設定されます。
グラフに時間セレクタを追加するには:
構造ウィンドウでdvt:<type>Graphコンポーネントを右クリックし、「GraphTypeの中に挿入」→「ADFデータ視覚化」→「時間セレクタ」と選択します。
dvt:timeSelectorノードを右クリックして、「プロパティに移動」を選択します。
プロパティ・インスペクタで、次の属性の値を入力します。
「ExplicitStart」フィールドに、時間範囲の初期の開始日を返すメソッドへの参照を指定します。
たとえば、timeSelectorDemo
という名前のBeanと、例24-18で参照されているgetTimeAxisStartDate()
メソッドの場合は、初期日付に#{timeSelectorDemo.timeAxisStartDate}
と入力します。
「ExplicitEnd」フィールドに、時間範囲の初期の終了日を返すメソッドへの参照を指定します。
Mode属性のドロップダウン・メニューから「EXPLICIT」を選択して、時間セレクタの表示を有効にします。デフォルトでは、この属性はOFFに設定されています。
FillColor属性のドロップダウン・メニューから、時間セレクタの塗りつぶしの色を選択します。
デフォルトでは、色は6桁の16進数のRGB値として定義されます。時間セレクタが表示されると、タイム・セレクタの背後のデータは非表示になります。データを表示するには、色の値の前に2桁を追加して、時間セレクタの透明色を有効にします。たとえば、図24-16では、塗りつぶしの色は#88c6d6ffと定義されています。
時間セレクタが画面上に表示されるかどうかを決定する透明色をオプションで有効にするには、FillTransparentのドロップダウン・メニューから「TRUE」を選択します。
FillTransparentとBorderTransparentをTRUEに設定すると、時間セレクタは表示されなくなりますが、ユーザーが選択することはできます。
BorderColor属性のドロップダウン・メニューから、時間セレクタの枠線の色を選択します。
オプションで透明色を有効にするには、BorderTransparentのドロップダウン・メニューからTRUEを選択します。
オプションで、「TimeSelectorListener」フィールドに、時間セレクタのリスナーを返すメソッドへの参照を指定します。
たとえば、timeSelectorDemo
という名前のBeanと、例24-18で参照されているprocessTimeSelectorEvent
メソッドの場合は、時間セレクタのリスナーに#{timeSelectorDemo.processTimeSelectorEvent}
と入力します。
例24-19に、時間セレクタの例に対応するJSFページのコードを示します。
ディテール・グラフを作成した場合は、ディテール・グラフが明示的な時間範囲を使用するように更新し、時間セレクタが変更されると時間範囲が更新されるように構成します。
構造ウィンドウで、ディテール・グラフのノードを右クリックして、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「外観」セクションを開きます。
TimeRangeMode属性のドロップダウン・メニューから、「TRM_EXPLICIT」を選択します。
「TimeRangeStart」フィールドに、時間範囲の開始時間を返すメソッドへの参照を指定します。
たとえば、timeSelectorDemo
という名前のBeanと、例24-17で参照されているgetTimeAxisStartDate()
メソッドの場合は、初期日付に#{timeSelectorDemo.timeAxisStartDate}
と入力します。
「TimeRangeEnd」フィールドに、時間範囲の終了時間を返すメソッドへの参照を指定します。
プロパティ・インスペクタで「動作」セクションを展開します。
「PartialTriggers」フィールドにマスター・グラフのIDを入力して、ユーザーが時間セレクタの範囲を変更したときにディテール・グラフを更新できるようにします。
たとえば、図24-16の折れ線グラフのIDを参照する場合は、::lineGraph1と入力します。また、PartialTriggersのドロップダウン・メニューから「編集」を選択して、部分トリガーを選択することもできます。
アラートは、エラーや警告など、個別の記号で強調表示する必要のあるデータ・ポイントをグラフ上に定義します。アイコンはアラートの場所を示します。カーソルをアラート・アイコン上に移動すると、そのアラートのテキストが表示されます。アラートは、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>
注釈は、カーソルがデータ値上に移動するときに情報を提供するために、グラフ上のデータ値に関連付けられています。1つのグラフには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
- X軸とY軸の両方があるグラフのxValue
とyValue
により定義された正確な位置に注釈を配置します。他の注釈との重なりは避けられません。
percentage
- X軸とY軸の両方があるグラフの描画エリアの0から100のパーセンテージとしてxValue
とyValue
を使用して定義された正確な位置に注釈を配置します。他の注釈との重なりは避けられません。
xValue
- 注釈を配置するX値を指定します。この設定は、注釈のpositionがabsoluteまたはpercentageの場合にのみ適用されます。
yValue
- 注釈を配置するY値を指定します。この設定は、注釈のpositionがabsolute
またはpercentage
の場合にのみ適用されます。
horizontalAlignment
- 注釈の水平配置を指定します。この設定は、注釈のposition
属性がabsolute
またはpercentage
の場合にのみ適用されます。有効な値は、LEFT
(デフォルト)、CENTER
、LEADING
またはRIGHT
です。
verticalAlignment
- 注釈の垂直配置を指定します。この設定は、注釈のposition
属性がabsolute
またはpercentage
の場合にのみ適用されます。有効な値は、CENTER
(デフォルト)、TOP
またはBOTTOM
です。
グラフ・コンポーネントdvt:areaGraph
、dvt:bubbleGraph
、dvt:barGraph
、dvt:lineGraph
、dvt:comboGraph
、dvt:pieGraph
およびdvt:scatterGraph
では、グラフ・コンポーネントの最初の表示や、部分ページ・リフレッシュ(PPR)イベントのスライドショー遷移などのアニメーション効果をサポートします。アニメーション効果は、グラフのanimationOnDisplay
およびanimationOnDataChange
プロパティに次の値を指定します。
alphaFade
conveyorFromLeft
conveyorFromRight
cubeToLeft
cubeToRight
flipLeft
flipRight
slideToLeft
slideToRight
transitionToLeft
transitionToRight
zoom
アニメーション効果は、アクティブ・データを使用して実行することもできます。アクティブ・データ・サービス(ADS)では、ADFモデル・レイヤーを使用して、ADF Facesコンポーネントをアクティブ・データ・ソースにバインドできます。このためには、コンポーネントとバインディングを構成して、コンポーネントがソースで更新されたデータを表示できるようにする必要があります。あるいは、あらかじめ決められた間隔で変更のデータ・ソースをポーリングするようにアプリケーションを構成することもできます。
アクティブ・データ・サービスを使用するには、データが変更されたときにイベントを公開するデータ・ソースが必要であり、それらのイベントに反応するビジネス・サービスと、それらのサービスを表示するための関連のデータ・コントロールを作成する必要があります。ADSとアプリケーションの構成の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「アクティブ・データ・サービスの使用」の章を参照してください。
データ・バインドされたグラフを構成し、対応するページ定義ファイルでバインディング要素に値を設定することによってアクティブ・データを表示します。
アクティブ・データを表示するグラフを構成する手順:
構造ウィンドウでdvt:<type>Graphノードを右クリックし、「ページ定義に移動」を選択します。
プロパティ・インスペクタで、ChangeEventPolicy属性のドロップダウン・メニューから、「プッシュ」を選択します。
アニメーションを使用するグラフのプロパティ・インスペクタで、次の属性を設定します。
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色の指定に使用します。