7 Oracle JETユーザー・インタフェース・コンポーネントの使用

Oracle JETには、アプリケーションで使用するために構成できる、様々なユーザー・インタフェース(UI)コンポーネントが用意されています。Oracle JETクックブックには、コレクション、コントロール、フォーム、ビジュアライゼーションおよびその他の機能を使用するための各コンポーネントの例が含まれています。

Oracle JETユーザー・インタフェース・コンポーネントについて

現在、Oracle JETには2セットのUIコンポーネントがあります。oj-ネームスペースを使用するコンポーネントを含む最初のセットは、@oracle/oraclejetにパッケージ化され、Oracle JETの初期リリースに遡ります。2023年1月にリリース14.0.0のOracle JETとともに導入された新しいCore Packコンポーネントは、oj-c-ネームスペースを使用し、@oracle/oraclejet-core-packにパッケージ化されています。

コア・パック・コンポーネントは、JETの将来を表します。JETチームは、React設計およびコンポジションの原則を使用する最新の仮想DOMレンダリング・ライブラリであるPreactを使用して、既存のすべてのJET UIコンポーネントを最初から書き換えています。JET 14リリースでは、これらの新しいCore Packコンポーネントの最初のセットが提供されます。このコンポーネント・セットは、既存のすべてのコンポーネントがCore Packコンポーネントとして再作成されるまでは、今後数年にわたって拡張されます。JETチームは、同じ期間中に新しいUIコンポーネントもCore Packコンポーネントに導入します。

JETの既存のUIコンポーネントのセット(現在はレガシー・コンポーネントと呼ばれています)は、過去10年間、JETコミュニティとそのアプリケーション開発者にサービスを提供してきました。レガシー・コンポーネントは、oj-ネームスペースを使用して、同じJETアプリケーションのoj-c-ネームスペースを使用して、新しいCore Packコンポーネントと並列に実行されます。APIは、多くの場合、同一でないとしても類似しています。新しいCore Packは、既存のアプリケーション・コードに影響を与えることなく、今後意味をなさなくなるAPIの更新や変更を可能にすることを目的として作成されました。開発者は、通常の開発サイクルの一部として新しいコンポーネントに移行するタイミングを選択できます。

なぜこれらのコンポーネントに移行する必要があるのか疑問に思われるかもしれません。主な理由はパフォーマンスです。レンダリングのパフォーマンスは、Core Packコンポーネントで大幅に向上します。新しいコンポーネント・セットによってアプリケーションの全体的なパフォーマンスが自動的に変化することはありませんが、レンダリング時間によって、アプリケーションのルック・アンド・フィールが顧客に対してよりレスポンシブになることは確実です。Core Packコンポーネント・セットを使用する2つ目の理由は、将来のすべての新しいコンポーネントがそのコンポーネントの一部として提供されることです。今後、新しいレガシーUIコンポーネント(oj-)は開発しません。

新しいCore Packコンポーネントにはそれぞれ、『Oracle JETクックブック』の実装例とAPIドキュメントのエントリが含まれています。バッジは、これらの実装およびエントリを識別します。

Core Packコンポーネントの操作方法、短期的な制限および移行情報の詳細は、APIドキュメントのCore Packに関する項を参照してください。

コレクションの使用

Oracle JETデータ・コレクション・コンポーネントを使用して、表、データ・グリッド、リスト・ビューまたはツリーのデータを表示します。

Oracle JETのデータ・コレクション・コンポーネントには、oj-table、oj-data-grid、oj-treeおよびoj-list-viewがあり、これらを使用してデータのレコードを表示できます。oj-tableおよびoj-data-gridは両方ともデータを行と列に表示しますが、いずれのコンポーネントを選択するかはユースケースによって異なります。ディレクトリ構造などの階層データを表示するにはoj-tree-viewを使用し、データのリストを表示するにはoj-list-viewを使用します。また、ツールキットには、ページネーション、および階層データをデータ・グリッドまたは表の行に表示する行エキスパンダも含まれています。

Oracle JETクックブックのコレクション・カテゴリおよび『Oracle® JavaScript Extension Toolkit (Oracle JET) APIリファレンス』には、コレクション・コンポーネントを使用するためのデモと例がすべて含まれています。

ノート:

