23 ADFデータ視覚化コンポーネントの概要

この章では、インタラクティブなADF Facesコンポーネントの表現力が高いセットであるADFデータ視覚化コンポーネントの一般的な特性とフォーカスについて説明します。この部の他の章では、各コンポーネントの作成およびカスタマイズ方法について説明します。

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

23.1項「ADFデータ視覚化コンポーネントの概要」
23.2項「ADFデータ視覚化コンポーネントの定義」
23.3項「ADFデータ視覚化コンポーネントへのデータの指定」
23.4項「Flashイメージ用カスタム・フォントのダウンロード」

23.1 ADFデータ視覚化コンポーネントの概要

ADFデータ視覚化コンポーネントには、データの表示および分析を行うための非常にグラフィカルな表形式の機能が用意されています。このコンポーネントでは、次の機能が提供されます。

ADFデータ・コントロールの使用をサポートするADF Facesのフル・コンポーネントです。
データ・コントロール・パネル、JSFビジュアル・エディタ、プロパティ・インスペクタおよびコンポーネント・パレットを使用して、設計時に宣言的作成を行えます。
各コンポーネントに、ライブ・データ・プレビューが用意されています。この機能により、ページをコンパイルおよび実行することなく、設計の効果を確認できるため、非常に有用です。

ADFデータ視覚化コンポーネントのデータ・バインディングの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「データバインドされたADFデータ視覚化コンポーネントの作成」の章を参照してください。

23.2 ADFデータ視覚化コンポーネントの定義

ADFデータ視覚化コンポーネントには、グラフ、ゲージ、ピボット・テーブル、地理マップ、ガント・チャート、階層ビューア、ツリーマップおよびサンバーストがあります。

23.2.1 グラフ

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

グラフ・コンポーネントでは次の種類のグラフを作成できます。

面グラフ:データが塗りつぶされた領域で表されるグラフを作成します。面グラフを使用して、過去12か月の売上げなど、ある期間の傾向を示します。面グラフでは、1つの軸上に最低2グループのデータが必要です。軸には、月などの時間の経過を表すラベルが付けられることがよくあります。
棒グラフ:データが一連の縦棒として表されるグラフを作成します。ある期間の傾向の確認や、複数の地域での異なる製品区分の売上げなど、同一時点での項目の比較に使用します。
棒(横)グラフ:Y軸に沿って棒を横向きに表示するグラフを作成します。傾向の表示や値の比較に使用できる向きを持たせるために使用します。
バブル・グラフ:データが円形のデータ・マーカー(バブル)の位置とサイズで表されるグラフを作成します。3種類の値の相関関係を示す場合(データ項目が多数で全体の関係を表示する場合は特に)に使用します。たとえば、バブル・グラフを使用して、従業員の給与(X軸)、経験年数(Y軸)と生産性(バブルのサイズ)をプロットします。このようなグラフでは、生産性を給与および経験と比較して調べることができます。
組合せグラフ:異なる種類のデータ・マーカー(棒、線または面)を使用して異なる種類のデータ項目を表すグラフを作成します。棒と線、棒と面、線と面あるいは3つすべての組合せの比較に使用します。
ファンネル・グラフ:プロセスのステップに関連するデータを視覚的に表すグラフを作成します。ステップは、横向きの円柱に対する縦向きのスライスとして表されます。特定のステップ(スライス)の実際の値がそのスライスの割当てに近づいた分、スライスが塗りつぶされます。通常、ファンネル・グラフには、時間などのステージ値に対する実績値と目標値が必要です。たとえば、このコンポーネントを使用して、プロセス(販売ルートなど)がステージ(会計年度の四半期)の目標に達するかどうかを確認します。
折れ線グラフ: 線、一連のデータ・ポイントまたは線で結ばれたデータ・ポイントとしてデータを表示するグラフを作成します。折れ線グラフには、グループ内のメンバーごとに最低2つのポイントを表すデータが必要です。たとえば、月ごとの折れ線グラフには最低2か月必要です。通常、特定の色の線は、アメリカ、ヨーロッパ、アジアなどのデータの各グループに関連付けられています。同一期間の項目の比較に使用します。
パレート・グラフ:データが棒と棒の累積割合を示すパーセンテージ線で表されるグラフを作成します。各棒は、交通事故の原因など、異なる不具合の原因を表します。棒は、発生件数の多いものから少ないものの順に並べられます。パレート・グラフは常に二重Yグラフで、1つ目のY軸は棒が表す値に対応し、2つ目のY軸は0%から100%を表し、累積割合の値に対応します。パレート・グラフを使用して、不具合の原因を特定し、比較します。
円グラフ:1つのグループのデータが円のセクションとして表され、円が切り分けられたパイのように見えるグラフを作成します。各製品ラインからの収益など、全体に対する各部分の関係の表示に使用します。
レーダー・グラフ:円状の折れ線グラフとして表されるグラフを作成します。過去3年間の月ごとの売上げなどの周期的に起こるパターンを表す場合に使用します。
散布図/極グラフ:データが、データ・マーカーの位置によって表されるグラフを作成します。散布図を使用して、上位製品の売上げとコストなど、異なる2種類のデータの相関関係を表す場合に使用します。散布図は、多数の項目間の全体的な関連性を示す場合に特に有用です。
スパークチャート: 傾向や変化を表示する簡単な要約グラフを、表の列やインラインでテキストを付けて作成します。スパークチャートは、限られた機能やフォーマット・オプションで、できるだけ多くのデータを表示する簡単なデザインです。
株価チャート: データが株の高値、安値および終値を示すグラフを作成します。各株価マーカーで3つの異なる値を表示します。

