1. アプリケーション・ビルダー・ユーザーズ・ガイド
  2. データベース・アプリケーション・コンポーネントの管理
  3. チャートの作成

11.4 チャートの作成

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

関連項目:

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

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

11.4.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.4.2 サンプル・チャート

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

サンプル・チャート・サンプル・アプリケーションの9ページにあるサンプル・チャートを次に示します。

sample_charts.pngの説明が続きます
図sample_charts.pngの説明

水平表示と垂直表示を切り替えるには、「水平」および「垂直」をクリックします。2つのデータ系列または3つのデータ系列を表示するには、「積上げ」および積上げ解除をクリックします。

このチャートでは、Store AとAcme Storeの2つのデータ系列が積み上げられて表示され、Y軸に関連付けられており、3つ目のデータ系列Shop Cが第2Y軸に関連付けられて、他の2つのデータ系列の下に別個のチャートとしてレンダリングされています。

チャートに関する情報を表示するには、ページ下部の棒グラフ(積上げラベルおよび積上げカテゴリ)情報リージョンを展開します。

関連項目:

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

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

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

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

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

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

      ヒント:

      コンポーネント・ページは、ページ・レベルの機能を提供し、指定されたアプリケーション内でレポート、フォーム、チャート、カレンダなどを複数回追加できます。機能ページは、アプリケーション・レベルの機能を提供し、アプリケーションごとに1回のみ追加できます。

    2. チャート・タイプを選択します。

      ノート:

      「ガント」を選択した場合は、ガント・チャート・タイプを選択するように求められます。

  5. 「ページおよびリージョン属性」で、次のステップを実行します。
    1. ページ番号: チャート・オブジェクトを表示するページを入力します。
    2. ページ名: ページ名を入力します。
    3. ページ・モード: ページ・モードを選択します。

      • 標準 - ページは標準のApplication Expressアプリケーション・ページとして表示されます。

      • モーダル・ダイアログ: ページはモーダル・ダイアログとして表示されます。モーダル・ダイアログは、エンド・ユーザーが閉じるまで、アクティブでフォーカスされたままになるオーバーレイ・ウィンドウです。基になるページはグレーアウトされ、ダイアログを閉じるまで、エンド・ユーザーは残りのページと対話できません。

    4. ブレッドクラム - ページでブレッドクラム・ナビゲーション・コントロールを使用するかどうかを選択します。
    5. 「次」をクリックします。
  6. 「ナビゲーションのプリファレンス」で、このページに含めるナビゲーションのタイプを指定し、「次へ」をクリックします。ナビゲーション・オプション(ナビゲーション・メニューまたはタブなど)はカレント・アプリケーションのテーマに応じて決まります。

    ヒント:

    次のステップでは、Oracle JETチャートを選択したと想定しています。Oracle JET以外のチャート(ガントなど)を選択した場合、次のステップが異なる場合があります。画面に表示されるステップに従います。

  7. 以降のステップは、「ソース・タイプ」(「表」または「SQL問合せ」)によって異なります。

    • 「ソース・タイプ」が「表」の場合:

      1. 位置: 「ローカル・データベース」を選択します。

      2. ソース・タイプ - 「表」を選択します。

      3. 表/ビューの所有者: チャートを作成している表の所有者を選択します。

      4. 表/ビューの名前: チャートの基になる表またはビューを選択します。

      5. 送信するページ・アイテム: チャート・データが各リクエストで読み取られるときにセッション・ステートに設定される、カレント・ページのページ・アイテムのカンマ区切りリストを入力します。

      6. 最大行数: チャートの表示に使用する行の最大数を入力します。

      7. 「次」をクリックします。

    • 「ソース・タイプ」が「SQL問合せ」の場合:

      1. 位置: 「ローカル・データベース」を選択します。

      2. ソース・タイプ - 「SQL問合せ」を選択します。

      3. SQL問合せ: チャートに使用されるSQL SELECT文を入力します。SQL SELECT文には、少なくとも2つの列が含まれている必要があります。

      4. 送信するページ・アイテム: チャート・データが各リクエストで読み取られるときにセッション・ステートに設定される、カレント・ページのページ・アイテムのカンマ区切りリストを入力します。

      5. 最大行数: チャートの表示に使用する行の最大数を入力します。

      6. 「次」をクリックします。

  8. 「列のマッピング」で、次のステップを実行します。
    1. チャートにマップする列を選択します。表示されるオプションは、選択したチャート・タイプによって異なります。属性についてさらに学習するには、フィールドレベル・ヘルプをクリックしてください。
    2. 「次」をクリックします。
  9. 「作成」をクリックします。

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

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

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

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

