11.5 チャートの作成

組込みウィザードを実行するか、ページ・デザイナで手動で作成することによって、チャートを追加できます。

サポートされているチャートについて
アプリケーション・ビルダーでは、2つのチャート・タイプ(Oracle JavaScript拡張機能ツールキット(Oracle JET)データ視覚化に基づくチャート、およびAnyChartチャート)がサポートされています。
サンプル・チャート
開発者はサンプル・チャート・サンプル・アプリケーションをインストールすることにより、チャートの例を表示できます。
ページの作成ウィザードの実行によるチャートの追加
ページの作成ウィザードを実行して、新規ページにチャートを追加します。
新規ページでのリモート・データベース参照を使用するチャートの追加
ページの作成ウィザードを実行して、リモート・データベース参照を使用するチャートを含む新規ページを追加します。
ページ・デザイナでのチャートの追加
ページ・デザイナで手動で作成することによって、チャートを追加します。
チャートの管理
ページ・デザイナでチャート属性を編集して、チャートの表示方法を変更できます。
カスタムJavaScriptとチャートの使用
カスタムJavaScriptを追加して、チャートのルック・アンド・フィールを制御します。

関連項目:

レガシー・チャートの管理

親トピック: データベース・アプリケーション・コンポーネントの管理

11.5.1 サポートされているチャートについて

アプリケーション・ビルダーでは、2つのチャート・タイプ(Oracle JavaScript拡張機能ツールキット(Oracle JET)データ視覚化に基づくチャート、およびAnyChartチャート)がサポートされています。

アプリケーション・ビルダーでは、次のチャートがサポートされています。

チャート: Oracle Application Expressでのチャートのサポートは、Oracle JETデータ視覚化に基づいています。Oracle JETは、最新のJavaScript、CSS3およびHTML5のデザイン原理と開発原理に基づいたモジュラ・オープン・ソース・ツールキットを提供することによって開発者を支援します。Oracle JETのデータ視覚化コンポーネントには、カスタマイズ可能なチャート、ゲージ、およびデータ分析のためにフラットまたは階層的なデータをグラフィック表示で表すために使用できる、その他のコンポーネントがあります。各Oracle JET視覚化は、アニメーション、アクセシビリティ、レスポンシブ・レイアウト、国際化、テスト自動化および幅広いインター・アクティビティ機能をサポートしています。チャートでは、棒グラフ、折れ線グラフ、面グラフ、レンジ・チャート、組合せチャート、散布チャート、バブル・チャート、極チャート、レーダー・チャート、円グラフ、ドーナツ・グラフ、ファンネル・チャート、株価チャートなどの、様々な方法でデータ・セットを視覚化できます。

関連項目:

JavaScript拡張機能ツールキット(JET) Oracle JETによるアプリケーションの開発のデータ視覚化の操作

AnyChartチャート: AnyChartチャートのサポートは、AnyChartによって提供されるサード・パーティのチャート作成ソリューションに基づきます。これはフレキシブルなFlashおよびJavaScript (HTML5)ベースのソリューションで、開発者は動きがありコンパクトでインタラクティブなチャートを作成できます。AnyChartチャートはレガシー・コンポーネントに分類されており、今後のリリースでは非推奨になる可能性があります。

親トピック: チャートの作成

11.5.2 サンプル・チャート

開発者はサンプル・チャート・サンプル・アプリケーションをインストールすることにより、チャートの例を表示できます。

次に、サンプル・チャート・サンプル・アプリケーションからのサンプル・チャートを示します。

GUID-D2F0935D-7EDB-47B6-90C1-F59E7961D3C1-default.pngの説明が続きます

図GUID-D2F0935D-7EDB-47B6-90C1-F59E7961D3C1-default.pngの説明

このチャートには次の属性があります。

第2Y軸: Y2 Axis Titleのタイトルを表示し、Shop Cのデータのシリーズに関連付けられています。
分割二重Y軸: Store AとAcme Storeの2つのデータのシリーズが積み上げられて表示され、Y軸に関連付けられており、3つ目のデータのシリーズShop Cが第2Y軸に関連付けられて、他の2つのデータのシリーズの下に個別のチャートとしてレンダリングされます。