JDeveloperでは、データ・コントロール・パネルからデータ・コントロールをドラッグすることで、グラフを作成してデータ・バインドします。コンポーネント・ギャラリには使用可能なグラフのカテゴリ、タイプおよび説明が表示され、グラフの設計およびクイック・レイアウトの定義が視覚的にサポートされます。図23-1に、データ・コントロールからのグラフの作成で表示されるコンポーネント・ギャラリを示します。

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

図23-1 データ・コントロール・パネルからのグラフのコンポーネント・ギャラリ

コンポーネント・パレットからグラフ・コンポーネントをドラッグし、ページにグラフを作成することもできます。この方法では、コンポーネントをデータにバインドする前に、グラフのユーザー・インタフェースを設計できます。図23-2に、コンポーネント・パレットから円グラフを作成中に表示されるコンポーネント・ギャラリを示します。

注意:

スパークチャート・コンポーネントは、コンポーネント・パレットからのみ挿入でき、後からデータにバインドできます。

図23-2 コンポーネント・パレットから作成する円グラフのコンポーネント・ギャラリ

すべてのグラフで、HTML5、Flash、SVGおよびPNGレンダリングがサポートされます。グラフ・コンポーネントでは、ズームとスクロールの使用、時間軸の特定の部分を強調表示する調節可能な時間セレクタ・ウィンドウの使用、データ・ポイントの表示をフィルタして強調およびフェードする線および凡例の使用、動的参照線と領域の使用などの初期表示およびデータの変更に対する相互作用がサポートされます。

図23-3に、使用可能なグラフ・タイプのいくつかを表示したアプリケーション・ダッシュボードを示します。

図23-3 複数のグラフ・タイプを表示したダッシュボード

図23-4に、表の列で株価を表示する折れ線スパーク・チャートを示します。

図23-4 売上げ傾向のスパークチャート

23.2.2 ゲージ

ゲージ・コンポーネントでは、データのグラフィカル表現をレンダリングします。グラフとは異なり、ゲージでは1つのデータ・ポイントにフォーカスして、そのポイントを最小、最大およびしきい値インジケータと比較して調べ、問題のある領域を特定します。

1つのゲージ・コンポーネントでは、使用されるデータに応じて、1つのゲージまたはゲージ・セットを作成できます。

このコンポーネントでは次の種類のゲージを作成できます。

ダイアル・ゲージ: 180度の弧に沿ってメトリック値を示すゲージを作成します。このタイプのゲージには、通常、ゲージがプロットしている値を指す、線または矢印の形のインジケータがあります。
ステータス・メーター・ゲージ:横長の矩形のバーに沿ってタスクの進度または測定値のレベルを示すゲージを作成します。内側の矩形は、外側の矩形に表示された範囲に対する現在の測定値のレベルを示します。
ステータス・メーター・ゲージ(垂直):縦長の矩形のバーに沿ってタスクの進度または測定値のレベルを示すゲージを作成します。
LED(電光表示)ゲージ:重要業績評価指標(KPI)などの測定値をグラフィカルに表すゲージを作成します。LEDゲージには、よい(上矢印)、普通(左または右矢印)、悪い(下矢印)を示す矢印など、数種のグラフィクスが使用できます。