oj-tableなどのコレクション・コンポーネントの表示をプログラムで制御する場合は、「追加したコンポーネントの表示の管理」を確認してください。

表、データ・グリッド、リスト・ビューの選択

Oracle JETには、データを行と列に表示するための、oj-table、oj-data-gridおよびoj-list-viewコンポーネントが用意されています。この項は、アプリケーションで使用するコンポーネントを決定するのに役立ちます。

oj-tableコンポーネントは、行ベースでデータのレコードを表示します。フィールドの行として表示できる単純なデータに使用するのが最適で、データをより単純なレイアウトで表示できるだけでなく、一般的な機能のほとんどがサポートされているため、高度な機能が必要ない場合は、第1候補になります。表での選択によって、データの行と、その行またはレコードのすべてのフィールドが提供されます。表のサイズ設定は、コンテンツ自体に基づいています。セルの高さと幅は、格納されるコンテンツに応じて調整されます。tr、td、thなどのoj-table要素を使用してテンプレートを記述できます。また、固定値またはコンテンツ・サイズに基づいて列のサイズを変更できる、oj-tableコンポーネントのlayout属性を使用することも検討してください。Oracle JETクックブックのoj-tableコンポーネントの列レイアウトのデモを参照してください。

oj-data-gridは、グリッド機能を提供するように設計されています。データの個々のセルまたはセルの範囲を選択できる機能があります。データの列または行にわたってデータの合計または集計を表示する必要がある場合の使用に最も適しています。oj-data-gridは、レイアウトおよび機能においてoj-tableコンポーネントより高い柔軟性を確保して設計されています。データの表示方法をアプリケーションで具体化できる低レベルのコンポーネントです。データ・グリッドの全体的なサイズはそのコンテンツによって決まるのではなく、開発者がコンテナの正確な高さと幅を指定します。データ・グリッドはコンテンツへのビューポートとして機能し、表の場合とは異なり、グリッドのサイズを決めるのは列と行のサイズではありません。このカスタムのHTML oj-data-grid要素では、要素内のテンプレート・コンテンツをホストできます。

oj-list-view要素は、データのリストまたはグループ化されたデータのリストを表示します。任意のレイアウトまたはコンテンツを使用してリストを表示する必要がある場合に最適です。また、oj-list-viewを使用してルート要素内にネストされたリストを含む階層データを表示することもできます。

oj-table、oj-data-gridおよびoj-list-viewコンポーネントの機能の比較を次の表に示します。

機能	oj-table	oj-data-grid	oj-list-view
列および行のサイズ設定	コンテンツによって制御またはCSSスタイルによって修正されます。幅と高さではすべてのCSSサイズ設定文字列がサポートされています。	セルのディメンションによって制御されます。幅と高さに対するパーセント値はサポートされていません。	いいえ
ユーザーによるサイズ変更が可能な列	はい	はい	いいえ
ユーザーによるサイズ変更が可能な行	いいえ	はい	いいえ
行の順序変更	いいえ	はい	いいえ
列のソート	はい	はい	いいえ
列の選択	はい	はい	いいえ
行のソート	いいえ	はい	いいえ
行の選択	はい	はい	はい
セルの選択	いいえ	はい	いいえ
マーキー選択	いいえ	はい	いいえ
行ヘッダーのサポート	いいえ	はい	いいえ
列の固定	はい frozenEdgeプロパティを使用して、表の先頭または末尾に列を固定します。	いいえ	いいえ
ページネーション	はい	はい	はい
スクロール(最高水位標/無限スクロール)	はい(表の終わり(またはドキュメント・サイズ)に達した場合)仮想スクロールに関する末尾の「ノート」を参照してください。	はい(データ・グリッドの列/行数に達した場合) (仮想スクロール・オプションに関するノートを参照)	はい(リストの終わり(またはドキュメント・サイズ)に達した場合) 仮想スクロールに関する末尾の「ノート」を参照してください。
カスタム・セル・テンプレート	はい	はい	いいえ
カスタム行テンプレート	はい	いいえ	はい
カスタム・セル・レンダラ	はい	はい	いいえ
カスタム行レンダラ	はい	いいえ	はい
行エキスパンダのサポート	はい	いいえ	いいえ
セルのスタンプ	はい	はい	いいえ
セルのマージ	いいえ	はい	いいえ
集計されたキューブ・データのレンダリング	いいえ	はい	いいえ
カスタム・フッター・テンプレート	はい(JavaScript関数に渡すための列データへのアクセスの提供)	はい	いいえ
セルのコンテンツの編集	はい	はい	いいえ
コンテンツ・フィルタリング	はい	はい	いいえ
KeySet APIのサポート	はい	いいえ	はい

