| Oracle® Fusion Middleware Oracle Application Development FrameworkによるFusion Webアプリケーションの開発 12c (12.2.1) E70030-02 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development FrameworkによるFusion Webアプリケーションの開発 12c (12.2.1) E70030-02 |
|
|
前 |
次 |
面チャート、棒グラフ、バブル・チャート、ファンネル・チャート、横棒グラフ、折れ線グラフ、円グラフ、極チャート、レーダー・チャート、散布図、スパーク・チャートと、ダイアル、LED、評価およびステータス・メーターの各ゲージの使用方法について説明します。ここでは、ADFデータ・コントロールを使用して、これらのコンポーネントをデータ優先開発で作成する方法について説明します。
簡単なUI優先開発を使用してページを設計する場合は、チャートやゲージをページに追加してから、データ・バインディングを構成してください。チャートおよびゲージ・コンポーネントのデータ要件、タグ構造、および外観と動作のカスタマイズ・オプションの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のチャート・コンポーネントの使用方法およびゲージ・コンポーネントの使用方法に関する項を参照してください。
この章では、ADF DVT stockGraphレガシー・コンポーネントを使用して、グラフにデータを表示する方法についても説明します。ただし、このコンポーネントをクライアント側のグラフに使用することはお薦めしません。
この章の内容は次のとおりです。
ADFデータ視覚化コンポーネントは、ビジネス・データを視覚的に表示、分析するための幅広いグラフィック機能と表機能を提供します。コンポーネントをレンダリングできるようにするには、これらのコンポーネントをそれぞれ、データにバインドする必要があります。コンポーネントの外観は表示されるデータによって変わるからです。
チャート・コンポーネントとゲージ・コンポーネントの両方により、データがレンダリングされます。ただし、チャートでは、複数の軸上の複数のデータ・ポイントを様々な方法で評価できます。豊富な種類のチャートにより、あるグループの結果を別のグループの結果と比較することが容易になります。一方、ゲージでは、単一のデータ・ポイントを重視し、そのポイントを最小、最大およびしきい値インジケータと比較して問題を識別します。
接頭辞dvt:は、各データ視覚化コンポーネント名の先頭に付いて、そのコンポーネントがADFデータ視覚化ツール(DVT)のタグ・ライブラリに属することを示します。
データ視覚化のユースケースと例の詳細は、次を参照してください。
チャート・コンポーネント: 『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のチャート・コンポーネントのユースケースと例に関する項。
ゲージ・コンポーネント: 『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のゲージ・コンポーネントのユースケースと例に関する項。
魅力的な外観を備えたデータ視覚化コンポーネントを使用すると、エンド・ユーザーは複雑なビジネス・データを理解して分析できるようになります。このコンポーネントは機能が豊富で、そのまますぐに使用できる対話型のサポートも用意されています。エンド・ユーザーの詳細な説明と各コンポーネントのプレゼンテーション機能の詳細は、次を参照してください。
チャート・コンポーネント: 『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のチャートのエンド・ユーザー機能とプレゼンテーション機能に関する項。
ゲージ・コンポーネント: 『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のゲージ・コンポーネントのエンド・ユーザー機能とプレゼンテーション機能に関する項。
データ視覚化コンポーネントをデータ・バインドする前に、その他のOracle ADF機能について理解しておいてください。また、いったんデータ視覚化コンポーネントをページに追加すると、検証やアクセシビリティなどの機能を追加する必要があることに気付く場合があります。データ視覚化コンポーネントで使用されるその他の機能へのリンクは、次のとおりです。
部分ページ・レンダリング: データ視覚化コンポーネントをリフレッシュして、ページの別のコンポーネントで実行されたアクションに基づく新しいデータを表示できます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「部分ページ・コンテンツの再レンダリング」を参照してください。
パーソナライズ: ユーザーは実行時にデータ視覚化コンポーネントの表示を変更できますが、ユーザーがカスタマイズできるようにアプリケーションを構成していないかぎり、ユーザーがページを終了するとそれらの値は保持されません。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「JSFページでのユーザー・カスタマイズの許可」を参照してください。
アクセシビリティ: データ視覚化コンポーネントをアクセス可能にできます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「アクセス可能なADF Facesページの開発」を参照してください。
スキンおよびスタイル: アプリケーションに適用するADFスキンを使用するか、スタイル関連のプロパティ(styleClassまたはinlineStyle)を使用してCSSスタイル・プロパティを直接適用することで、データ視覚化コンポーネントの外観をカスタマイズできます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
プレースホルダ・データ・コントロール: 最終的にページのデータ視覚化コンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールの使用を検討します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、「プレースホルダ・データ・コントロールによるページの設計」を参照してください。
チャートはデータ・コレクションに基づいています。データバインドされたチャートを作成するには、「データ・コントロール」パネルから「JSF」ページにコレクションをドラッグ・アンド・ドロップして、チャートにデータ・コレクション属性をバインドします。
チャートには、データの系列とグループが表示されます。系列とグループは、データのグリッドの行と列にたとえることができます。通常、グリッドの行はチャートの系列として表示され、グリッドの列はグループとして表示されます。
大半のチャートでは、系列は同じ色のマーカーのセットとして表示されます。通常、チャートの凡例に、各系列の識別子と対応する色が表示されます。たとえば、棒グラフで黄色の棒が靴の売上げを示し、緑色の棒がブーツの売上げを示す、などです。
グループの表示は、チャート・タイプによって異なります。たとえば、積上げ棒グラフでは、各積層がグループです。グループは年などの期間を表す場合もあります。グループが地域などの地理上の場所を表す場合もあります。
チャート・タイプのデータ要件に応じて、1つのグループに複数のデータ値が必要な場合があります。たとえば、散布図では、データ・マーカーごとに2つの値が必要です。1つ目の値はX軸上のマーカーの位置を決め、2つ目の値はY軸上のマーカーの位置を決めます。チャート・データ要件の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のチャート・コンポーネント・データ要件に関する項を参照してください。
データ・コレクション内の属性には、データ値またはデータ値のカテゴリを指定できます。データ値は、棒の高さなどのマーカーまたは散布図のポイントで示される数字です。データ値のカテゴリは、軸のラベルとして示されるメンバーになるか、ツールチップの追加プロパティとして表示されます。バインディング内で属性が担うロール(データ値またはID)は、データ型およびマップされる場所(棒やX軸など)の両方によって決まります。
「データ・コントロール」パネルから挿入されたデータ・コレクションを使用してチャートを作成する場合は、コンポーネント・ギャラリを使用すると、多数のチャート・カテゴリ、チャート・タイプおよびレイアウト・オプションから選択できます。チャート・カテゴリは、1つ以上の異なるタイプのチャートを1つのグループにまとめたものです。たとえば、「面」カテゴリには次のタイプのチャートが含まれます。
領域
積上げ面
チャートの作成時に表示されるコンポーネント・ギャラリを見てまわり、使用可能なチャート・カテゴリ、タイプおよびそれぞれの説明を確認してください。図38-1 に、「データ・コントロール」パネルを使用しているときにADFチャート用に表示される、「コンポーネント・ギャラリ」を示します。
図38-1 チャートのコンポーネント・ギャラリ
注意:
stockコンポーネントは、クライアント側チャート・コンポーネントを優先するため使用が推奨されないレガシー・サーバー側グラフです。データバインドされたレガシー・グラフの作成の詳細は、「データバインドされたグラフの作成」を参照してください。
表38-2 に、チャートのコンポーネント・ギャラリに表示されるカテゴリを示します。各カテゴリには、1つ以上のチャート・タイプが関連付けられています。
表38-1 コンポーネント・ギャラリのADFチャート・カテゴリ
| イメージ | カテゴリ | 説明 |
|---|---|---|
 |
領域 |
データが塗りつぶされた面として表されるチャートを作成します。面チャートを使用して、過去12か月の売上げなど、ある期間の傾向を示します。面チャートでは、1つの軸上に最低2グループのデータが必要です。通常、この軸には期間(月など)のラベルが付けられます。 |
 |