ゲージのしきい値はいくつでも指定できます。ただし、一部のLEDゲージ(矢印または三角形のインジケータを持つものなど)では、指し示す有効な方向の数が限られているため、サポートされるしきい値の数にかぎりがあります。矢印または三角形のインジケータの場合、しきい値の最大数は3です。

JDeveloperのコンポーネント・ギャラリには使用可能なゲージのカテゴリ、タイプおよび説明が表示され、ゲージの設計およびクイック・レイアウトの定義が視覚的にサポートされます。図23-5に、ゲージのコンポーネント・ギャラリを示します。

図23-5 ゲージのコンポーネント・ギャラリ

すべてのゲージ・コンポーネントでHTML5、Flash、SVGおよびPNGレンダリングを使用できます。

図23-6に、倉庫の在庫レベルを表示する、しきい値付きダイアル・ゲージのセットを示します。

図23-6 しきい値付きダイアル・ゲージ・セット

図23-7に、しきい値付きステータス・メーター・ゲージのセットを示します。

図23-7 しきい値付きステータス・メーター・ゲージ・セット

23.2.3 ピボット・テーブル

ピボット・テーブルでは、行または列での複数層のデータ・ラベルをサポートするグリッドを作成します。オプションのピボット・フィルタ・バーをピボット・テーブルと関連付けて、行エッジや列エッジに表示しないデータをフィルタ処理できます。行セットなどの適切なデータ・コントロールにバインドされている場合、このコンポーネントでは、グリッド・データの小計と合計を生成するオプションや、実行時のドリル操作もサポートされます。JDeveloperでは、「ピボット・テーブルの作成」ウィザードでピボット・テーブルのデータ・バインドおよび構成のための宣言サポートが提供されます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたピボット・テーブルの作成に関する項を参照してください。

ピボット・テーブルでは、あるエッジ(行または列)またはピボット・フィルタ・バー(ページ・エッジ)から別のエッジにデータ・ラベルを切り替え、データの表示を変えることができます。たとえば、ピボット・テーブルで最初は、地域内の製品の合計売上げデータを行エッジに表示し、列エッジで年ごとに分類しているとします。実行時に地域と年を切り替えると、数年間の製品の合計売上げデータが、地域ごとに分類されて表示されます。

ピボット・テーブルでは、横方向と縦方向のスクロール、ヘッダーとセルの書式設定およびドラッグ・アンド・ドロップ・ピボットがサポートされています。ピボット・テーブルでは、実行時の行の昇順および降順のグループ・ソートもサポートされます。図23-8に、ピボット・フィルタ・バーのあるピボット・テーブルの例を示します。

図23-8 ピボット・フィルタ・バーのあるピボット・テーブル

23.2.4 地理マップ

地理マップでは、ADFフレームワークにOracle Spatialの機能が提供されます。このコンポーネントでは、ビジネス・データをマップ上に表し、1つのマップ上に複数層の情報を重ね合せることができます。このコンポーネントでは、色テーマ、グラフ・テーマ(棒または円グラフ)および点テーマの同時表示がサポートされます。各タイプのテーマはいくつでも作成でき、マップ・ツールバーを使用して、実行時にテーマを選択できます。

地理マップの例として、各州での製品の人気を色の濃さで示す色テーマ、倉庫の在庫レベルを示す円グラフ・テーマおよび各倉庫の正確な位置を示す点テーマを使用した、アメリカの基準となるマップを考えてみます。この3つの全テーマをアメリカ合衆国の地図に重ね合せると、特定の地域で商品の人気度に応じた十分な在庫があるかどうかを簡単に評価できます。図23-9に、色テーマ、円グラフ・テーマおよび点テーマを使用した地理マップを示します。

図23-9 色テーマ、円グラフ・テーマおよび点テーマを使用した地理マップ

23.2.5 ガント・チャート

ガント・チャートは(横軸を時間とする)横棒グラフの一種で、リソースまたはタスクが、開始と終了が明確なタイム・フレームに示され、プロジェクトの計画や進捗管理に使用されます。

ガント・チャートは、2つのADFのツリー表とスプリッタの組合せで構成されます。左側の表にはタスクまたはリソースのリストが含まれ、右側の表は1つの列で構成され、特定期間の進捗がグラフ表示されます。