ノート:

真の仮想スクロールはoj-data-gridの機能として使用可能です。仮想スクロールを実装する前に、現代的なデザイン原理を検討し、実装してください。エンド・ユーザーに数千ものデータの行を表示してそのすべてをスクロールすることを期待するよりも、エンド・ユーザーとって有用なデータにフィルタ処理したリストを提供するほうが有意義です。真の仮想スクロールは、基礎となるDOMに対してデータが追加および削除された状態で、縦と横の両方向にスクロールを実行できることを意味します。最高水位標スクロール(および遅延ロード)がスクロールの望ましい方法であり、最初のアプローチとして使用してください。

oj-tableおよびoj-list-viewの場合、scroll-policy-options.scrollerを設定して、次のデータ・フェッチが発生するまでの最大スクロール位置としてドキュメント・サイズを指定できます。これは、表またはリストが画面全体を占めるモバイル・デバイスでアプリケーションを実行する場合に特に便利です。

KeySetオブジェクトは、コンポーネントの選択項目を表すために使用されます。コレクション・コンポーネントでは、通常、選択項目の配列を使用するか、選択項目の範囲を定義したオブジェクトを使用します。これらのコンポーネントを変更して、選択項目の表現を処理するKeySetオブジェクトを使用できます。ただし、データ・グリッド・コンポーネントでは、現在のところ、選択項目を参照するKeySetオブジェクトがサポートされていません。oj-list-viewコンポーネントは、KeySetを使用して選択項目を決定できます。oj-tableコンポーネントは、KeySetを使用して、行または列の選択項目を決定できます。両方の値を指定すると、行が優先され、列は空のKeySetにリセットされます。

DataProviderのフィルタ演算子について

DataProviderインタフェースは、アイテムのリストを表示するJETコンポーネントのランタイム・データを取得するために使用されます。DataProviderの実装では、フィルタ処理用にフィルタ演算子を使用します。

次の2種類のフィルタを指定できます:

• 属性フィルタ: 属性演算子フィルタ機能付きのフィルタを提供します。

  interface AttributeFilter<D> extends AttributeFilterDef<D>{
    filter(item: D, index?: number, array?: Array<D>): boolean;
  }
  type Filter<D> = AttributeFilter<D> | CompoundFilter<D>;
  
  type RecursivePartial<T> = {
    [P in keyof T]?:
      T[P] extends (infer U)[] ? RecursivePartial<U>[] :
      T[P] extends object ? RecursivePartial<T[P]> :
      T[P];
  };
  
  interface AttributeFilterDef<D> {
    readonly op: AttributeFilterOperator.AttributeOperator;
    readonly attribute?: keyof D;
    readonly value: RecursivePartial<D>;
  }
   
  type AttributeFilterAttributeExpression = '*';

• 複合フィルタ: 複合演算用のフィルタ演算子を提供します。

  interface CompoundFilter<D> extends CompoundFilterDef<D>, BaseFilter<D> {
  }
  
  interface CompoundFilterDef<D> {
    readonly op: CompoundFilterOperator.CompoundOperator;
    readonly criteria: Array<AttributeFilterDef<D> | CompoundFilterDef<D>>;
  }

DepartmentId値の10をフィルタ対象とするフィルタ定義:

{op: '$eq', value: {DepartmentId: 10}}

DepartmentId値の10およびDepartmentNameのHelloをフィルタ対象とするフィルタ定義:

{op: '$eq', value: {DepartmentId: 10, DepartmentName: 'Hello'}}

StateがCaliforniaのサブオブジェクトLocationおよびDepartmentNameのHelloをフィルタ対象とするフィルタ定義:

{op: '$eq', value: {DepartmentName: 'Hello', Location: {State: 'California'}}}

詳細および属性フィルタで使用できる演算子の完全なリストは、 AttributeFilterDef APIドキュメントを参照してください。