ヒント:

外部データ・ソースについてさらに学習するには、REST対応SQL参照の管理およびRESTデータ・ソースの管理を参照してください。

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

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

    ノート:

    「ガント」を選択した場合は、ガント・チャート・タイプを選択するように求められます。

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

    ヒント:

    次のステップでは、Oracle JETチャートを選択したと想定しています。Oracle JET以外のチャート(ガントなど)を選択した場合、次のステップが異なる場合があります。画面に表示されるステップに従います。

  6. 「ソース」で、リモート・データ・ソースを選択します。

    • REST対応SQLサービス: データは、REST対応SQLを使用して接続が定義されるリモート・データベースをソースとします。REST対応SQL参照を作成または保守するには、「共有コンポーネント」→「REST対応SQL」にナビゲートします。

    • RESTデータ・ソース: データは、RESTデータ・ソースを使用して定義されるRESTful Webサービスをソースとします。RESTデータ・ソースは、「共有コンポーネント」内で作成および保守されます。

  7. 以降のステップは、「ソース・タイプ」(「表」または「SQL問合せ」)によって異なります。

    • 「ソース・タイプ」が「表」の場合:

      1. ソース・タイプ - 「表」を選択します。

      2. 表/ビューの所有者: チャートを作成している表の所有者を選択します。

      3. 表/ビューの名前: チャートの基になる表またはビューを選択します。

      4. 送信するページ・アイテム: チャート・データが各リクエストで読み取られるときにセッション・ステートに設定される、カレント・ページのページ・アイテムのカンマ区切りリストを入力します。

      5. 最大行数: チャートの表示に使用する行の最大数を入力します。

      6. 「次」をクリックします。

    • 「ソース・タイプ」が「SQL問合せ」の場合:

      1. ソース・タイプ - 「SQL問合せ」を選択します。

      2. SQL問合せ: チャートに使用されるSQL SELECT文を入力します。SQL SELECT文には、少なくとも2つの列が含まれている必要があります。

      3. 送信するページ・アイテム: チャート・データが各リクエストで読み取られるときにセッション・ステートに設定される、カレント・ページのページ・アイテムのカンマ区切りリストを入力します。

      4. 最大行数: チャートの表示に使用する行の最大数を入力します。

      5. 「次」をクリックします。

  8. 「列のマッピング」で、次のステップを実行します。
    1. チャートにマップする列を選択します。表示されるオプションは、選択したチャート・タイプによって異なります。属性についてさらに学習するには、フィールドレベル・ヘルプをクリックしてください。
    2. 「次」をクリックします。
  9. 「作成」をクリックします。

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

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

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

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

  1. ページ・デザイナで、チャートを含むページを表示します。
  2. 中央ペインの下部にあるギャラリで、「リージョン」をクリックして「チャート」を探します。
    ギャラリに、ページに追加できるすべてのコントロールまたはコンポーネントが一覧表示されます。カーソルをコントロールまたはコンポーネントにあわせると、説明するツールチップが表示されます。
  3. ギャラリから、次のステップを実行します。
    1. 「チャート」を右クリックしてコンテキスト・メニューを表示します。
    2. 「追加先」を選択して目的の位置を選択します。

    ヒント:

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

  4. ページ・デザイナでは、次に行う処理が示されます。エラーがある場合は、「メッセージの表示」アイコンがページ開発者ツールバーに表示されます。
    1. ページ・デザイナ・ツールバーの「メッセージの表示」アイコンをクリックします。
      「メッセージ」ダイアログに、対処する必要があるエラーが表示されます。
    2. エラーを選択すると、プロパティ・エディタの関連する属性がハイライトされます。
  5. シリーズを編集します。
    1. チャートの下の「レンダリング」タブで、「シリーズ」ノードを展開し、新しいシリーズを選択します。
    2. 「シリーズ」ノードで、シリーズを選択します。
    3. ソース、位置: 使用するデータベースの場所を選択します。オプションは次のとおりです。

      • ローカル・データベース: データはローカル・データベースをソースとします。(この場所はデフォルトで選択されています。)

      • REST対応SQL: データは、REST対応SQL参照を使用して接続が定義されるリモート・データベースをソースとします。

      • RESTソース: データは、RESTデータ・ソースを使用して定義されるRESTful Webサービスをソースとします。

    4. 列のマッピング、ラベル: チャートのx軸のラベルを定義するために使用する列名を選択します。株価チャートの場合、株価情報を時間軸に表示するには、列のデータ型が日付/タイムスタンプである必要があります
    5. 列のマッピング、値: このチャートの値を定義するために使用する列名を選択します。ボックス・プロット・チャートの場合、この列を使用して、数値データ・セットの最小値、四分位値、中央値および最大値が定義されます。

    ノート:

    属性のヘルプを表示するには、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックします。

  6. 「軸」ノードを展開します。

    ヒント:

    「軸」ノードは、面グラフ、棒グラフ、バブル・チャート、組合せチャート、折れ線グラフ、面付き折れ線グラフ、極チャート、レーダー・チャート、レンジ・チャート、散布図、株価チャートなどの、軸をサポートするチャート・タイプの場合にのみ表示されます。

    1. チャートの下の「レンダリング」タブで、「軸」ノードを展開します。
    2. 「軸」ノードで、軸を選択します。
    3. 必要な軸属性を編集して、軸の値に適用するデータ書式を定義します。
  7. リージョン属性を編集します。
    1. 左ペイン(「レンダリング」タブ)で、チャートを選択します。
      プロパティ・エディタの「リージョン」タブにリージョン属性が表示されます
    2. プロパティ・エディタでリージョン属性を確認して編集します。
  8. チャート属性を編集します。
    1. プロパティ・エディタで、「属性」タブを選択します。
    2. 必要なチャート属性を編集します。
  9. 「保存」または「ページの保存と実行」をクリックします。

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