3種類のガント・コンポーネントがあります。

プロジェクト・ガント: タスクを縦に示し、横向きの予定表に各タスクの期間を棒で示すガント・チャートを作成します。
リソース使用率ガント:リソースが割当てを上回っているか下回っているかをグラフィカルに示すガント・チャートを作成します。リソースを縦に示し、横方向の時間軸にその割当てとキャパシティ(オプション)を示します。
スケジュール・ガント:リソース管理を示し、手動のスケジュール表をベースにしたガント・チャートを作成します。リソースを縦方向に、対応するアクティビティを横方向の時間軸に表示します。

図23-10 に、スタッフ・リソースとスケジュールを表示したプロジェクト・ガントを示します。

図23-10 プロジェクト・ガント

23.2.6 時系列

対話型のデータ視覚化ツールである時系列コンポーネントを使用すると、ユーザーはイベントを時間順に表示して、定義された時間範囲内で時間を進めたり戻したりできます。各イベントは時系列アイテムとして表され、単純なADFコンポーネントを使用してテキストやイメージなどの情報を表示したり、リンクなどのアクションを提供したりします。2つの時系列を構成して2系列のイベントを表示し、関連する情報を並べて比較することもできます。

時系列は、時間軸に沿った時系列アイテムとしてのイベントの表示、時系列に表示可能な期間に対応する移動可能な概要ウィンドウ、および時系列の時間増分全体を示した概要時間軸で構成されます。表示可能な時間範囲は、水平方向のズーム制御を使用して変更できます。イベントに対応する各時系列アイテムは、関連する情報やアクションを表示し、時間軸内のイベント日付に結び付けられます。時系列アイテムは、概要パネルにマーカーで表されます。時系列コンポーネントでは、イベントの系列が2つまでサポートされます。

図23-11に、Summit DVTにおける従業員の雇用日を時間順に表示した時系列の例を示します。この例では、各イベントを表す時系列アイテムに、イメージとラベル付きテキストを使用して従業員に関する情報を表示しています。選択が構成されている場合は、時系列アイテム、引出線、および概要パネルのイベント・マーカーが強調表示されます。

図23-11 従業員の雇用日の時系列

23.2.7 階層ビューア

階層ビューアは、階層データが図中のリンクされたノードのセットとして表示されるコンポーネントです。ノードおよびリンクは、データの要素および関係に対応します。このコンポーネントでは、パンおよびズーム操作、ノードの展開および縮小、ノード内での簡単なADF Facesコンポーネントのレンダリング、そして階層ビューア・データの検索がサポートされています。階層ビューアの一般的な用途は、図23-12に示すような組織図を表示することです。

図23-12 階層ビューアによる組織図

JDeveloperのコンポーネント・ギャラリには使用可能な階層ビューアのタイプおよび説明が表示され、コンポーネントの設計およびクイック・レイアウトの定義が視覚的にサポートされます。図23-13に、階層ビューアのコンポーネント・ギャラリを示します。

図23-13 階層ビューアのコンポーネント・ギャラリ

23.2.8 ツリーマップとサンバースト

treemapおよびsunburstコンポーネントは、数量的な階層データを、サイズと色で視覚的に表された2つのディメンションで表示します。たとえば、ツリーマップまたはサンバーストを使用して地域の四半期ごとの売上げを表示し、売上げ傾向を特定する場合は、ノードのサイズで各地域の売上げ高を示し、ノードの色でその地域の売上げが四半期で増えたか減ったかを示すことができます。

ツリーマップおよびサンバーストでは、nodeと呼ばれる形を使用して、階層内のデータを表します。ツリーマップはノードをネストした矩形のセットとして表示します。ツリーのブランチごとに1つの矩形が割り当てられ、そこにサブブランチを表すより小さな矩形が並べられます。

図23-14に、米国の人口調査データを地域ごとにグループ化して表示し、色の属性で平均所得水準を表したツリーマップを示します。人口の多い州は人口の少ない州より大きなノードで表示されます。

図23-14 米国の人口調査データを地域別に表示したツリーマップ

サンバーストは、ノードを矩形レイアウトではなく、放射状に表示し、階層のトップを中心に、深いレベルになると中心から離れて表示します。図23-15に、サンバーストで表示した同じ国勢調査データを示します。