詳細および複合フィルタで使用できる演算子の完全なリストは、 CompoundFilterDef APIドキュメントを参照してください。

コントロールの使用

Oracle JETには、ユーザー・アクションの制御やタスクの進捗表示を実行するボタン、メニューおよびコンテナ要素が含まれています。単純なリストなどのHTML要素には標準HTMLタグをページに直接使用でき、アプリケーションの選択されたテーマに基づいてスタイルが適用されます。

たとえば、oj-button要素をスタンドアロン要素として使用したり、oj-buttonset、oj-menuおよびoj-toolbarコンテナ要素に含めることができます。

oj-conveyor-belt、oj-film-strip、oj-trainなどのナビゲーション・コンポーネントは、ユーザーがデータを前または後ろに移動する際に選択できる視覚的な矢印またはドットを使用します。

タスクに対する進捗を横方向のメーターで表示するには、oj-progress-bar要素を使用できます。タスクに対する進捗を円に表示するには、oj-progress-circle要素を使用できます。

Oracle JETクックブックのコントロール・カテゴリおよび『Oracle® JavaScript Extension Toolkit (Oracle JET) APIリファレンス』には、Oracle JETコントロールを使用するためのデモと例がすべて含まれています。

フォームの使用

Oracle JETには、レスポンシブ・フォームのレイアウトを作成するクラス、およびラベル、フォーム検証とメッセージ、入力および選択を管理するためにフォームに追加できるコンポーネントが含まれています。入力コンポーネントには、該当する場合に入力不可または読取り専用にマークするための属性もあります。

Oracle JETクックブックのフォーム・カテゴリおよび『Oracle® JavaScript Extension Toolkit (Oracle JET) APIリファレンス』には、フォームを使用するための完全なデモと例が含まれています。

重要:

フォームを使用する場合は、HTMLのdiv要素を使用してOracle JETの入力コンポーネントを囲みます。HTMLのform要素は、そのポストバック動作によって、ユーザーがフォームを発行または保存したときに不必要なページ・リフレッシュが行われることがあるため、使用しないでください。

レイアウトおよびナビゲーションの使用

Oracle JET oj-accordian、oj-collapsible、oj-dialog、oj-drawer-*、oj-flex*、oj-navigation-list、oj-panel、oj-popup、oj-size*およびoj-tab-barのコンポーネントとパターンを使用すると、初期のデータ表示を制御できます。また、ユーザーは、セクションの展開、タブの選択、ダイアログやポップアップの表示を行うことで、その他のコンテンツにアクセスできるようになります。

Oracle JETクックブックのレイアウト・カテゴリおよび『Oracle® JavaScript Extension Toolkit (Oracle JET) APIリファレンス』には、レイアウトおよびナビゲーション・コンポーネントを使用するための完全なデモと例が含まれています。

フレックス・レイアウト(oj-flex*)およびレスポンシブ・グリッド(oj-size)クラスの詳細は、「レスポンシブ・アプリケーションの設計」を参照してください。

ビジュアライゼーションの使用

Oracle JETのビジュアライゼーション・コンポーネントには、チャート、ゲージおよびその他のコンポーネントがあり、これらを使用およびカスタマイズして、フラットまたは階層的なデータをグラフィック表示で示してデータ分析を行うことができます。

アプリケーションに対するデーダ・ビジュアライゼーション・コンポーネントの選択

ビジュアライゼーション・コンポーネントには、チャートやゲージ、およびデータを表示するために使用できるダイアグラム、タイムライン、テーマ・マップなど、その他の様々なビジュアライゼーションがあります。アプリケーションでどのビジュアライゼーションを使用するかを決定するためには、次に示す使用方法提案が役立ちます。

チャート

チャートでは、データ間の関係が示され、1つ以上の軸によって定義された領域内に線、棒および点として値が表示されます。