棒 |
データが一連の垂直な棒として表されるチャートを作成します。製品またはカテゴリ間で値を比較するため、または期間別に分類された集計データを表示するために使用します。 |
 |
棒(横) |
Y軸に沿って棒を横向きに表示するチャートを作成します。方向を示して傾向の表示や値の比較を可能にするために使用します。 |
 |
バブル |
データが丸いデータ・マーカー(バブル)の場所と大きさによって表されるチャートを作成します。3タイプの値の相関を示すために使用します(特に、多数のデータ・アイテムがあり、全般的な関係を確認する場合)。たとえば、バブル・チャートを使用して、従業員の給与(X軸)、経験年数(Y軸)と生産性(バブルのサイズ)をプロットします。このようなチャートでは、生産性を給与および経験と比較して調べることができます。 |
 |
組合せ |
異なるタイプのデータ・マーカー(棒、線または面)を使用して、異なる種類のデータ・アイテムを表示するチャートを作成します。棒と線、棒と面、線と面またはこの3つすべてを比較するために使用します。 |
 |
ファンネル |
プロセス内の手順に関連するデータを表すチャートを作成します。実際値とターゲット値を比較したり、一連の手順内の値を比較したりするために使用します。たとえば、ファンネル・チャートを使用して、ファンネルの異なるセクションが販売周期の異なる段階を表すプロセスを表示します。 |
 |
線 |
データが線、一連のデータ・ポイントまたは線で結ばれた複数のデータ・ポイントとして表されるチャートを作成します。折れ線グラフには、グループ内のメンバーごとに最低2つのポイントを表すデータが必要です。たとえば、月単位の折れ線グラフでは、少なくとも2つの月のデータが必要です。通常、特定の色の線がデータの各系列(アメリカ、ヨーロッパ、アジアなど)に関連付けられます。複数のアイテムを同じ期間で比較するために使用します。 |
 |
円 |
データ・アイテムのセットを合計に対する比率として表すチャートを作成します。データ・アイテムが円のセクションとして表示され、円が切り分けられたパイのように見えます。それぞれの商品群から得られる収益など、各区分と全体との関係を示すために使用します。 |
 |
散布図 |
データがデータ・マーカーの場所によって表されるチャートを作成します。人気商品の売上とコストなど、2つの異なる種類のデータ値の相関を示すために使用します。散布図は、多数の項目間の全体的な関連性を示す場合に特に有用です。 |
 |