図23-15 米国の人口調査データを地域別に表示したサンバースト

ツリーマップとサンバーストでは、何千ものデータ・ポイントを比較的小さな空間領域に表示できます。各ノードの相対サイズが全体に対する重要度を表しているため、これらのコンポーネントは大規模な階層データ・セットで傾向を特定する場合に適しています。情報の追加ディメンションを表すために、色も使用できます。

階層の1つのレイヤーでサイズと色を使用してデータの2つのメトリックを表示することが主な目的の場合は、ツリーマップを使用します。階層のすべてのレベルでのメトリックを表示する場合、かわりにサンバーストを使用します。エンド・ユーザーが階層を横断してデータの重要な部分を重点的に表示できるように、ドリルを有効にできます。

ツリーマップとサンバーストの情報、およびアプリケーションでのこれらの使用方法の詳細は、第30章「ADFツリーマップおよびサンバースト・コンポーネントの使用」を参照してください。

23.3 ADFデータ視覚化コンポーネントへのデータの指定

すべてのデータ視覚化コンポーネントは、ADFデータ・コントロールの行セット・データ・コレクションにバインドできます。これらのコンポーネントのデータ・コントロールへのデータ・バインディングの詳細と例は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「データバインドされたADFデータ視覚化コンポーネントの作成」の章を参照してください。

グラフとゲージにはtabularDataメソッドがあり、マネージドBeanに格納されたメソッドからCSV(カンマ区切りの値)データを提供できます。

ガント・チャート・コンポーネントでは基本的なツリー・データ・コントロールの使用がサポートされ、タスクとリソースだけでなく、サブタスクとサブリソースにもデータを提供できます。

23.4 Flashイメージ用カスタム・フォントのダウンロード

グラフおよびゲージ・コンポーネントでは、Flashイメージ・タイプを使用してテキストの回転、忠実度の高い表示およびフォントの埋込みを行えます。Flashエンジンは、チャートのXML定義を使用したグラフまたはゲージの表示に使用される、コンパイル済のActionScriptコードを含む事前作成のShockwave Flash (SWF)ファイルです。Flashエンジンはダウンロードして、クライアント・ブラウザに組み込まれているFlash Playerで実行時にインスタンス化します。

埋込みフォントは、表示および印刷に使用され、クライアントにはインストールされず、編集できません。メモリー内でFlash Playerによって使用され、プレーヤの終了時に消去されます。埋込みフォントでは、フォントSWFファイルをダウンロードするために、サーバーとの間のラウンドトリップが必要になりますが、すべてのクライアントで同じ外観が得られ、テキストの回転がサポートされ、ゆがみまたはアンチエイリアス処理が最小限になります。

Oracleでは、Flashイメージでの使用に必要な場合に1つのフォント、Albany WTが用意されています。このフォントには、太字やイタリックのような標準以外のバリエーションはありません。Albany WTフォントは、Flashでかわりに使用する独自の埋込みフォントが指定も用意もされていない場合、Flashのデバイス・フォントでサポートされない一部のアニメーションに対応するために、デフォルト・フォントのかわりに使用されます。

特定のフォントと各SWFファイルは、Flashエンジンに渡される埋込みフォントとしてアプリケーションに追加できます。リストに指定されたフォントがグラフまたはゲージの定義内のテキストまたはラベルで必要になるときまでに、エンジンによってそのフォントが遅延ロードされます。例23-1では、太字とイタリックを組み合せたGeorgiaフォントを定義します。

例23-1 SWFファイル

package
{
  import.flash.display.Sprite;
  import.flash.text.Font;
public class fGeorgiaBoldItalic extends Srite
        (
  [Embed (source="c:\\WINDOWS\\Fonts\\GEORGIABI.TTF",  
    fontName="Georgia Bold Italic",
    fontWeight="Bold",
    fontStyle="Italic".
    mimType="application/x-font-truetype")]
  private statis car font1:Class;
  public function fGeorgiaBoldItalic() {
    Font registerFont(font1);
}
  }
}

グラフおよびゲージのフォント属性は次のように設定できます。

fontEmbedding: 埋込みフォントが使用されるかどうかを定義します。この属性をnoneに設定すると、パフォーマンスが向上する場合があります。
fontMap: 埋込みに使用されるフォントの実際のマップを含みます。マップには、フォントの名前と、カスタム・フォントSWFファイルの格納場所のURLが含まれます。