ページの下部にある棒グラフの情報リージョンを展開して、チャートの情報を確認します。

関連項目:

パッケージ・アプリケーションのインストール(サンプル・チャート・アプリケーションのインストールの詳細)

親トピック: チャートの作成

11.5.3 ページの作成ウィザードの実行によるチャートの追加

ページの作成ウィザードを実行して、新規ページにチャートを追加します。

新しいページにチャートを追加するには、次のステップを実行します。

ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
アプリケーションを選択します。
「ページの作成」をクリックします。
ページの作成ウィザードが表示されます。
「ページの作成」で、次のステップを実行します。
1. (オプション)ユーザー・インタフェース: ページのユーザー・インタフェースを選択します。
2. ページ・タイプの選択: 「チャート」を選択します。
「チャート・タイプ」で、チャート・タイプを選択します。
注意:
「ガント」を選択した場合は、ガント・チャート・タイプを選択するように求められます。
「ページおよびリージョン属性」で、次のステップを実行します。
1. ページ番号: チャート・オブジェクトを表示するページを入力します。
2. ページ名: ページ名を入力します。
3. ページ・モード: ページ・モードを選択します。
  - 標準 - ページは標準のApplication Expressアプリケーション・ページとして表示されます。
  - モーダル・ダイアログ: ページはモーダル・ダイアログとして表示されます。モーダル・ダイアログは、エンド・ユーザーが閉じるまで、アクティブでフォーカスされたままになるオーバーレイ・ウィンドウです。基になるページはグレーアウトされ、ダイアログを閉じるまで、エンド・ユーザーは残りのページと対話できません。
4. ブレッドクラム - ページでブレッドクラム・ナビゲーション・コントロールを使用するかどうかを選択します。
5. 「次へ」をクリックします。
「ナビゲーションのプリファレンス」で、このページに含めるナビゲーションのタイプを指定し、「次へ」をクリックします。ナビゲーション・オプション(ナビゲーション・メニューまたはタブなど)はカレント・アプリケーションのテーマに応じて決まります。
ヒント:
次のステップでは、Oracle JETチャートを選択したと想定しています。Oracle JET以外のチャート(ガントなど)を選択した場合、次のステップが異なる場合があります。画面に表示されるステップに従います。
「ソース」で、次のいずれかを実行します。
- チャート・ソースが表の場合:
  1. ソース・タイプ - 「表」を選択します。
  2. 表/ビューの所有者: チャートを作成している表の所有者を選択します。
  3. 表/ビューの名前: チャートの基になる表またはビューを選択します。
  4. 送信するページ・アイテム: チャート・データが各リクエストで読み取られるときにセッション・ステートに設定される、カレント・ページのページ・アイテムのカンマ区切りリストを入力します。
  5. 最大行数: チャートの表示に使用する行の最大数を入力します。
  6. 「次へ」をクリックします。
- チャート・ソースがSQL問合せの場合:
  1. ソース・タイプ - 「SQL問合せ」を選択します。
  2. SQL問合せ: チャートに使用されるSQL SELECT文を入力します。SQL SELECT文には、少なくとも2つの列が含まれている必要があります。
  3. 送信するページ・アイテム: チャート・データが各リクエストで読み取られるときにセッション・ステートに設定される、カレント・ページのページ・アイテムのカンマ区切りリストを入力します。
  4. 最大行数: チャートの表示に使用する行の最大数を入力します。
  5. 「次へ」をクリックします。
「列のマッピング」で、次のステップを実行します。
1. チャートにマップする列を選択します。表示されるオプションは、選択したチャート・タイプによって異なります。属性の詳細は、フィールドレベル・ヘルプをクリックしてください。
2. 「次へ」をクリックします。
「作成」をクリックします。

親トピック: チャートの作成

11.5.4 新規ページでのリモート・データベース参照を使用するチャートの追加