チャート・タイプ	画像	説明	使用方法の提案
面		値が塗りつぶされた面で表された一連のデータを表示します。面は積上げまたは積上げなしにできます。通常、この軸には期間(月など)のラベルが付けられます。	過去12か月の売上げなど、ある期間の累積的な傾向を示すために使用します。 面グラフでは、1つの軸上に最低2グループのデータが必要です。 複数の系列を使用して積上げなしでデータを表示する場合は、値が不明瞭にならないように折れ線または折れ線と面のチャートを使用します。
棒		長さがデータ値と比例する一連の長方形の棒としてデータを表示します。棒は縦または横で表示され、積上げまたは積上げなしにできます。	製品またはカテゴリ間で値を比較するため、または期間別に分類された集計データを表示するために使用します。
ボックス・プロット		数値データのグループの最小、四分位、中間および最大の値を表示します。グループは縦または横に表示されます。グループのサイズに比例した幅になるように、ボックスの幅を変更することもできます。	データの分布を分析するために使用します。ボックス・プロットは箱ひげ図とも呼ばれます。
バブル		2次元の平面にプロットされるデータ・マーカーを使用して3つのメジャーを表示します。マーカーの位置は第1と第2のメジャーを表し、データ・マーカーのサイズは第3のメジャーの比例値を表します。	3タイプの値の相関を示すために使用します(特に、多数のデータ・アイテムがあり、全般的な関係を確認する場合)。 たとえば、バブル・チャートを使用して、従業員の給与(X軸)、経験年数(Y軸)と生産性(バブルのサイズ)をプロットします。このようなチャートでは、生産性を給与および経験と比較して調べることができます。
組合せ		値が棒、折れ線または塗りつぶされた面で表された一連のデータを表示します。	組合せチャートは通常、折れ線と積上げ棒のかわりに、折れ線と棒として構成されます。 たとえば、折れ線でチームの平均評価を表示し、棒で個々のチーム・メンバーの年単位の評価を表すことができます。
ファンネル		目標値と実績値、およびレベルを色別に表す3次元チャートとしてプロセス内のステップに関連するデータを視覚的に表現します。ステップは、横向きの円錐形のセクションに対する縦向きのスライスとして表されます。特定のステップ(スライス)の実際の値がそのスライスの割当てに近づいた分、スライスが塗りつぶされます。	プロセスを監視するために使用し、ファンネルの異なるセクションが、プロセス(販売周期など)の異なる段階を表します。 ファンネル・チャートでは、1つの段階の値(時間など)に対して実際の値と目標の値が必要です。
線		値が折れ線で表された一連のデータを表示します。	複数のアイテムを同じ期間で比較するために使用します。 グラフには、グループ内のメンバーごとに最低2つのポイントを表すデータが必要です。たとえば、月単位の折れ線グラフでは、少なくとも2か月のデータが必要です。通常、特定の色の線は、アメリカ、ヨーロッパ、アジアなどのデータの各グループに関連付けられています。 データが不明瞭になる可能性があるため、折れ線は積上げしないでください。積上げデータを表示するには、面または折れ線と面のチャートを使用します。
折れ線と面		値が折れ線と塗りつぶされた面で表された一連のデータを表示します。	ある期間の一連の値の傾向をビジュアル化し、それらの値を系列間で比較するために使用します。
円		合計に対する比率としてデータ・アイテム・セットを表します。データ・アイテムが円の一部として表示され、円が切り分けられたパイのように見えます。	それぞれの商品群から得られる収益など、各区分と全体との関係を示すために使用します。 階層データを取り扱う場合または2次元のデータを表示するビジュアルな表現が必要な場合は、ツリーマップまたはサンバーストを考慮します。
極		一連のデータを極座標系に表示します。棒、折れ線、面、組合せ、散布およびバブル・チャートに極座標系を使用できます。多角形の格子形(一般にレーダーと呼ばれる)は、極の折れ線および面チャートに対してサポートされています。	年の数か月にわたる気象パターンなど、周期的なx軸を使用してデータを表示したり、業績評価カテゴリなど、x軸のカテゴリに自然な順序がないデータに対して使用します。
ピラミッド		値をピラミッド内のスライスとして表示します。各スライスの領域は、その値をすべてのスライスの合計値のパーセントとして表します。	階層的かつ相対的で基盤に基づく関係、プロセスのステップ、組織レイヤー、またはトピックの相互接続を表示するために使用します。
範囲		データ値と比例する面または棒として値が表される一連のデータを表示します。	都市の1か月の各日について温度の範囲を表示するために使用します。
散布		2次元の平面にプロットされるデータ・マーカーを使用して2つのメジャーを表示します。	上位製品の売上げとコストなど、異なる2種類のデータの相関関係を表すために使用します。散布図は、多数の項目間の全体的な関連性を示す場合に特に有用です。
スパーク		折れ線、棒、浮動棒または面として、傾向または変動を表示します。スパーク・チャートは単純で凝縮されています。	データの濃密な表示に対して追加のコンテキストを提供するために使用します。多くの場合、スパーク・チャートは表、ダッシュボード、またはテキスト付きインラインで表示されます。
株価		株価を表示し、必要に応じて1つ以上の株式の取引出来高を表示します。株価またはローソク足チャートに取引出来高が含まれる場合、出来高はチャート下部に棒で表示されます。