11.4.6 チャートの編集

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

関連項目:

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

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

11.4.6.1 チャート属性の編集

チャートには、リージョン属性、チャート属性およびシリーズ属性という3つのタイプの属性があります。「レンダリング」タブでチャートを選択すると、プロパティ・エディタに「リージョン」(リージョン属性を含む)と「属性」(チャート属性を含む)の2つのタブが表示されます。シリーズ属性は、チャートの下の「レンダリング」タブに表示されます。

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

  1. ページ・デザイナでカレンダを含むページを表示します。
    1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
    2. アプリケーションを選択します。
    3. ページを選択します。

    ページ・デザイナが表示されます。

    右ペインのプロパティ・エディタに、「リージョン」と「属性」の2つのタブが表示されます。属性は、グループに編成されます。属性のヘルプを表示するには、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックします。

  2. リージョン属性を編集するには、次のステップを実行します。
    1. 左ペイン(「レンダリング」タブ)で、チャートを選択します。
      プロパティ・エディタの「リージョン」タブにリージョン属性が表示されます
    2. プロパティ・エディタでリージョン属性を確認して編集します。
  3. レガシー・チャートを編集するには、次のステップを実行します。
    1. 左ペイン(「レンダリング」タブ)で、チャートを選択します。
    2. プロパティ・エディタで、「属性」タブを選択します。
    3. プロパティ・エディタでチャート属性を確認して編集します。
  4. シリーズを編集するには:
    1. チャートの下の「レンダリング」タブで、「シリーズ」を選択します。
    2. プロパティ・エディタでシリーズ属性を確認して編集します。
  5. 「保存」をクリックします。