ページの作成ウィザードを実行して、リモート・データベース参照を使用するチャートを含む新規ページを追加します。

新しいページにチャートを追加するには、次のステップを実行します。

ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
アプリケーションを選択します。
「ページの作成」をクリックします。
ページの作成ウィザードが表示されます。
「ページの作成」で、次のステップを実行します。
1. (オプション)ユーザー・インタフェース: ページのユーザー・インタフェースを選択します。
  この属性は、古いテーマを使用し、デスクトップおよびモバイル・ユーザー・インタフェースが定義されているアプリケーションに対してのみ表示されます。
2. ページ・タイプの選択: 「チャート」を選択します。
「チャート・タイプ」で、チャート・タイプを選択します。
注意:
「ガント」を選択した場合は、ガント・チャート・タイプを選択するように求められます。
「ページおよびリージョン属性」で、次のステップを実行します。
1. ページ番号: チャート・オブジェクトを表示するページを入力します。
2. ページ名: ページ名を入力します。
3. ページ・モード: ページ・モードを選択します。
  - 標準 - ページは標準のApplication Expressアプリケーション・ページとして表示されます。
  - モーダル・ダイアログ: ページはモーダル・ダイアログとして表示されます。モーダル・ダイアログは、エンド・ユーザーが閉じるまで、アクティブでフォーカスされたままになるオーバーレイ・ウィンドウです。基になるページはグレーアウトされ、ダイアログを閉じるまで、エンド・ユーザーは残りのページと対話できません。
4. ブレッドクラム - ページでブレッドクラム・ナビゲーション・コントロールを使用するかどうかを選択します。
5. 「次へ」をクリックします。
「ナビゲーションのプリファレンス」で、このページに含めるナビゲーションのタイプを指定し、「次へ」をクリックします。ナビゲーション・オプション(ナビゲーション・メニューまたはタブなど)はカレント・アプリケーションのテーマに応じて決まります。
ヒント:
次のステップでは、Oracle JETチャートを選択したと想定しています。Oracle JET以外のチャート(ガントなど)を選択した場合、次のステップが異なる場合があります。画面に表示されるステップに従います。
「ソース」で、リモート・データベース参照を選択して構成します。
- REST対応SQLサービスの場合:
  1. 位置: 「REST対応SQLサービス」を選択します。
  2. REST対応SQLサービス: 「REST対応SQL」参照を選択します。
- Webソースの場合:
  1. 位置: 「Webソース」を選択します。
  2. Webソース・モジュール: Webソース・モジュールを選択します。
「ソース・タイプ」で、次のいずれかを実行します。
- チャート・ソースが表の場合:
  1. ソース・タイプ - 「表」を選択します。
  2. 表/ビューの所有者: チャートを作成している表の所有者を選択します。
  3. 表/ビューの名前: チャートの基になる表またはビューを選択します。
  4. 送信するページ・アイテム: チャート・データが各リクエストで読み取られるときにセッション・ステートに設定される、カレント・ページのページ・アイテムのカンマ区切りリストを入力します。
  5. 最大行数: チャートの表示に使用する行の最大数を入力します。
  6. 「次へ」をクリックします。
- チャート・ソースがSQL問合せの場合:
  1. ソース・タイプ - 「SQL問合せ」を選択します。
  2. SQL問合せ: チャートに使用されるSQL SELECT文を入力します。SQL SELECT文には、少なくとも2つの列が含まれている必要があります。
  3. 送信するページ・アイテム: チャート・データが各リクエストで読み取られるときにセッション・ステートに設定される、カレント・ページのページ・アイテムのカンマ区切りリストを入力します。
  4. 最大行数: チャートの表示に使用する行の最大数を入力します。
  5. 「次へ」をクリックします。
「列のマッピング」で、次のステップを実行します。
1. チャートにマップする列を選択します。表示されるオプションは、選択したチャート・タイプによって異なります。属性の詳細は、フィールドレベル・ヘルプをクリックしてください。
2. 「次へ」をクリックします。
「作成」をクリックします。

関連項目:

親トピック: チャートの作成