スパーク |
表の列に、またはテキストともにインラインでトレンドまたはバリエーションを表したシンプルな要約チャートを作成します。 |
また、「コンポーネント」ウィンドウからチャート・コンポーネントをドラッグして、チャートを作成することもできます。この方法では、コンポーネントをデータにバインドする前に、チャートのユーザー・インタフェースを設計できます。「チャートの作成」ダイアログが表示され、チャート・タイプ、説明および簡単なレイアウト・オプションが表示されます。UI優先開発を使用したチャートの作成方法の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のチャート・コンポーネントの使用に関する項を参照してください。
面チャート、棒グラフ、横棒グラフおよび折れ線グラフでは、1つ以上の系列があるデータのグループが少なくとも2つ必要です。グループは、面チャート、棒グラフおよび折れ線グラフの場合はチャートのX軸に沿って表示され、横棒グラフの場合はチャートのY軸に沿って表示されます。系列は、チャートに面、棒または折れ線として表示されます。
図38-2 に、Summit ADFサンプル・アプリケーションの2つの棒グラフを示します。左側の棒グラフは、顧客の注文履歴と注文の平均を示すように構成されており、右側の棒グラフは各注文の出荷日を示します。これらの例では、棒グラフは注文日と出荷日を表すグループで構成され、系列は注文の合計と出荷日の平均です。注文の平均は、Order Historyチャートに赤い参照線として表示されます。
図38-2 Summit ADFサンプル・アプリケーションの棒グラフ
チャートの作成後のチャートへの参照線の追加の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のチャートへの参照オブジェクトの追加に関する項を参照してください。
始める前に:
データバインドされたデータ視覚化チャートについて理解しておいてください。詳細は、「データバインドされたチャートの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
「アプリケーション・モジュールの作成と変更」の説明に従って、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
たとえば、Summit ADFのShipping Time棒グラフは、OrdersForCustomerデータ・コレクションに基づいています。図38-3 に、「データ・コントロール」パネル内のOrdersForCustomerコレクションを示します。
図38-3 注文出荷期間のデータ・コレクション
OrdersForCustomerデータ・コントロールは、OrdVOビュー・オブジェクトに基づいています。図38-4 に、OrdEO、EmpEOおよびCustomerEOエンティティ・オブジェクトからの属性を含むOrdVOビュー・オブジェクトを示します。OrdEO、EmpEOおよびCustomerEOエンティティ・オブジェクトは、SummitスキーマのSOrd、SEmpおよびSCustomer表から導出されます。
図38-4 Summit ADFサンプル・アプリケーションOrdVOビュー・オブジェクト
OrdVOオブジェクトには、Summit ADFのShipping Time棒グラフの棒で表されるTimeToShip一時属性も含まれます。TimeToShip属性の値は、calculateTimeToShip()メソッドのコールによって取得されます(adf.object.calculateTimeToShip(DateOrdered, DateShipped))。calculateTimeToShip()メソッドは、注文の出荷に要した日数を判断し、OrdVORowImpl.javaに追加されます。OrdVORowImpl.javaには、OrdVOビュー・オブジェクトの実装メソッドが含まれます。
次の例は、Summit ADFサンプル・アプリケーションのcalculateTimeToShip()メソッドを示しています。メソッドは、日数をoracle.jbo.domain.Numberとして返します。これはチャートのvalue属性に必要な型です。
public oracle.jbo.domain.Number calculateTimeToShip(Date ordered, Date shipped) {
if (null != shipped) {
long days = (shipped.getTime() - ordered.getTime()) / (1000 * 60 * 60 * 24);
return new Number(days);
} else
return new Number(0);
}
ビュー・オブジェクトへの一時属性の追加の詳細は、「ビュー・オブジェクトへの計算属性および一時属性の追加」を参照してください。
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従い、JSFページを作成します。
データバインドされた面チャート、棒グラフ、複合チャート、横棒グラフまたは折れ線グラフを作成する手順:
実行時に属性の値をどこに表示するかに応じて、「使用可能」リストから入力フィールドに属性をドラッグします。
たとえば、X軸に沿って注文日を表示するように、Summit ADFサンプル・アプリケーションの棒グラフを構成する場合は、「使用可能」リストからDateOrdered属性をドラッグして、「棒グラフの作成」ダイアログの「X軸」フィールドにドロップします。出荷の時間を棒グラフとして表示するようにチャートを構成するには、「使用可能」リストからTimeToShip属性をドラッグして、「棒グラフの作成」ダイアログの「棒」フィールドにドロップします。
二重Y軸を含むチャート・タイプを選択した場合、追加する2番目の面、棒または折れ線は、2番目のY軸にレンダリングされます。また、chartSeriesStyleコンポーネントは、2番目のY軸に表される系列のチャートに追加され、chartSeriesStyleコンポーネントのassignedToY2属性がtrueに設定されます。
複合チャートを選択した場合、「データ・ポイント」入力フィールドに追加する各属性は、面チャート、棒グラフまたは折れ線グラフとしてレンダリングされます。デフォルトでは、最初の属性は棒グラフとしてレンダリングされ、2番目の属性は折れ線グラフとしてレンダリングされ、3番目の属性は面チャートとしてレンダリングされます。チャート・タイプを変更するには、chartSeriesStyleコンポーネントを複合チャートのseriesStampファセットに追加します。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のチャートの系列のカスタマイズ方法に関する項を参照してください。
「属性ラベル」表で、デフォルト値を受け入れるか、「ラベル」フィールドのドロップダウン・リストから値を選択して、実行時に表示されるラベルを指定します。
基になるデータ型に応じて、「ラベル」フィールドで選択可能な項目が決まります。この選択に応じて、属性のラベルをチャートにレンダリングする方法が決まります。詳細は、「属性ラベルの使用に関する必知事項」を参照してください。
図38-5に示す「棒グラフの作成」ダイアログは、OrdersForCustomerデータ・コレクションのDateOrdered属性とTimeToShip属性のデータを使用して、Summit ADFサンプル・アプリケーションのShipping Time棒グラフを生成します。
図38-5 Summit ADFのShipping Timeチャートの「棒グラフの作成」ダイアログ
データ・バインディング・ダイアログに必要事項を入力した後で、「プロパティ」ウィンドウを使用してチャート属性の設定を指定できます。また、チャート・タグに関連付けられた子タグを使用してチャートをさらにカスタマイズできます。たとえば、凡例の表示は、Summit ADFサンプル・アプリケーションのShipping Timeチャートに対してオフになっています。チャート・コンポーネントの構成の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のチャート・コンポーネントの使用に関する項を参照してください。
チャートを「データ・コントロール」パネルからドロップすると、次の処理が行われます。
チャートのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
UIコンポーネントに必要なコードをJSFページに追加します。
JDeveloperが生成するデータ・バインディングXMLは、作成する特定のチャート・タイプの物理モデルを表します。次の例は、ページ定義ファイルにJDeveloperが生成したバインディングを示しています。この例では、OrdersForCustomerデータ・コレクションのDateOrdered属性とTimeToShip属性のデータを使用して縦棒グラフが作成されています。
<tree IterBinding="OrdersForCustomerIterator" id="OrdersForCustomer5"
ChangeEventPolicy="ppr">
<nodeDefinition DefName="oracle.summit.model.views.OrdVO"
Name="OrdersForCustomer5">
<AttrNames>
<Item Value="TimeToShip"/>
<Item Value="DateOrdered"/>
</AttrNames>
</nodeDefinition>
</tree>
チャートでは、例に示す標準のツリー・バインディングが使用されます。ノード定義は、データ・コントロール(OrdersForCustomer5)の名前とインスタンス、およびデータ・コントロールのベースになっているビュー・オブジェクト(OrdVO)を示します。表示される各属性がAttrNames定義にリストされます。二重Y軸に対して構成されるチャートの場合、AttrNames定義には、2番目のY軸に表示される系列の追加アイテムが含まれます。
次の例は、OrdersForCustomerデータ・コレクションをJSFページにドラッグしたときに縦棒グラフ用に生成され、X軸にDateOrderedを、棒にTimeToShipを指定するコードを示しています。
<dvt:barChart id="barChart2" var="row"
value="#{bindings.OrdersForCustomer5.collectionModel}"> <dvt:chartLegend id="cl2"/>
<f:facet name="dataStamp">
<dvt:chartDataItem id="di2" value="#{row.TimeToShip}"
group="#{row.DateOrdered}"
series="#{bindings.OrdersForCustomer5.hints.TimeToShip.label}"/>
</f:facet>
</dvt:barChart>
ファンネル・チャートは、プロセス内の手順を表すために使用されます。「データ・コントロール」パネルを使用して、ファンネル・チャートを作成できます。
ファンネル・チャートでは、2つ以上、最大で3つの値が必要になります。値は、各ステージのデータの実際値とターゲット値、およびステージ値を表します。
図38-6に、サンプル・ファンネル・チャートを示します。このファンネルは、オンライン・ストアの販売へのコンバージョンのプロセスにおける、様々なステージを示しています。各ファンネル・セクションは、プロセス内の特定のステージに到達した顧客の数と、そのステージで目標とする顧客の数を示しています。ユーザーが各セクションの上に移動すると、ツールチップに、そのステージの実際値およびターゲット値の数量が示されます。
図38-6 サンプル・ファンネル・チャート
始める前に:
データバインドされたデータ視覚化チャートについて理解しておいてください。詳細は、「データバインドされたチャートの作成」を参照してください。
次のタスクを完了する必要があります。
「アプリケーション・モジュールの作成と変更」の説明に従って、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSF JSPページの作成方法に関する項の説明に従い、JSFページを作成します。
データバインドされたファンネル・チャートを作成する手順:
たとえば、前に示したファンネル・チャートは、SalesConversionFunnelコレクションを使用して作成されています。図38-7に、「データ・コントロール」パネル内のSalesConversionFunnelコレクションを示します。
図38-7 SalesConversionFunnelコレクションのデータ・コレクション
「実際値」と「ターゲット値」フィールドのドロップダウン・メニューから、データの系列を表す属性を選択します。
たとえば、サンプルのファンネル・チャートを構成するには、「実際値」フィールドのドロップダウン・メニューからNumOfVisitors属性を選択し、「ターゲット値」フィールドのドロップダウン・メニューからTargetVisitors属性を選択します。
「ファンネル・セクション」フィールドのドロップダウン・メニューから、データのグループを表す属性を選択します。
たとえば、サンプルのファンネル・チャートを構成するには、「ファンネル・セクション」フィールドのドロップダウン・メニューからStage属性を選択します。
図38-8に、SalesConversionFunnelコレクションのNumberOfVisitors、TargetVisitors、Stageの各属性を使用してファンネル・チャートを生成する「ファンネル・チャートの作成」ダイアログを示します。
図38-8 SalesConversionFunnelの「ファンネル・チャートの作成」
次の例は、JSFページにSalesConversionFunnelデータ・コレクションをドラッグし、「実際値」属性にNumOfVisitors、「ターゲット値」属性にTargetVisitors、「ファンネル・セクション」にStageを指定したときにファンネル・チャート用に生成されるコードを示しています。
<dvt:funnelChart id="funnelChart1" var="row"
value="#{bindings.SalesConversionFunnel.collectionModel}">
<dvt:funnelDataItem id="di1" value="#{row.NumberOfVisitors}"
targetValue="#{row.TargetVisitors}"
label="#{row.Stage}"/>
</dvt:funnelChart>
データ・バインディング・ダイアログに必要事項を入力した後で、プロパティ・インスペクタを使用してチャート属性の設定を指定できます。また、チャート・タグに関連付けられた子タグを使用してチャートをさらにカスタマイズできます。チャート・コンポーネントの構成の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のチャート・コンポーネントの使用に関する項を参照してください。
円グラフには1つのデータ・グループが表示され、個別の系列を各区分で表します。このチャート・タイプには、複数の行(区分ごとに1つの行)を持つ1つの列が必要になります。「データ・コントロール」パネルを使用して、円グラフを作成できます。
図38-9 に、Summit ADFサンプル・アプリケーションの円グラフを示します。このグラフは、各蓄積場所おける受注品目の在庫を、その品目の合計在庫の割合として表示します。ユーザーが各区分の上にマウス・ポインタを移動すると、その場所での実際の数量を示すツールチップが表示されます。この例のデータ列は、受注品目の合計在庫を表し、それぞれの区分は各備蓄場所でのインベントリ・レベルを表しています。
図38-9 各備蓄場所でのインベントリ・レベルを示す円グラフ
始める前に:
データバインドされたデータ視覚化チャートについて理解しておいてください。詳細は、「データバインドされたチャートの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
「アプリケーション・モジュールの作成と変更」の説明に従って、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従い、JSFページを作成します。
データバインドされた円グラフを作成する手順:
たとえば、Summit ADFサンプル・アプリケーションの「Summit Customer Management」ページに、各備蓄場所でのインベントリ・レベルを表示する円グラフを作成する場合は、「BackOfficeAppModuleDataControl」→「Customers」→「OrdersForCustomer」→「ItemsForOrder」→「InventoryForOrderItem」コレクションの順に選択します。図38-10 に、「データ・コントロール」パネルのInventoryForOrderItemコレクションを示します。
図38-10 InventoryForOrderItemコレクションのデータ・コレクション
「円」フィールドのドロップダウン・メニューから、データの列に表示する属性を選択します。
たとえば、インベントリ・レベルを表示するようにSummit ADFサンプル・アプリケーションの円グラフを構成する場合は、「円」フィールドのドロップダウン・メニューからAmountInStock属性を選択します。
実行時に属性の値をどこに表示するかに応じて、「使用可能」リストから「区分」フィールドに属性をドラッグします。
たとえば、受注品目の各備蓄場所におけるインベントリ・レベルを表示するように、Summit ADFサンプル・アプリケーションの円グラフを構成する場合は、「円グラフの作成」ダイアログで、「使用可能」リストからCity属性をドラッグして「区分」フィールドにドロップします。
「属性ラベル」表で、デフォルト値を受け入れるか、「ラベル」フィールドのドロップダウン・リストから値を選択して、実行時に表示されるラベルを指定します。
基になるデータ型に応じて、「ラベル」フィールドで選択可能な項目が決まります。この選択に応じて、属性のラベルをチャートにレンダリングする方法が決まります。詳細は、「属性ラベルの使用に関する必知事項」を参照してください。
図38-11 に示す「円グラフの作成」ダイアログでは、InventoryForOrderItemコレクションのAmountInStock属性とCity属性を使用して円グラフを生成します。
図38-11 InventoryForOrderItemの「円グラフの作成」
データ・バインディング・ダイアログに必要事項を入力した後で、「プロパティ」ウィンドウを使用してチャート属性の設定を指定できます。また、チャート・タグに関連付けられた子タグを使用してチャートをさらにカスタマイズできます。たとえば、円の1つの区分が他の区分から分離されるように、切り離された円の区分を構成できます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のチャート・コンポーネントの使用に関する項を参照してください。
スパーク・チャートは、表の列に、またはテキストともにインラインでトレンドまたはバリエーションを表したシンプルな要約チャートです。スパーク・チャートを作成するには、「データ・コントロール・パネル」からデータ・コントロールを挿入します。
図38-12 に、「データ・コントロール」パネルからページ上にスパーク・チャートをドラッグしたときに表示される「コンポーネント・ギャラリ」を示します。
図38-12 スパーク・チャートの作成のコンポーネント・ギャラリ
バインディング・ダイアログで、選択したスパーク・チャート・タイプで表示する値を指定するように求められます。折れ線スパーク・チャート、棒スパーク・チャートおよび面スパーク・チャートには、変動する株価などの単一系列のデータ値が必要です。フローティング棒スパーク・チャートには、データ値の系列がフローティング・オフセットに1つ、棒の値のために1つの、合計2つ必要です。たとえば、フローティング積上げ棒スパーク・チャートの作成ダイアログでは、次のように指定します。
「棒の高さ」: 棒の値に使用するデータ値を選択するには、これを使用します。
「棒のフロート」: フロート・オフセット、つまり軸とフローティング棒との間の距離に使用するデータ値を選択するには、これを使用します。
図38-13 に、設定済のフローティング積上げ棒スパーク・チャートの作成ダイアログを示します。
図38-13 「スパークチャート・バインディング」ダイアログ
簡単なUI優先開発のシナリオでは、「コンポーネント」ウィンドウを使用してスパーク・チャートを挿入してから、そのチャートをデータにバインドします。スパーク・チャートへのデータの提供の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のスパーク・チャートへのデータの追加方法に関する項を参照してください。
バブル・チャートと散布図は、データ・マーカーの位置でデータを表します。バブル・チャートは、マーカーのサイズを使用してデータの追加の側面も表します。
散布図には、マーカーごとに少なくとも2つのデータ値が必要です。バブル・チャートには、マーカー・サイズごとに追加のデータ値が必要です。各データ・マーカーは次の値を表します。
マーカーのX軸上の位置を決めるX値。
マーカーのY軸上の位置を決めるY値。
バブル・チャートのマーカーのサイズを決めるZ値
複数のデータ・グループの場合、データは、散布図の場合には2の倍数、バブル・チャートの場合には3の倍数である必要があります。
図38-14 に、Summit組織の販売員の給与とコミッションを表示する散布図とバブル・チャートを示します。この例では、X値はコミッションによって決まり、Y値は給与によって決まります。バブル・チャートは、Z値に販売員の売上合計を使用するように構成されています。この例では、Mageeは給与とコミッションが最低ですが、売上合計が最高の販売員です。
図38-14 データバインドされた散布図およびバブル・チャートの例
始める前に:
データバインドされたデータ視覚化チャートについて理解しておいてください。詳細は、「データバインドされたチャートの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
「アプリケーション・モジュールの作成と変更」の説明に従って、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
たとえば、図38-14 のバブル・チャートと散布図は、Summit ADF DVTサンプル・アプリケーションのSEmpエンティティに基づく最上位レベル・ビュー・オブジェクトを使用しています。この例では、Summit ADF従業員データベースに含まれるすべての販売責任者をビュー・オブジェクトで取得するために、TITLE_IDが2である従業員レコードをすべて取得しています。図38-15 に、SalesRepViewObjビュー・オブジェクトを示します。
図38-15 Summit DVTサンプル・アプリケーションのSalesRepViewObjビュー・オブジェクト
図38-24 に、SalesRepViewObj3データ・コントロールを示します。
図38-16 Summit DVTサンプル・アプリケーションのSalesRepViewObj3データ・コントロール
TotalSales属性は、SOrdViewビュー・オブジェクトのTotal属性から販売員の売上合計を計算する一時属性です(SOrdView.sum ('Total'))。ビュー・オブジェクトへの一時属性の詳細は、「ビュー・オブジェクトへの計算属性および一時属性の追加」を参照してください。
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従い、JSFページを作成します。
データバインドされたバブル・チャートまたは散布図を作成する手順:
色/形状の組合せにシステムで生成された値を使用するには、「自動」を選択します。色と形状の決定に個別の属性を使用するには「手動」を選択します。
「手動」を選択した場合は、「マーカーの色」および「マーカーの形状」のドロップダウン・リストで属性を選択します。
たとえば、図38-14に表示されている散布図の「マーカーの色」と「マーカーの形状」にLastNameとFirstName を使用することを選択できます。散布図がレンダリングされるときに、凡例には図38-17 に示すように色と形状の両方のエントリが含まれます。散布図のツールチップには、マーカー属性と形状属性の両方に関連付けられた値が表示されます。
図38-17 色と形状が手動で構成された散布図
「マーカー・タイプ」フィールドのドロップダウン・リストで、散布図の凡例に表示される値を決定する、データ・コレクション内の1つ以上の属性を指定します。散布図の凡例では、各属性が固有の色/形状の組合せで表現されます。「使用可能」リストから属性をドラッグ・アンド・ドロップするか、「追加」ドロップダウン・リストから選択できます。
入力フィールドで属性を指定した後、任意の属性を右クリックして、「右に移動」、「左に移動」、「削除」、「テキストとして処理」などのアクションに対応するポップアップ・メニューを表示できます。
「マーカー・ツールチップ」フィールドのドロップダウン・リストから、散布図のツールチップに使用する属性を選択します。
図38-18に、SalesRepViewObj3データ・コレクションのCommissionPct、SalaryおよびTotal Sales各属性のデータを使用してバブル・チャートを生成する「バブル・チャートの作成」ダイアログを示します。
図38-18 「バブル・チャートの作成」ダイアログ
「散布図の作成」ダイアログのエントリも同様ですが、バブル・サイズの選択は不要です。図38-19 に、SalesRepViewObj3データ・コレクションのCommissionPctおよびSalary属性のデータを使用して散布図を生成する「散布図の作成」ダイアログを示します。
図38-19 「散布図の作成」ダイアログ
次の例は、SalesRepViewObj3データ・コレクションをJSFページにドラッグしたときにバブル・チャートと散布図用に生成され、「X軸データ・ポイント」にCommissionPct、「Y軸データ・ポイント」にSalary、バブル・チャートのZ軸データ・ポイントにTotalSalesを指定するコードを示しています。
<dvt:scatterChart id="scatterChart1" var="row"
value="#{bindings.SalesRepViewObj3.collectionModel}">
<dvt:chartLegend rendered="true" id="cl1">
<dvt:legendSection source="ag1" id="ls1"/>
</dvt:chartLegend>
<f:facet name="dataStamp">
<dvt:chartDataItem id="di1" group="#{row.LastName}" x="#{row.CommissionPct}"
y="#{row.Salary}">
<dvt:attributeGroups id="ag1" value="#{row.LastName}" type="color shape"/>
</dvt:chartDataItem>
</f:facet>
</dvt:scatterChart>
...
<dvt:bubbleChart id="bubbleChart1" var="row"
value="#{bindings.SalesRepViewObj3.collectionModel}">
<dvt:chartLegend rendered="true" id="cl1">
<dvt:legendSection source="ag1" id="ls1"/>
</dvt:chartLegend>
<f:facet name="dataStamp">
<dvt:chartDataItem id="di1" group="#{row.LastName}" x="#{row.CommissionPct}"
y="#{row.Salary}" z="#{row.TotalSales}">
<dvt:attributeGroups id="ag1" value="#{row.LastName}" type="color"/>
</dvt:chartDataItem>
</f:facet>
</dvt:bubbleChart>
マーカーおよび形状にデータ・コレクションの属性を使用して散布図を手動で構成することを選択した場合、JDeveloperは追加のdvt:legendSectionおよびdvt:attributeGroupsタグをJSFページに追加します。次の例は、変更されたエントリが太字でハイライトされた改訂コードを示しています。
<dvt:scatterChart id="scatterChart1" var="row"
value="#{bindings.SalesRepViewObj3.collectionModel}">
<dvt:chartLegend rendered="true" id="cl1">
<dvt:legendSection source="ag1" id="ls1"/>
<dvt:legendSection source="ag2" id="ls2"/>
</dvt:chartLegend>
<f:facet name="dataStamp">
<dvt:chartDataItem id="di1" group="#{row.LastName} #{row.FirstName}"
x="#{row.CommissionPct}"
y="#{row.Salary}">
<dvt:attributeGroups id="ag1" value="#{row.LastName}" type="color"/>
<dvt:attributeGroups id="ag2" value="#{row.FirstName}" type="shape"/>
</dvt:chartDataItem>
</f:facet>
</dvt:scatterChart>
データ・バインディング・ダイアログに必要事項を入力した後で、「プロパティ」ウィンドウを使用してチャート属性の設定を指定できます。また、チャート・タグに関連付けられた子タグを使用してチャートをさらにカスタマイズできます。たとえば、チャートの凡例を表示する場所を指定できます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のチャート・コンポーネントの使用に関する項を参照してください。
極チャートおよびレーダー・チャートは、折れ線グラフ、棒グラフ、面チャート、バブル・チャートおよび散布図のバリエーションです。「データ・コントロール」パネルを使用して、極チャートまたはレーダー・チャートを作成できます。
極チャートおよびレーダー・チャートの要件は、使用するチャートのタイプによって異なります。レーダー折れ線チャート、レーダー面チャートおよび極棒グラフでは、1つ以上の系列を持つ2つ以上データのグループが必要となります。極散布図では位置を示すために2つ以上のデータ値が必要となり、極バブル・チャートでは3つの値、つまり、位置用の2つとバブル・サイズ用の1つが必要となります。
図38-20に示すサンプルの極線グラフは、製品のIDおよび名前に対応する、様々な製品の使用可能なインベントリ・レベルを示すように構成されています。
図38-20 サンプルの極棒グラフ
始める前に:
データバインドされたデータ視覚化チャートについて理解しておいてください。詳細は、「データバインドされたチャートの作成」を参照してください。
次のタスクを完了する必要があります。
「アプリケーション・モジュールの作成と変更」の説明に従って、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
たとえば、サンプルの極棒グラフはInventoryデータ・コレクションに基づいています。図38-21に、「データ・コントロール」パネルでのInventoryコレクションを示します。
図38-21 Inventoryのデータ・コレクション
Inventoryデータ・コレクションは、InventoryVOビュー・オブジェクトに基づいています。図38-22に、InventoryVOビュー・オブジェクトを示します。
図38-22 Summitサンプル・アプリケーションのInventoryVOビュー・オブジェクト
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSF JSPページの作成方法に関する項の説明に従い、JSFページを作成します。
データバインドされたレーダー・チャートまたは極チャートを作成する手順は次のとおりです。
図38-23に、Inventoryデータ・コレクションのAmountInStock、ProductIdおよびName属性のデータを使用して極線グラフを生成するレーダー・チャートの作成ダイアログを示します。
図38-23 レーダー・チャートの作成ダイアログ
次の例は、Inventoryデータ・コレクションをJSFページにドラッグし、「Y軸データ・ポイント」のAmountInStockおよび「Y軸データ・ポイント」のProductIdとName名前を指定すると、バブル・チャートおよび散布図用に生成されるコードを示しています。レーダー・チャートおよび極チャートは個別にタグを持つのではなく、coordinateSystem属性がpolarに設定された基本的なチャートであることに注意してください。
<dvt:lineChart coordinateSystem="polar" polarGridShape="polygon" id="lineChart1" var="row" value="#{bindings.Inventory.collectionModel}">
<f:facet name="dataStamp">
<dvt:chartDataItem id="di1" series="#{bindings.Inventory.hints.AmountInStock.label}" value="#{row.AmountInStock}" group="#{row.ProductId} #{row.Name}"/>
</f:facet>
</dvt:lineChart>
データ・バインディング・ダイアログに必要事項を入力した後で、プロパティ・インスペクタを使用してチャート属性の設定を指定できます。また、チャート・タグに関連付けられた子タグを使用してチャートをさらにカスタマイズできます。チャート・コンポーネントの構成の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のチャート・コンポーネントの使用に関する項を参照してください。
「チャートの作成」ダイアログで属性のラベルを構成するときに、「ラベル」フィールドで選択できる項目は基になるデータ型によって決まります。この選択に応じて、属性のラベルをチャートにレンダリングする方法が決まります。
属性がデータ値を表している場合、「ラベル」フィールドの選択肢は次のようになります。
「属性名の使用」: 基になるViewObjectに含まれる該当の属性のUIHintsから取得したラベルを使用して値を文字列としてレンダリングする場合に選択します。これはデフォルト選択です。
「ラベルなし」: ラベルをレンダリングしない場合は、これを選択します。メトリックが1つで、結果として表示されたチャートを説明する独自の説明テキストをページに表示する場合に、この選択肢は役に立ちます。
「テキスト・リソースの選択」: 「テキスト・リソースの選択」ダイアログを開いて、ラベルに使用するテキスト・リソースを選択または追加するには、これを選択します。テキスト・リソースは、アプリケーション・リソース・バンドルからの翻訳可能な文字列です。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
「式ビルダー」: 「式ビルダー」ダイアログを開いて、実行時に該当のラベルについて実行する式を作成するには、これを選択します。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
属性がデータ値のカテゴリを表す場合は、次の選択肢があります。
「属性値の使用」: カテゴリ・ラベルとして属性値をレンダリングする場合に選択します。これはデフォルト選択です。
ドロップダウン・リストで、ラベルの代替の属性を選択します。たとえば、従業員IDのかわりに従業員名をラベルに使用します。
stockグラフは、クライアント側チャートを優先するため使用が推奨されないレガシー・サーバー側コンポーネントです。「データ・コントロール」パネルから挿入されたデータ・コレクションを使用してチャートを作成する場合は、コンポーネント・ギャラリを使用すると、多数のチャート・カテゴリ、チャート・タイプおよびレイアウトから選択できます。
チャートの作成時に表示されるコンポーネント・ギャラリを見てまわり、使用可能なチャート・カテゴリ、タイプおよびそれぞれの説明を確認してください。図38-24 に、「データ・コントロール」パネルを使用しているときにADFチャート用に表示される、「コンポーネント・ギャラリ」を示します。
図38-24 「データ・コントロール」パネルからのADFグラフのコンポーネント・ギャラリ
注意:
面チャート、棒グラフ、棒グラフ(横棒)、複合チャート、ファンネル・グラフ、折れ線グラフ、極/レーダー・チャート、円グラフおよび散布図はクライアント側コンポーネントで、その使用はレガシー・グラフ・コンポーネントより優先されます。データバインドされたチャートの作成の詳細は、「データバインドされたチャートの作成」を参照してください。
また、「コンポーネント」ウィンドウからグラフ・コンポーネントをドラッグして、グラフを作成することもできます。この方法では、コンポーネントをデータにバインドする前に、グラフのユーザー・インタフェースを設計できます。「グラフの作成」ダイアログが開き、グラフ・タイプ、説明および簡単なレイアウト・オプションが表示されます。UI優先開発を使用したグラフの作成方法の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のグラフ・コンポーネントの使用に関する項を参照してください。
表38-2 に、グラフのコンポーネント・ギャラリに表示されるカテゴリを示します。
表38-2 コンポーネント・ギャラリのADFグラフ・カテゴリ
| カテゴリ | 説明 |
|---|---|
株価 |
株価の高値、安値および終値を示すデータでグラフを作成します。また、株価の始値と出来高を必要に応じて表示します。 |
データ・コレクションが、入力済の属性ではなく、一連の名前/値ペアで配列されているグラフを作成できます。たとえば、複数のデータ・ポイントと複数の属性を持つデータを持つ1つの数値列に株価の値を配列することで、これらのポイントを指定できるようになります。
図38-25 に、名前/値ペアで配列したデータ・コレクションの例を示します。MarketDateごとに、Measure属性は、Data属性に格納された値の名前(OPEN、HIGH、LOW、CLOSEおよびVOLUME)を保持しています。
図38-25 名前/値ペアのデータ形状での株価
始める前に:
データ視覚化グラフについて理解しておいてください。詳細は、「データバインドされたグラフの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
また、名前/値ペアのデータ形状について理解しておくとよいでしょう。詳細は、「名前/値ペアの使用方法に関する必知事項」を参照してください。
次のタスクを完了する必要があります。
「アプリケーション・モジュールの作成と変更」の説明に従って、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従い、JSFページを作成します。
名前/値ペアのデータ形状を使用してグラフを作成する手順は次のとおりです。
1週間分の始値、高値、安値および終値の株価を表示するグラフを作成する例では、コレクションSStockPriceView1を選択します。図38-26 に、「データ・コントロール」パネルでのSStockPriceView1コレクションを示します。
図38-26 単一列に配置された株価のデータ・コレクション
「名前属性」には、名前/値ペアの名前を保持する属性を選択します。
たとえば、図38-25 のデータ・コレクションを使用して株価グラフを作成するには、ドロップダウン・リストから「Measure」を選択します。
「値属性」には、名前/値ペアのデータを保持する属性を指定します。
たとえば、図38-25 のデータ・コレクションを使用して株価グラフを作成するには、ドロップダウン・リストから「Data」を選択します。
「グラフの値」表で、デフォルト値を受け入れるか、「ラベル」フィールドのドロップダウン・リストから値を選択して、実行時に表示されるラベルを指定します。
基になるデータ型に応じて、「ラベル」フィールドで選択可能な項目が決まります。この選択に応じて、属性のラベルをグラフにレンダリングする方法が決まります。詳細は、「属性ラベルの使用に関する必知事項」を参照してください。
現在の行をマスター/ディテールに設定を選択して、グラフの行選択リスナーを使用すると、棒、スライスまたは他のグラフ・データ要素をクリックして別のADFコンポーネントのデータを更新できるようになります。詳細は、「マスター/ディテール処理のグラフの行選択リスナーの使用に関する必知事項」を参照してください。
注意:
データ・コレクションがマスター/ディテール関係での子コレクションになる場合、ダイアログには「子アクセッサを含める(階層グラフ)」のオプションが含まれるようになります。このオプションは、グラフのキューブ・モデルにツリー・コレクションをマップしていた古いデータ・モデルとの後方互換性を維持するために含まれています。そのため、通常は、このボックスを選択する必要はありません。
図38-27 に、SStockPriceView1コレクションのMeasure属性を使用してグラフを生成する「株式グラフの作成」ダイアログを示します。
図38-27 StockSingleFactColView1の株式グラフの作成
グラフの行選択リスナー(マスター・ビューとして機能)を使用すると、棒、スライスまたは他のグラフ・データ要素をクリックして別のADFコンポーネント(ディテール・ビューとして機能)のデータを更新できるようになります。たとえば、グラフ内で特定の商品売上を表す棒をクリックすると、その商品に関する詳細な売上データがピボット・テーブルに表示されます。
このマスター/ディテール処理を宣言的に実現するには、次の要件を満たす必要があります。
次のように、同じデータ・コントロールを使用して両方のビューにデータを提供する必要があります。
グラフを行セットとしてデータ・コントロールの親コレクションにバインドします(例: DepartmentsView)。
もう1つのADFビュー(テーブル、ピボット・テーブルなど)をデータ・コントロールの依存ディテール・コレクションにバインドします(例: EmployeesView)。
「グラフの作成」ダイアログで「マスター/ディテールの現在行の設定」を選択して、グラフ・タグのclickListener属性の値を自動設定し、すでにグラフ・バインディングの一部になっているprocessClickメソッドを使用します。
たとえば、グラフ・タグのvalue属性がvalue="#{bindings.myGraph.graphModel}"の場合は、clickListener属性をclickListener="#{bindings.myGraph.graphModel.processClick}"に設定します。
グラフのデータ要素のクリックを処理するためのJavaコードを記述する必要はありません。グラフ・バインディングに対するprocessClickイベントが、グラフのデータ・コンポーネントに対するクリック・イベントを認識し、必要な処理を実行します。
データ・コントロールを使用してグラフを構成する場合、デフォルトでは、データ・バインディング・ダイアログで入力済属性がサポートされるため、コレクション内の各種データ・ポイントは各種属性によって表されます。たとえば、複数製品の売上げとコストに関するデータ・ポイントがある場合、データ・コレクション内で1つ目の属性が各製品の売上げデータ用で、2つ目の属性が各製品のコスト用である場合にのみ入力済属性を使用します。
入力済属性のデータ形状は、グラフ内のデータ・ポイントの種類が1つのみの場合も有効です。図38-28 に入力済属性のデータ形状を示します。
図38-28 入力済属性のデータ形状
データ・バインディング・ダイアログで「データ形状の変更」を選択し、ダイアログで名前/値ペアをサポートするように変更できます。ここで、データ・ポイントの名前を指定するName属性とデータ値を指定するValue属性という2つの属性によって表されるデータ・ポイントは2種類以上あります。この場合、専用の属性にはそれぞれ、各種データ・ポイントを識別する値があります。たとえば、メトリック属性は、データ・コレクションに各製品の売上とコストについての値を保持します。図38-29 に名前/値ペアのデータ形状のデータ・コレクションを示します。
図38-29 名前/値ペアのデータ形状
名前/値ペアのデータ形状を使用する場合は、グラフ・データ・バインディング・ダイアログで次の値を指定します。
名前属性: Name属性を表すデータ・コレクション内の属性で、その一意の値によりデータ・ポイントが各種メトリックにカテゴリ分けされます。
値属性: グラフに描画された数値データ・ポイントを表すデータ・コレクション内の属性。各データ・ポイントは、対応するName属性値によって特定のメトリックにカテゴリ分けされます。
ダイアログでの定義に従って、グラフ・タイプに関連するフィールドにValue属性の値を指定します。たとえば、バブル・グラフでは、「バブルの色」と「バブル・ツールチップ」を指定します。値はデータ・コレクション内の属性、つまり、データ・ポイントを特定のメトリックにカテゴリ分けするために実行時に使用されるName属性の一意の値を表すデータ値として指定できます。
1つ以上の値を追加するには、「追加」ドロップダウン・リストから「データ値」を選択します。各データ値は、データ・ポイントを特定のメトリックにカテゴリ分けするために実行時に使用されるName属性の一意の値を表します。Name属性で使用可能なすべてのメトリックを選択する必要はありません。
入力フィールドで属性やデータ値を指定した後で、任意の属性を右クリックし、「右に移動」、「左に移動」、「削除」または「データ値の編集」などのアクションに対応するポップアップ・メニューを表示できます。
たとえば、図38-30 に示すように、名前/値ペアの形状でデータの単一数値列を使用して、データ・コレクションにバインドされた、始値、高値、低値、終値を表示する株価グラフを作成できます。
図38-30 名前/値ペアで作成した株価グラフ
ゲージは、売上合計、在庫レベル、温度、速度などの単一のデータ値をプロットします。しきい値を使用すると、ゲージでは、色を使用して許容範囲または非許容範囲などの状態情報を表示できます。
たとえば、ゲージ値軸では、赤、黄、緑の色の範囲を示して、低、中、高の状態を表す場合があります。データバインドされた1つのゲージ・コンポーネントは、使用するデータ・コレクション内の行数に応じて、単一のゲージまたはゲージの列を作成できます。データ・コレクションでは、各行に単一のゲージの値が含まれます。
ゲージ用のコンポーネント・ギャラリを使用すると、4つのゲージ・カテゴリから選択できます。
表38-3 コンポーネント・ギャラリのADFゲージ・カテゴリ
| イメージ | カテゴリ | 説明 |
|---|---|---|
 |
