10.3 チャートの作成

アプリケーション・ビルダーには、チャートを生成するための組込みウィザードが用意されています。

トピック:

関連項目:

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

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

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

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

関連項目:

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

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

10.3.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つのデータのシリーズの下に個別のチャートとしてレンダリングされます。

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

関連項目:

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

10.3.3 新しいページへのチャートの追加

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

ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
アプリケーションを選択します。
「ページの作成」をクリックします。
「ページの作成」で、次のステップを実行します。
1. ユーザー・インタフェース: ページのユーザー・インタフェースを選択します。
2. ページ・タイプの選択: 「チャート」を選択します。
3. 「次へ」をクリックします。
「チャート・タイプ」は、次のようにします。
1. チャート・タイプ: チャート・タイプを選択します。
  
  ヒント:
  「ガント」を選択した場合は、ガント・チャート・タイプを選択するように求められます。
2. 「次へ」をクリックします。
「ページおよびリージョン属性」で、次のステップを実行します。
1. ページ番号: チャート・オブジェクトを表示するページを入力します。
2. ページ名: ページ名を入力します。
3. ページ・モード: ページ・モードを選択します。
  
  詳細は、フィールドレベル・ヘルプを参照してください。フィールドレベル・ヘルプの表示を参照してください。
4. ブレッドクラム - ページでブレッドクラム・ナビゲーション・コントロールを使用するかどうかを選択します。
5. 「次へ」をクリックします。
「ナビゲーションのプリファレンス」で、このページに含めるナビゲーションのタイプを指定し、「次へ」をクリックします。ナビゲーション・オプション(ナビゲーション・メニューまたはタブなど)はカレント・アプリケーションのテーマに応じて決まります。

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

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

10.3.4 チャートの管理

開発者は、ページ・デザイナでチャート属性を作成および編集できます。

トピック:

関連項目:

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

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

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

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

ページ・デザイナは、次に必要なアクションを示します。
中央ペインで「メッセージ」タブをクリックします。
「メッセージ」タブには、対応する必要のあるメッセージを示す赤または黄色のバッジが表示されます。「メッセージ」タブには、次の2つのタイプのメッセージが表示されます。
- エラー - エラー・メッセージは赤で表示されます。エラー・メッセージを選択すると、プロパティ・エディタに関連する属性が赤で表示されます。ページを保存する前にエラーに対処する必要があります。
- 警告 - 警告メッセージは黄色で表示されます。警告メッセージを選択すると、プロパティ・エディタで、関連する属性が黄色で表示されます。ページを保存する前にエラーに対処する必要があります。警告メッセージには対処しないでページを保存できることに注意してください。
必要なリージョン属性を編集します。
プロパティ・エディタですべての属性を表示するには、「すべて表示」を選択します。

ヒント:
属性の詳細は、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックして、参照してください。
チャート属性を編集します。
1. 「レンダリング」タブで、「属性」ノードを選択します。
  
  プロパティ・エディタに属性が表示されます。
2. 必要なチャート属性を編集します。
シリーズを編集します。
1. 「レンダリング」タブで、「シリーズ」ノードを選択します。
  
  プロパティ・エディタにシリーズが表示されます。
2. シリーズのSQL問合せを入力して、選択したチャート・タイプに対して関連付けるその列のマッピングを定義します。
軸を編集します。
ヒント:
「軸」ノードは、面グラフ、棒グラフ、バブル・チャート、組合せチャート、折れ線グラフ、面付き折れ線グラフ、極チャート、レーダー・チャート、レンジ・チャート、散布チャート、株価チャートなどの、軸をサポートするチャート・タイプの場合にのみ表示されます。
1. 「レンダリング」タブで、「軸」ノードを選択します。
  
  プロパティ・エディタに軸が表示されます。
2. 必要な軸属性を編集して、軸の値に適用するデータ書式を定義します。
「保存」または「ページの保存と実行」をクリックします。

10.3.4.2 ページ・デザイナでのチャート属性の編集

チャートの作成後は、ページ・デザイナでチャート属性を編集してチャートの表示を変更できます。Oracle JETベースのチャートをレガシー・コンポーネント・ビューで管理することはできません。

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

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

10.3.4.3 ページ・デザイナでのチャート・タイプの切替え

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

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

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

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

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

トピック:

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

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

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

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

10.3.4.4.2 ページ・デザイナでのリフレッシュ動的アクションの作成

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

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

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

10.3.5 カスタム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を参照してください。

関連項目:

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