11.5.5 ページ・デザイナでのチャートの追加

ページ・デザイナで手動で作成することによって、チャートを追加します。

ページ・デザイナで既存ページにチャートを追加するには、次のステップを実行します。

ページ・デザイナで、チャートを含むページを表示します。
中央ペインの下部にあるギャラリで、「リージョン」をクリックして「チャート」を探します。
ギャラリに、ページに追加できるすべてのコントロールまたはコンポーネントが一覧表示されます。カーソルをコントロールまたはコンポーネントにあわせると、説明するツールチップが表示されます。
ギャラリから、「チャート」を右クリックしてコンテキスト・メニューを表示します。「追加先」を選択して目的の位置を選択します。
ヒント:
ギャラリで「チャート」をクリックして、「レイアウト」タブの適切な位置までドラッグすることもできます。

ページ・デザイナは、次に必要なアクションを示します。
(オプション)中央ペインで「メッセージ」タブをクリックします。
「メッセージ」タブには、対応する必要のあるメッセージを示す赤または黄色のバッジが表示されます。「メッセージ」タブには、次の2つのタイプのメッセージが表示されます。
- エラー - エラー・メッセージは赤で表示されます。エラー・メッセージを選択すると、プロパティ・エディタに関連する属性が赤で表示されます。ページを保存する前にエラーに対処する必要があります。
- 警告 - 警告メッセージは黄色で表示されます。警告メッセージを選択すると、プロパティ・エディタで、関連する属性が黄色で表示されます。ページを保存する前にエラーに対処する必要があります。警告メッセージには対処しないでページを保存できることに注意してください。
次のいずれかを実行して、プロパティ・エディタ・グループで強調表示されている必須フィールドを検索します。
- グループまたは属性の検索: 「フィルタ・プロパティ」フィールドにキーワードを入力します。プロパティ・エディタにグループまたは属性が表示されます。デフォルトの表示に戻すには、キーワードを削除します。
- 「グループに移動」の使用: 「グループに移動」アイコンをクリックしてグループを選択します。プロパティ・エディタをデフォルト表示に戻すには、「グループに移動」アイコンを再度クリックし、「すべて開く」を選択します。
必要なリージョン属性を編集します。
ヒント:
属性の詳細は、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックして、参照してください。
(オプション)使用するデータベースの場所を選択します。オプションは次のとおりです。
- ローカル・データベース: データはローカル・データベースをソースとします。(この場所はデフォルトで選択されています。)
- リモート・データベース: データは、REST対応SQL参照を使用して接続が定義されるリモート・データベースをソースとします。
- Webソース: データは、Webソース・モジュールを使用して定義されるRESTful Webサービスをソースとします。
チャート属性を編集します。
1. 「レンダリング」タブで、「属性」ノードを選択します。
  プロパティ・エディタに属性が表示されます。
2. 必要なチャート属性を編集します。
シリーズを編集します。
1. 「レンダリング」タブで、「シリーズ」ノードを選択します。
  プロパティ・エディタにシリーズが表示されます。
2. シリーズのSQL問合せを入力して、選択したチャート・タイプに対して関連付けるその列のマッピングを定義します。
軸を編集します。
ヒント:
「軸」ノードは、面グラフ、棒グラフ、バブル・チャート、組合せチャート、折れ線グラフ、面付き折れ線グラフ、極チャート、レーダー・チャート、レンジ・チャート、散布図、株価チャートなどの、軸をサポートするチャート・タイプの場合にのみ表示されます。
1. 「レンダリング」タブで、「軸」ノードを選択します。
  プロパティ・エディタに軸が表示されます。
2. 必要な軸属性を編集して、軸の値に適用するデータ書式を定義します。
「保存」または「ページの保存と実行」をクリックします。

親トピック: チャートの作成

11.5.6 チャートの管理

ページ・デザイナでチャート属性を編集して、チャートの表示方法を変更できます。

関連項目:

「ページ・デザイナでのページの表示」

親トピック: チャートの作成

11.5.6.1 チャート属性の編集