親トピック: チャートの編集

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

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

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

  1. ページ・デザイナで、チャートを含むページを表示します。
  2. 左ペイン(「レンダリング」タブ)で、チャートを選択します。
    プロパティ・エディタ(右ペイン)に2つのタブが表示されます。
  3. チャート属性を編集し、新しいチャート・タイプを選択します。
    1. プロパティ・エディタで、「属性」タブを選択します。
      プロパティ・エディタにチャート属性が表示されます。属性は、グループに編成されます。属性のヘルプを表示するには、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックします。
    2. チャート、タイプ - 切り替えるチャート・タイプを選択します。たとえば、「組合せ」などです。
  4. シリーズを編集します。
    1. チャートの下の「レンダリング」タブで、「シリーズ」を選択します。
      プロパティ・エディタに「シリーズ」タブが表示されます。
    2. 列のマッピング - 必要な列マッピングの列がすべて定義されていることを確認します。

      ノート:

      列マッピングはチャート・タイプごとに異なる場合があるため、選択したチャート・タイプですべての必要な列マッピングが定義されるようにする必要があります。

    3. タイプ - チャート・シリーズ・タイプを選択します。たとえば、「棒の範囲」などです。
      同じデータ・プロットでの異なるタイプのシリーズの組合せをサポートするのは、一部のチャート・タイプのみです。「シリーズ・タイプ」属性は、チャート・タイプ「組合せ」、「極」、「レーダー」および「範囲」についてのみ表示されます。
  5. 「保存」または「ページの保存と実行」をクリックします。

親トピック: チャートの編集

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

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

親トピック: チャートの編集

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

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

  1. ページ・デザイナで、チャートを含むページを表示します。
  2. 左ペイン(「レンダリング」タブ)で、チャートを選択します。
  3. プロパティ・エディタで、「属性」タブを選択します。
  4. 「自動リフレッシュ」を探します。
  5. 「自動リフレッシュ」の「間隔」に、チャートの更新間隔を秒単位で入力します。
    重大なデータベース・パフォーマンスの問題が発生する可能性があるため、2秒などの非常に短い更新間隔はお薦めしません。
  6. 「保存」をクリックします。
11.4.6.3.2 リフレッシュ動的アクションの作成

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

  1. ページ・デザイナで、チャートを含むページを表示します。
  2. 左ペインで「動的アクション」タブをクリックします。
  3. 「動的アクション」で、「イベント」を右クリックし、「動的アクションの作成」を選択します。
  4. ページ・デザイナでは、次に行う処理が示されます。エラーがある場合は、「メッセージの表示」アイコンがページ開発者ツールバーに表示されます。
    1. ページ・デザイナ・ツールバーの「メッセージの表示」アイコンをクリックします。
      「メッセージ」ダイアログに、対処する必要があるエラーが表示されます。
    2. エラーを選択すると、プロパティ・エディタの関連する属性がハイライトされます。
  5. プロパティ・エディタで、次の動的アクション属性を編集します。
    1. 識別、名前 - 動的アクションの名前を入力します。
    2. 実行オプション、順序 - このコンポーネントの順序を指定します。これによって評価の順序が決まります。
    3. 時期、イベント - 動的アクションを起動するイベントを指定します。
    4. 時期、選択タイプ - イベントのトリガーに使用するページ要素または構成体のタイプを選択します。たとえば、プロパティ・エディタで属性を選択して、中央ペインの「ヘルプ」タブをクリックします。

    ヒント:

    属性についてさらに学習するには、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックして、参照してください。

  6. 「レンダリング」タブで、「True」の下の最初のアクションを選択します。
    1. 識別、アクション - 「リフレッシュ」を選択します。
    2. 影響を受ける要素、選択タイプ - 「リージョン」を選択します。
    3. 影響を受ける要素、リージョン - チャートを含むリージョンを選択します。
  7. 「保存」をクリックします。

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

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

ヒント:

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

カスタムJavaScriptを使用するには:

  1. ページ・デザイナでページを表示します。
    ページ・デザイナが表示されます。
  2. 左ペイン(「レンダリング」タブ)で、チャートを選択します。
  3. プロパティ・エディタで、「属性」タブを選択します。
  4. 「詳細」を検索します。
  5. 「詳細」の「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;
}
  6. 「保存」をクリックします。

    ヒント:

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

関連項目:

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

親トピック: チャートの編集