ダイアル |
円形の軸にプロットされたメトリック値を表示します。ゲージの背景属性によって、ゲージの背景が矩形、円形、半円形のいずれで表示されるかが決まります。インジケータは、軸上のダイアル・ゲージのメトリック値を指します。 |
 |
LED |
キー・パフォーマンス・インディケータ(KPI)などの指標を図示します。LEDゲージには、ステータスを示すために色を使用する円形または矩形、カラー・インジケータに加えて上、左、右または下を指す三角形または矢印など、数種の形状を使用できます。 |
 |
評価 |
メトリック値の入力を表示し、オプションで受け入れます。このゲージは、通常、映画の星評価など、製品やサービスの評価を示すために使用されます。 |
 |
ステータス・メーター |
水平または円形の軸にメトリック値を表示します。内側の矩形は、外側の矩形に表示された範囲に対する現在の測定値のレベルを示します。オプションで、ステータス・メーターは、メトリック値が事前定義されたしきい値内のどこに含まれるかを色で示します。 |
各カテゴリには、1つ以上のゲージ・タイプが含まれます。単一ゲージの作成時に表示されるコンポーネント・ギャラリを詳しく調べて、使用可能なすべてのゲージ、カテゴリ・タイプおよびそれぞれの説明を確認してください。図38-31 に、ADFゲージ用に表示されるコンポーネント・ギャラリを示します。
図38-31 ADFゲージのコンポーネント・ギャラリ
データ・バインディングのプロセスは、作成するゲージのタイプに関係なく、基本的に同じです。必要なものは、メトリック値(つまり、ゲージで示す指標)のみです。ただし、データ・コレクション内の行に最大、最小、しきい値などの範囲情報が含まれている場合は、その値をゲージにバインドして動的な設定を示すことができます。ゲージの上部または下部ラベルで使用する情報がデータ・コレクション内に含まれている場合も、その値をゲージにバインドできます。
データ・バインディングの完了後に、ゲージをカスタマイズする方法の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のゲージ・コンポーネントの使用に関する項を参照してください。
ADFゲージ・コンポーネントを使用して、円形、ドーム型または矩形の背景にダイアル・ゲージを作成できます。ゲージのインジケータでは、メトリックの現在の値を指定します。
図38-32に示す単一のダイアル・ゲージは、Summit ADF DVTサンプル・アプリケーションの在庫品目についてのAmountInStockデータからゲージを作成した場合に表示されます。AmountInStockメトリックの値(0.650K)は、ゲージの中心のラベルに表示されます。
図38-32 在庫ダイアル・ゲージで示される数量
データ・コントロールを使用してダイアル・ゲージを作成する場合は、ゲージ・コンポーネントをデータ・コレクションの属性にバインドします。JDeveloperを使用すると、「データ・コントロール」パネルから属性をドラッグ・アンド・ドロップすることで、この処理を宣言的に実行できます。属性をドラッグ・アンド・ドロップした後で、ダイアル・ゲージの作成ダイアログを使用してゲージを構成します。
図38-33に示す「ダイヤル・ゲージの作成」ダイアログは、図38-32に示した在庫数量ダイアル・ゲージ用に構成されていて、図38-31に示したゲージ・タイプを使用しています。
図38-33 在庫数量ダイアル・ゲージの「ダイアル・ゲージの作成」ダイアログ
始める前に:
データバインドされたデータ視覚化ゲージについて理解しておいてください。詳細は、「データバインドされたゲージの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
「アプリケーション・モジュールの作成と変更」の説明に従って、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従い、JSFページを作成します。
データバインドされたダイアル・ゲージを作成するには:
たとえば、Summit ADF DVTサンプル・アプリケーションに、在庫品目のインベントリ・レベルについて表示するダイアル・ゲージを作成する場合は、ProductInventoryView1コレクションのAmountInStock属性を選択します。図38-34 は、AmountInStock属性を選択している「データ・コントロール」パネルのProductInventoryView1コレクションを示しています。
図38-34 在庫品目の在庫数量を含むデータ・コレクション
「プロパティ」ウィンドウでは、ゲージのバインディングの完了後に、ゲージ・タグおよびその子タグの追加属性の値を設定して、コンポーネントをカスタマイズできます。たとえば、スケーリングなしで在庫数量を表示するように在庫数量ゲージを構成する場合は、メトリックのscaling属性とティック・ラベルをnoneに設定します。
また、既存のゲージ・バインディングを確認して調整するには、そのゲージ・コンポーネントの「プロパティ」ウィンドウで「編集」アイコンをクリックします。
データ・バインディングの完了後に、ゲージをカスタマイズする方法の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のゲージ・コンポーネントの使用に関する項を参照してください。
ゲージを「データ・コントロール」パネルからドロップすると、次の処理が行われます。
ゲージのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
UIコンポーネントに必要なコードをJSFページに追加します。
次の例は、倉庫内にある製品のインベントリ・レベルを表示するダイアル・ゲージ用にJDeveloperが生成したバインディングを示しています。このコード例では、ゲージ・メトリックがProductInventoryView1データ・コレクション内のAmountInStock属性から動的に値を受け取ることを示しています。
<bindings>
<attributeValues IterBinding="ProductInventoryView1Iterator" id="AmountInStock">
<AttrNames>
<Item Value="AmountInStock"/>
</AttrNames>
</attributeValues>
</bindings>
次の例は、ダイアル・ゲージに対してJDeveloperによりJSFページに生成されたコードを示しています。
<dvt:dialGauge id="dialGauge1" indicator="needleAlta" minimum="0"
maximum="2600" background="domeAlta"
value="#{bindings.AmountInStock.inputValue}">
<dvt:gaugeMetricLabel rendered="true" id="gml1"/>
</dvt:dialGauge>
評価ゲージは、メトリック値の入力を表示し、オプションで受け入れます。このゲージは、通常、映画の星評価など、製品やサービスの評価を示すために使用されます。
図38-35 に、Summit ADFサンプル・アプリケーションの顧客の信用格付けを示すために使用されている評価ゲージの例を示します。この例では、顧客の信用格付けが低く、星が1つ割り当てられています。その他の評価には、普通の信用を示す星2つ、高い信用を示す星3つ、非常に高い信用を示す星4つがあります。
図38-35 Summit ADFサンプル・アプリケーションの評価ゲージ
データ・コントロールを使用して評価ゲージを作成する場合は、評価ゲージをデータ・コレクションの属性にバインドします。JDeveloperを使用すると、「データ・コントロール」パネルから属性をドラッグ・アンド・ドロップすることで、この処理を宣言的に実行できます。属性をドラッグ・アンド・ドロップした後で、「評価ゲージの作成」ダイアログを使用してゲージを構成します。
図38-36に、図38-35の評価ゲージに対して完成した「評価ゲージの作成」ダイアログを示します。この例では、評価ゲージは4つの信用格付けを表すために最大値の4に設定されています。
図38-36 Summitの信用格付けゲージの「評価ゲージの作成」ダイアログ
始める前に:
データバインドされたデータ視覚化ゲージについて理解しておいてください。詳細は、「データバインドされたゲージの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
「アプリケーション・モジュールの作成と変更」の説明に従って、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従い、JSFページを作成します。
データバインドされた評価ゲージを作成する手順:
たとえば、Summit ADFサンプル・アプリケーションの評価ゲージを作成して、顧客の信用格付けを表示するには、CustomerコレクションでCreditRatingId属性を選択します。図38-34 は、CreditRatingId属性を選択している「データ・コントロール」パネルのCustomerコレクションを示しています。
図38-37 在庫品目の在庫数量を含むデータ・コレクション
「プロパティ」ウィンドウでは、ゲージのバインディングの完了後に、ゲージ・タグおよびその子タグの追加属性の値を設定して、コンポーネントをカスタマイズできます。たとえば、顧客の信用格付けを更新できるように評価ゲージを構成するには、評価ゲージのreadOnly属性をfalseに設定します。
Summit ADFの例では、評価ゲージの値は作成時にCreditRatingIdに設定されました。ただし、CreditRatingIdは実際には1から4の範囲で、1が最高評価です。格付けを評価ゲージの星に変換するには、ゲージの作成後に「コード・エディタ」でソース・コードを編集し、評価ゲージの値を#{5 - bindings.CreditRatingId.inputValue}で置換します。
次の例は、Summit ADF評価ゲージのJSFページのコードを示しています。
<dvt:ratingGauge id="ratingGauge1" minimum="0" maximum="4"
value="#{5 - bindings.CreditRatingId.inputValue}" shape="star"/>
また、既存のゲージ・バインディングを確認して調整するには、そのゲージ・コンポーネントの「プロパティ」ウィンドウで「編集」アイコンをクリックします。
データ・バインディングの完了後に、ゲージをカスタマイズする方法の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のゲージ・コンポーネントの使用に関する項を参照してください。
データバインドされたADF表に、データバインドされたゲージを追加するには、表を編集または作成しているときに、列コンテンツを指定する際にgaugeコンポーネントを選択します。
図38-38に、表の一部を示します。この表は、倉庫内のすべての製品をADF DVTサンプル・アプリケーションに表示します。この例では、AmountInStock列に、各製品の在庫数量と、値が許容範囲内にあるかどうかを示すLEDゲージが組み込まれています。
図38-38 ADFのLEDゲージの表
データバインドされたADF表にゲージを追加するには、「データ・コントロール」パネルからJSFページに、ゲージ・メトリックを含むデータ・コレクションをドラッグして、作成するゲージのタイプを指定します。
始める前に:
データバインドされたデータ視覚化ゲージについて理解しておいてください。詳細は、「データバインドされたゲージの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
「アプリケーション・モジュールの作成と変更」の説明に従って、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従い、JSFページを作成します。
データバインドされたADF表にゲージを組み込むには:
たとえば、Summit ADF DVTサンプル・アプリケーションに、倉庫内の製品ごとのインベントリ・レベルを表示する表を作成する場合は、ProductInventoryView1コレクションを選択します。図38-39 に、「データ・コントロール」パネル内のProductInventoryView1コレクションを示します。
図38-39 ProductInventoryView1データ・コレクション
「プロパティ」ウィンドウでは、表のバインディング完了後に、ゲージ・タグおよびその子タグの追加属性の値を設定してコンポーネントをカスタマイズできます。たとえば、図38-38のLEDゲージは、しきい値を使用して在庫レベルが許容範囲内かどうかを示すように構成されています。ゲージしきい値の構成の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のゲージしきい値の構成方法に関する項を参照してください。
既存の表バインディングを確認して調整するには、表コンポーネントの「プロパティ」ウィンドウで「編集」アイコンをクリックします。
データバインドされたADF表の作成方法および構成方法の詳細は、「ADFによるデータバインドされた表の作成」を参照してください。ゲージ・コンポーネントの使用とカスタマイズの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のゲージ・コンポーネントの使用に関する項を参照してください。
データバインドされたADF表にゲージを組み込むと、ゲージのメトリック属性がページ定義ファイルに追加され、JSFページのUIコンポーネントが更新されます。
次の例は、図38-38で示したADF表のバインディングを示しています。
<bindings>
<tree IterBinding="ProductInventoryView1Iterator" id="ProductInventoryView1">
<nodeDefinition DefName="model.ProductInventoryView"
Name="ProductInventoryView10">
<AttrNames>
<Item Value="ProductId"/>
<Item Value="Name"/>
<Item Value="ShortDesc"/>
<Item Value="AmountInStock"/>
<Item Value="ReorderPoint"/>
<Item Value="MaxInStock"/>
<Item Value="WarehouseId"/>
</AttrNames>
</nodeDefinition>
</tree>
</bindings>
次の例は、ADF表のJSFページに追加されたコードを示しています。gauge要素は、太字で強調してあります。簡潔にするために、表の最初の3列のみを表示しています。
<af:table value="#{bindings.ProductInventoryView1.collectionModel}" var="row"
rows="#{bindings.ProductInventoryView1.rangeSize}"
emptyText="#{bindings.ProductInventoryView1.viewable ?
'No data to display.' : 'Access Denied.'}"
rowBandingInterval="0"
fetchSize="#{bindings.ProductInventoryView1.rangeSize}" id="t1"
summary="Table Showing Product Inventory">
<af:column headerText="#{bindings.ProductInventoryView1.hints.ProductId.label}"
id="c1" width="100"
rowHeader="true">
<af:outputText value="#{row.ProductId}"
shortDesc="#{bindings.ProductInventoryView1.hints.ProductId.tooltip}"
id="ot1">
<af:convertNumber groupingUsed="false"
pattern="#{bindings.ProductInventoryView1.hints.ProductId.format}"/>
</af:outputText>
</af:column>
<af:column headerText="#{bindings.ProductInventoryView1.hints.Name.label}"
id="c2" width="100">
<af:outputText value="#{row.Name}"
shortDesc="#{bindings.ProductInventoryView1.hints.Name.tooltip}" id="ot2"/>
</af:column>
<af:column headerText="#{bindings.ProductInventoryView1.hints.ShortDesc.label}"
id="c3" width="100">
<af:outputText value="#{row.ShortDesc}"
shortDesc="#{bindings.ProductInventoryView1.hints.ShortDesc.tooltip}" id="ot3"/>
</af:column>
<af:column headerText="#{bindings.ProductInventoryView1.hints.AmountInStock.label}"
id="c4" width="72" align="center">
<dvt:ledGauge id="ledGauge1" value="#{row.bindings.AmountInStock.inputValue}"
shortDesc="#{bindings.ProductInventoryView1.hints.AmountInStock.tooltip}"
maximum="3000">
<dvt:gaugeMetricLabel rendered="true" scaling="none" id="gml1"/>
<dvt:gaugeThreshold id="gt1" maximum="#{row.bindings.ReorderPoint.inputValue}"
color="#d62800"/>
<dvt:gaugeThreshold id="gt2" maximum="#{row.bindings.MaxInStock.inputValue}"
color="#63a500"/>
<dvt:gaugeThreshold id="gt3" color="#e7e700"/>
</dvt:ledGauge>
</af:column>
... remaining columns omitted
</af:table>