チャート属性を編集するには、次のステップを実行します。

ページ・デザイナでページを表示します。
1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
2. アプリケーションを選択します。
3. ページを選択します。
ページ・デザイナが表示されます。
左ペインの「レンダリング」タブで、チャートを探します。
チャートで、「属性」ノードを選択します。
プロパティ・エディタにチャート属性が表示されます。属性は、グループに編成されます。
グループまたは属性を検索するには、次のステップを実行します。
- グループまたは属性の検索: 「フィルタ・プロパティ」フィールドにキーワードを入力します。プロパティ・エディタにグループまたは属性が表示されます。デフォルトの表示に戻すには、キーワードを削除します。
- 「グループに移動」の使用: 「グループに移動」をクリックして、グループを選択します。デフォルトの表示に戻すには、「グループに移動」を再度クリックして、「すべて開く」を選択します。
チャート属性を編集します。
「保存」をクリックします。

親トピック: チャートの管理

11.5.6.2 チャート・タイプの切替え

チャートの作成後は、チャート属性を編集してチャート・タイプを切り替えることができます。

チャート・タイプを切り替えるには、次のステップを実行します。

ページ・デザイナで、チャートを含むページを表示します。
「レンダリング」タブで、「属性」ノードを選択します。
「プロパティ・エディタ - 属性」が表示されます。
グループまたは属性を検索するには、次のステップを実行します。
- グループまたは属性の検索: 「フィルタ・プロパティ」フィールドにキーワードを入力します。プロパティ・エディタにグループまたは属性が表示されます。デフォルトの表示に戻すには、キーワードを削除します。
- 「グループに移動」の使用: 「グループに移動」をクリックして、グループを選択します。デフォルトの表示に戻すには、「グループに移動」を再度クリックして、「すべて開く」を選択します。
「チャート」セクションを検索します。
「タイプ」で、切り替えるチャート・タイプを選択します。たとえば、「組合せ」などです。
属性の詳細は、フィールドレベル・ヘルプを参照してください。
「レンダリング」タブで、「シリーズ」ノードを選択します。
「プロパティ・エディタ - シリーズ」が表示されます。
1. すべての必要な列マッピングの列が定義されていることを確認します。
  
  注意:
  列マッピングはチャート・タイプごとに異なる場合があるため、選択したチャート・タイプですべての必要な列マッピングが定義されるようにする必要があります。
2. 「タイプ」で、チャート・シリーズ・タイプを選択します。たとえば、「棒の範囲」などです。
  
  注意:
  同じデータ・プロットでの異なるタイプのシリーズの組合せをサポートするのは、一部のチャート・タイプのみです。「シリーズ・タイプ」属性は、組合せチャート、極チャート、レーダー・チャートおよびレンジ・チャートのチャート・タイプの場合にのみ表示されます。
「保存」または「ページの保存と実行」をクリックします。

親トピック: チャートの管理

11.5.6.3 自動リフレッシュの有効化

チャート属性ページで「自動リフレッシュ」属性を有効にするか、「リフレッシュ」アクションとともに動的アクションを使用すると、チャートで情報を監視できます。

親トピック: チャートの管理

11.5.6.3.1 「自動リフレッシュ」属性の有効化

「自動リフレッシュ」属性を有効にすると、チャートが更新され、指定した時間間隔内に基礎となるデータで行われた変更が反映されます。

自動リフレッシュ更新を有効化するには、次のステップを実行します。

ページ・デザイナでページを表示します。
1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
2. アプリケーションを選択します。
3. ページを選択します。
ページ・デザイナが表示されます。
「レンダリング」タブで、チャートを含むリージョンを見つけて、「属性」ノードを選択します。
属性がプロパティ・エディタに表示されます。
「自動リフレッシュ」を検索します。
グループまたは属性を検索するには、次のステップを実行します。
- グループまたは属性の検索: 「フィルタ・プロパティ」フィールドにキーワードを入力します。プロパティ・エディタにグループまたは属性が表示されます。デフォルトの表示に戻すには、キーワードを削除します。
- 「グループに移動」の使用: 「グループに移動」をクリックして、グループを選択します。デフォルトの表示に戻すには、「グループに移動」を再度クリックして、「すべて開く」を選択します。
「自動リフレッシュ」で、「はい」を選択します。
「保存」をクリックします。