ゲージ

ゲージでは、最小値、最大値またはしきい値に関して表示される、単一の値に焦点が当てられます。

ゲージ・タイプ	画像	説明	使用方法の提案
LED		キー・パフォーマンス・インジケータ(KPI)などの指標を図示します。ステータスを示すために色を使用する円形または矩形、カラー・インジケータに加えて上、左、右または下を指す三角形または矢印など、数種の形状を使用できます。	特定のメトリック値をそのしきい値との関連で示すために使用します。
評価		メトリック値の入力を表示し、オプションで受け入れます。	星を使用した映画の評価など、製品やサービスの評価の表示に使用します。
ステータス・メーター		水平、垂直または円形の軸にメトリック値を表示します。内側の矩形は、外側の矩形に表示された範囲に対する現在の測定値のレベルを示します。オプションで、ステータス・メーターは、メトリック値が事前定義されたしきい値内のどこに含まれるかを色で示します。

その他のデータ・ビジュアライゼーション

その他のデータ・ビジュアライゼーションには、マップ、タイムライン、ガント・チャート、およびチャートやゲージのカテゴリに適さないその他の様々なコンポーネントがあります。

デーダ・ビジュアライゼーション・コンポーネント	画像	説明	使用方法の提案
ダイアグラム		データを表すノードと呼ばれる図形、およびノード間の関連を表すリンクを使用して情報をモデル化し、表現し、視覚化します。	データ・オブジェクト、およびそれらの間の関係を強調するために使用します。
ガント		タスクの開始日と終了日を示す棒を表示します。	プロジェクトのスケジュールを表示するために使用します。
凡例		表示データの説明を記号とラベルの組合せで提供するパネルを表示します。	同じページの複数のビジュアライゼーションが彩色方式を共有している場合は、凡例コンポーネントの使用を考慮してください。バブル・チャートでojLegendを使用した例は、「デーダ・ビジュアライゼーション・コンポーネントでの属性グループの使用」を参照してください。
NBox		データ・アイテムを2次元に表示します。各次元は複数の範囲に分割でき、その交差部分がデータ・アイテムを表す個別のセルになります。	行と列で視覚的に表される2次元のグリッドに沿ってデータをビジュアル化および比較するために使用します。
ピクトチャート		型押しイメージを使用して、離散データを絶対的な数のビジュアライゼーションとして表示したり、様々な地方の人口の相対的なサイズを表示します。	インフォグラフィックによく使用されます。アイコンを次のように使用する場合に使用します。 特定の基準を満たす標本内の人数など、離散値をビジュアル化します。 人口標本で各年齢グループに属する人数など、データの相対的なサイズを強調します。
サンバースト		定量的な階層データを、サイズと色で視覚的に表された2つの次元で表示します。ノードを使用して階層内のデータを参照します。ノードを放射状に表示し、階層のトップを中心に、深いレベルになると中心から離れて表示します。	各ノードの相対サイズが全体に対する重要度を表しているため、大規模な階層データ・セットで傾向を特定する場合に使用します。色もまた、情報に追加される次元の表現に使用できます。 階層のすべてのレベルでのメトリックを表示するには、サンバーストを使用します。
タグ・クラウド		フォントのスタイルとサイズで各データ・アイテムの重要性を強調するテキスト・データを表示します。	相対的な重要性を判断するために、最も顕著な用語を速やかに特定する場合に使用します。
テーマ・マップ		地理的な場所に関連付けられたデータを表示します。	データの傾向またはパターンをその空間的要素で示すために使用します。
時間軸		指定した開始日と終了日およびタイム・スケールに基づいて日付の範囲が表示されます。	特定のガントのユースケースを満たす場合に使用します。このコンポーネントは、表またはデータ・グリッド・コンポーネント内にスタンプされることを目的としています。
タイムライン		一連のイベントを年代順に表示し、グラフィカル・データ・レンダリング、スケール操作、ズーム操作、サイズ変更およびオブジェクト・グループ化に対して豊富なサポートを提供します。	時間特有のイベントを年代順に表示するために使用します。
ツリーマップ		定量的な階層データを、サイズと色で視覚的に表された2つの次元で表示します。ノードを使用して階層内のデータを参照します。ノードはネストした長方形のセットとして表示されます。	各ノードの相対サイズが全体に対する重要度を表しているため、大規模な階層データ・セットで傾向を特定する場合に使用します。情報の追加ディメンションを表すために、色も使用できます。 階層の1つのレイヤーでサイズと色を使用してデータの2つのメトリックを表示することが主な目的の場合は、ツリーマップを使用します。

