チャートの作成

12.5 チャートの作成

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

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

関連項目:

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

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

12.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チャートはレガシー・コンポーネントに分類されており、今後のリリースでは非推奨になる可能性があります。

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

12.5.2 サンプル・チャート

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

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

図sample_charts.pngの説明

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

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

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

関連項目:

生産性およびサンプル・アプリケーションのインストール(サンプル・チャート・アプリケーションのインストールの詳細)

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

12.5.3 新しいページへのローカル・データベースを使用するチャートの追加

ローカル・データベースを使用するチャートを新しいページに追加するには、次のステップを実行します。

新しいページにチャートを追加するには:

ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
アプリケーションを選択します。
「ページの作成」をクリックします。
ページの作成ウィザードが表示されます。
「ページの作成」で、次のステップを実行します。
1. ページ・タイプ: 「コンポーネント」→「チャート」を選択します。
  
  ヒント:
  
  コンポーネント・ページは、ページ・レベルの機能を提供し、指定されたアプリケーション内でレポート、フォーム、チャート、カレンダなどを複数回追加できます。機能ページは、アプリケーション・レベルの機能を提供し、アプリケーションごとに1回のみ追加できます。
2. チャート・タイプを選択します。
  
  ノート:
  
  「ガント」を選択した場合は、ガント・チャート・タイプを選択するように求められます。
「ページおよびリージョン属性」で、次のステップを実行します。
1. ページ番号: チャート・オブジェクトを表示するページを入力します。
2. ページ名: ページ名を入力します。
3. ページ・モード: ページ・モードを選択します。
  - 標準 - ページは標準のApplication Expressアプリケーション・ページとして表示されます。
  - モーダル・ダイアログ: ページはモーダル・ダイアログとして表示されます。モーダル・ダイアログは、エンド・ユーザーが閉じるまで、アクティブでフォーカスされたままになるオーバーレイ・ウィンドウです。基になるページはグレーアウトされ、ダイアログを閉じるまで、エンド・ユーザーは残りのページと対話できません。
4. ブレッドクラム - ページでブレッドクラム・ナビゲーション・コントロールを使用するかどうかを選択します。
5. 「次」をクリックします。
「ナビゲーションのプリファレンス」で、このページに含めるナビゲーションのタイプを指定し、「次へ」をクリックします。ナビゲーション・オプション(ナビゲーション・メニューまたはタブなど)はカレント・アプリケーションのテーマに応じて決まります。

ヒント:

次のステップでは、Oracle JETチャートを選択したと想定しています。Oracle JET以外のチャート(ガントなど)を選択した場合、次のステップが異なる場合があります。画面に表示されるステップに従います。
以降のステップは、「ソース・タイプ」(「表」または「SQL問合せ」)によって異なります。
- 「ソース・タイプ」が「表」の場合:
  1. 位置: 「ローカル・データベース」を選択します。
  2. ソース・タイプ - 「表」を選択します。
  3. 表/ビューの所有者: チャートを作成している表の所有者を選択します。
  4. 表/ビューの名前: チャートの基になる表またはビューを選択します。
  5. 送信するページ・アイテム: チャート・データが各リクエストで読み取られるときにセッション・ステートに設定される、カレント・ページのページ・アイテムのカンマ区切りリストを入力します。
  6. 最大行数: チャートの表示に使用する行の最大数を入力します。
  7. 「次」をクリックします。
- 「ソース・タイプ」が「SQL問合せ」の場合:
  1. 位置: 「ローカル・データベース」を選択します。
  2. ソース・タイプ - 「SQL問合せ」を選択します。
  3. SQL問合せ: チャートに使用されるSQL SELECT文を入力します。SQL SELECT文には、少なくとも2つの列が含まれている必要があります。
  4. 送信するページ・アイテム: チャート・データが各リクエストで読み取られるときにセッション・ステートに設定される、カレント・ページのページ・アイテムのカンマ区切りリストを入力します。
  5. 最大行数: チャートの表示に使用する行の最大数を入力します。
  6. 「次」をクリックします。
「列のマッピング」で、次のステップを実行します。
1. チャートにマップする列を選択します。表示されるオプションは、選択したチャート・タイプによって異なります。属性の詳細は、フィールドレベル・ヘルプをクリックしてください。
2. 「次」をクリックします。
「作成」をクリックします。

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

12.5.4 外部データ・ソースを使用した新しいページへのチャートの追加

ページの作成ウィザードを実行して、外部データ・ソースを使用したチャート付きの新しいページを追加します。

このトピックで説明するコンポーネントには、リモート・データソースの読取りおよび書込みアクセスを可能にするREST対応SQLおよびWebソースの組込みサポートが含まれています。リモート・データ・ソースを基にしてコンポーネントを作成するには、最初にアプリケーションを作成して、外部データ・ソースを構成する必要があります。

ヒント:

外部データ・ソースの詳細は、REST対応SQL参照の管理およびWebソース・モジュールの管理を参照してください。

外部データ・ソースを使用して新しいページにチャートを追加するには:

ページの作成ウィザードを実行します。
1. 「ワークスペース」ホームページにナビゲートします。
2. 「アプリケーション・ビルダー」アイコンをクリックします。
3. アプリケーションを選択します。
4. 「アプリケーション」ホームページで、「ページの作成.」をクリックします
  ページの作成ウィザードが表示されます。
「ページの作成」で、次のステップを実行します。
1. ページ・タイプ: 「コンポーネント」を選択します。
2. 「チャート」をクリックします。
「チャート・タイプ」で、チャート・タイプを選択します。

ノート:

「ガント」を選択した場合は、ガント・チャート・タイプを選択するように求められます。
「ページおよびリージョン属性」で、次のステップを実行します。
1. ページ番号: チャート・オブジェクトを表示するページを入力します。
2. ページ名: ページ名を入力します。
3. ページ・モード: ページ・モードを選択します。標準: 標準のApplication Expressアプリケーション・ページとして表示されます。「モーダル・ダイアログ」では、ビューポート内に配置されたオーバーレイ・ウィンドウとしてページが表示され、エンド・ユーザーが終了する(閉じる)までアクティブでフォーカスされたままになります。基になるページはグレーアウトされ、ダイアログを閉じるまで、エンド・ユーザーは残りのページと対話できません。
4. ブレッドクラム - ページでブレッドクラム・ナビゲーション・コントロールを使用するかどうかを選択します。
5. 「次」をクリックします。
「ナビゲーションのプリファレンス」で、このページに含めるナビゲーションのタイプを指定し、「次へ」をクリックします。ナビゲーション・オプション(ナビゲーション・メニューまたはタブなど)はカレント・アプリケーションのテーマに応じて決まります。

ヒント:

次のステップでは、Oracle JETチャートを選択したと想定しています。Oracle JET以外のチャート(ガントなど)を選択した場合、次のステップが異なる場合があります。画面に表示されるステップに従います。
「ソース」で、リモート・データ・ソースを選択します。
- REST対応SQLサービス: データは、REST対応SQLサービスを使用して接続が定義されるリモート・データベースをソースとします。
- Webソース: データは、Webソース・モジュールを使用して、任意のRESTサービス(OracleまたはOracle以外)をソースとします。
以降のステップは、「ソース・タイプ」(「表」または「SQL問合せ」)によって異なります。
- 「ソース・タイプ」が「表」の場合:
  1. ソース・タイプ - 「表」を選択します。
  2. 表/ビューの所有者: チャートを作成している表の所有者を選択します。
  3. 表/ビューの名前: チャートの基になる表またはビューを選択します。
  4. 送信するページ・アイテム: チャート・データが各リクエストで読み取られるときにセッション・ステートに設定される、カレント・ページのページ・アイテムのカンマ区切りリストを入力します。
  5. 最大行数: チャートの表示に使用する行の最大数を入力します。
  6. 「次」をクリックします。
- 「ソース・タイプ」が「SQL問合せ」の場合:
  1. ソース・タイプ - 「SQL問合せ」を選択します。
  2. SQL問合せ: チャートに使用されるSQL SELECT文を入力します。SQL SELECT文には、少なくとも2つの列が含まれている必要があります。
  3. 送信するページ・アイテム: チャート・データが各リクエストで読み取られるときにセッション・ステートに設定される、カレント・ページのページ・アイテムのカンマ区切りリストを入力します。
  4. 最大行数: チャートの表示に使用する行の最大数を入力します。
  5. 「次」をクリックします。
「列のマッピング」で、次のステップを実行します。
1. チャートにマップする列を選択します。表示されるオプションは、選択したチャート・タイプによって異なります。属性の詳細は、フィールドレベル・ヘルプをクリックしてください。
2. 「次」をクリックします。
「作成」をクリックします。

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

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

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

ページ・デザイナで既存ページにチャートを追加するには:

ページ・デザイナで、チャートを含むページを表示します。
中央ペインの下部にあるギャラリで、「リージョン」をクリックして「チャート」を探します。

ギャラリに、ページに追加できるすべてのコントロールまたはコンポーネントが一覧表示されます。カーソルをコントロールまたはコンポーネントにあわせると、説明するツールチップが表示されます。
ギャラリから、「チャート」を右クリックしてコンテキスト・メニューを表示します。「追加先」を選択して目的の位置を選択します。

ヒント:

ギャラリで「チャート」をクリックして、「レイアウト」タブの適切な位置までドラッグすることもできます。

ページ・デザイナは、次に必要なアクションを示します。エラーがある場合は、「保存」ボタンの横に「メッセージの表示」アイコンが表示されます。「メッセージの表示」アイコンをクリックして、すべてのエラーを示すダイアログを表示します。エラーを選択すると、プロパティ・エディタの関連する属性がハイライトされます。
必要な属性を編集します。

ヒント:

属性の詳細は、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックして、参照してください。
(オプション)使用するデータベースの場所を選択します。オプションは次のとおりです。
- ローカル・データベース: データはローカル・データベースをソースとします。(この場所はデフォルトで選択されています。)
- リモート・データベース: データは、REST対応SQL参照を使用して接続が定義されるリモート・データベースをソースとします。
- Webソース: データは、Webソース・モジュールを使用して定義されるRESTful Webサービスをソースとします。
チャート属性を編集します。
1. 「レンダリング」タブで、「属性」ノードを選択します。
  
  プロパティ・エディタに属性が表示されます。
2. 必要なチャート属性を編集します。
シリーズを編集します。
1. 「レンダリング」タブで、「シリーズ」ノードを選択します。
  
  プロパティ・エディタにシリーズが表示されます。
2. シリーズのSQL問合せを入力して、選択したチャート・タイプに対して関連付けるその列のマッピングを定義します。
軸を編集します。

ヒント:

「軸」ノードは、面グラフ、棒グラフ、バブル・チャート、組合せチャート、折れ線グラフ、面付き折れ線グラフ、極チャート、レーダー・チャート、レンジ・チャート、散布図、株価チャートなどの、軸をサポートするチャート・タイプの場合にのみ表示されます。
1. 「レンダリング」タブで、「軸」ノードを選択します。
  
  プロパティ・エディタに軸が表示されます。
2. 必要な軸属性を編集して、軸の値に適用するデータ書式を定義します。
「保存」または「ページの保存と実行」をクリックします。

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

12.5.6 チャートの管理

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

関連項目:

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

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

12.5.6.1 チャート属性の編集

チャート属性を編集するには:

ページ・デザイナでページを表示します。
1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
2. アプリケーションを選択します。
3. ページを選択します。
ページ・デザイナが表示されます。
左ペインの「レンダリング」タブで、チャートを探します。
チャートで、「属性」ノードを選択します。

プロパティ・エディタにチャート属性が表示されます。属性は、グループに編成されます。
グループまたは属性を検索するには:
- グループまたは属性の検索: 「フィルタ・プロパティ」フィールドにキーワードを入力します。プロパティ・エディタにグループまたは属性が表示されます。デフォルトの表示に戻すには、キーワードを削除します。
- 「グループに移動」の使用: 「グループに移動」をクリックして、グループを選択します。デフォルトの表示に戻すには、「グループに移動」を再度クリックして、「すべて開く」を選択します。
チャート属性を編集します。
「保存」をクリックします。

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

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

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

チャート・タイプを切り替えるには:

ページ・デザイナで、チャートを含むページを表示します。
「レンダリング」タブで、「属性」ノードを選択します。

「プロパティ・エディタ - 属性」が表示されます。
グループまたは属性を検索するには:
- グループまたは属性の検索: 「フィルタ・プロパティ」フィールドにキーワードを入力します。プロパティ・エディタにグループまたは属性が表示されます。デフォルトの表示に戻すには、キーワードを削除します。
- 「グループに移動」の使用: 「グループに移動」をクリックして、グループを選択します。デフォルトの表示に戻すには、「グループに移動」を再度クリックして、「すべて開く」を選択します。
「チャート」セクションを検索します。
「タイプ」で、切り替えるチャート・タイプを選択します。たとえば、「組合せ」などです。

属性の詳細は、フィールドレベル・ヘルプを参照してください。
「レンダリング」タブで、「シリーズ」ノードを選択します。

「プロパティ・エディタ - シリーズ」が表示されます。
1. すべての必要な列マッピングの列が定義されていることを確認します。
  
  ノート:
  
  列マッピングはチャート・タイプごとに異なる場合があるため、選択したチャート・タイプですべての必要な列マッピングが定義されるようにする必要があります。
2. 「タイプ」で、チャート・シリーズ・タイプを選択します。たとえば、「棒の範囲」などです。
  
  ノート:
  
  同じデータ・プロットでの異なるタイプのシリーズの組合せをサポートするのは、一部のチャート・タイプのみです。「シリーズ・タイプ」属性は、組合せチャート、極チャート、レーダー・チャートおよびレンジ・チャートのチャート・タイプの場合にのみ表示されます。
「保存」または「ページの保存と実行」をクリックします。

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

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

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

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

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

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

自動リフレッシュ更新を有効化するには:

ページ・デザイナでページを表示します。
1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
2. アプリケーションを選択します。
3. ページを選択します。
ページ・デザイナが表示されます。
「レンダリング」タブで、チャートを含むリージョンを見つけて、「属性」ノードを選択します。
属性がプロパティ・エディタに表示されます。
「自動リフレッシュ」を検索します。
「自動リフレッシュ」で、「オン」を選択します。
「保存」をクリックします。

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

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

リフレッシュ動的アクションを作成するには:

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

ページ・デザイナは、次に必要なアクションを示します。エラーが発生した場合は、「保存」ボタンの横に「メッセージ」が表示されます。「メッセージ」アイコンをクリックすると、すべてのエラーを示すダイアログが表示されます。エラーを選択すると、プロパティ・エディタの関連する属性がハイライトされます。
プロパティ・エディタで、次の動的アクション属性を編集します。

ヒント:

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

関連項目:

動的アクションの管理

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

12.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を参照してください。

関連項目:

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

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