親トピック: 自動リフレッシュの有効化

11.5.6.3.2 リフレッシュ動的アクションの作成

リフレッシュ動的アクションを作成するには、次の手順を実行します。

ページ・デザイナでページを表示します。
1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
2. アプリケーションを選択します。
3. ページを選択します。
ページ・デザイナが表示されます。
左ペインで「動的アクション」タブをクリックします。
「動的アクション」で、「イベント」を右クリックし、「動的アクションの作成」を選択します。
動的アクションの属性がプロパティ・エディタに表示されます。

ヒント:
「メッセージ」タブに、対処が必要なメッセージを示す赤または黄色の印が表示されます。メッセージを選択すると、プロパティ・エディタに関連する属性が表示されます。赤いエラー・メッセージは、保存する前に対処する必要があります。
プロパティ・エディタで、次の動的アクション属性を編集します。
ヒント:
属性の詳細は、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックして、参照してください。
1. 指定、名前 - 動的アクションの名前を入力します。
2. 実行オプション、順序 - このコンポーネントの順序を指定します。これによって評価の順序が決まります。
3. 時期、イベント - 動的アクションを起動するイベントを指定します。
4. 時期、選択タイプ - イベントのトリガーに使用するページ要素または構成体のタイプを選択します。たとえば、プロパティ・エディタで属性を選択して、中央ペインの「ヘルプ」タブをクリックします。
「レンダリング」タブで、Trueの下の最初のアクションを選択します。
1. アクション: 「リフレッシュ」を選択します。
2. 選択タイプ: 「リージョン」を選択します。
3. リージョン: チャートを含むリージョンを選択します。
「保存」をクリックします。
関連項目:
動的アクションの管理

親トピック: 自動リフレッシュの有効化

11.5.7 カスタムJavaScriptとチャートの使用

カスタムJavaScriptを追加して、チャートのルック・アンド・フィールを制御します。

カスタムJavaScriptを使用するには、次のステップを実行します。

ヒント:

サンプル・チャート・アプリケーションには、カスタムJavaScriptとチャートを使用するいくつかの例が含まれています。パッケージ・アプリケーションのインストールの詳細は、パッケージ・アプリケーションのインストールを参照してください。

ページ・デザイナでページを表示します。
1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
2. アプリケーションを選択します。
3. ページを選択します。
ページ・デザイナが表示されます。
「レンダリング」タブで、チャートを含むリージョンを見つけて、「属性」ノードを選択します。
プロパティ・エディタに、ページの属性が表示されます。属性は、グループに編成されます。
グループまたは属性を検索するには、次のステップを実行します。
- グループまたは属性の検索: 「フィルタ・プロパティ」フィールドにキーワードを入力します。プロパティ・エディタにグループまたは属性が表示されます。デフォルトの表示に戻すには、キーワードを削除します。
- 「グループに移動」の使用: 「グループに移動」をクリックして、グループを選択します。デフォルトの表示に戻すには、「グループに移動」を再度クリックして、「すべて開く」を選択します。
「詳細」を検索します。

「JavaScriptコード」に、チャートをカスタマイズするコードを入力します。

次に例を示します。

function( options ){
    // Setup a callback function which gets called 
   // when data is retrieved, it allows to manipulate the series
    options.dataFilter = function( data ) {

        // e.g Set the first series of chart to the colour red
        data.series[ 0 ].color = "red";
    };
    // Set chart initialization options
    // e.g. Set chart type to Line
    options.type = "line";
    return options;
}

「保存」をクリックします。
ヒント:
サポートされるチャート・オプションの詳細は、Oracle JavaScript拡張機能ツールキット(JET)のJSDocページのojChartを参照してください。

関連項目:

新しいページへのレガシー・チャートの追加

親トピック: チャートの作成