ビジュアライゼーション・コンポーネントを実装する例については、Oracle JETクックブックのデータ・ビジュアライゼーションを参照してください。

ノート:

Oracle JETのデーダ・ビジュアライゼーション・コンポーネントを使用するには、RequireJSを使用するようにアプリケーションを構成する必要があります。アプリケーションへのRequireJSの追加の詳細は、「Oracle JETアプリケーションでのRequireJSの使用」を参照してください。

デーダ・ビジュアライゼーション・コンポーネントでの属性グループの使用

属性グループを使用して、色および形に対するスタイル値を指定できます。スタイル値は、バブル・チャート、散布図、サンバースト、テーマ・マップ、ツリーマップなど、サポートされているデーダ・ビジュアライゼーション・コンポーネントへの入力として使用できます。さらに、属性グループ・ハンドラを使用して、テーマ・マップや凡例などのコンポーネント全体で属性値を共有できます。

属性グループの使用は、指定のデータ・セットのデータ・マーカーに対して視覚的なスタイルを簡単に提供できる1つの方法でもあります。一意の各プロパティに色を手動で選択し、データ・モデルのフィールドを設定するかわりに、属性グループ・ハンドラを使用して、指定されたデータ値の色または形の値を取得できます。属性グループ・ハンドラが、指定されたデータ値の色または形を取得した後は、同じデータ値を渡す後続のコールがすべて、常にその色または形を返します。

Oracle JETには、属性グループをデーダ・ビジュアライゼーション・コンポーネントに追加する際に使用できる、次のクラスが用意されています。

• ColorAttributeGroupHandler: 色の属性値を生成する色属性グループ・ハンドラを作成します。

  色は.oj-dvt-category-index*タグ・セレクタの値を使用して生成されます。

• ShapeAttributeGroupHandler: 形の属性値を生成する形属性グループ・ハンドラを作成します。

  サポートされている形には、square、circle、human、triangleUp、triangleDown、diamondおよびplusがあります。

次の図で、バブル・チャートに属性グループを適用する効果を確認できます。この例では、マーカーの形(round、diamondおよびsquare)は、データが該当する年を示しています。色はブランドを区別しています。例では、Legendデーダ・ビジュアライゼーション・コンポーネントを使用して、バブル・チャートに凡例も提供しています。

図ui_attr_groups.pngの説明

バブル・チャートの凡例には、色および形に対して同じ属性グループ・ハンドラを使用しています。

Oracle JETクックブックのバブル・チャートには、バブル・チャートを実装するための完全なコードがあります。

カテゴリおよび一致する属性値に対するキー値のペアのマップで構成される照合ルールを使用して、属性グループを初期化することもできます。たとえば、デフォルトの色を使用するのではなく、特定のカテゴリに対して色を指定する必要がある場合は、照合ルールを備えた色属性グループを定義できます。

var colorHandler = new ColorAttributeGroupHandler({"soda":"#336699",
                                                      "water":"#CC3300",
                                                      "iced tea":"#F7C808"});

ColorAttributeGroupHandlerの詳細は、ColorAttributeGroupHandler APIドキュメントを参照してください。ShapeAttributeGroupHandlerの詳細は、ShapeAttributeGroupHandler APIドキュメントを参照してください。