10.3.7 チャートの編集

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

• チャート属性の編集
  チャート・リージョン属性、チャート属性およびシリーズ属性の編集について学習します。
• チャート・タイプの切替え
  チャート属性を編集して、チャート・タイプを変更します。
• 自動リフレッシュの有効化
  「自動リフレッシュ」の「間隔」属性を有効にするか、「リフレッシュ」アクションとともに動的アクションを使用して、チャート情報を監視します。
• カスタムJavaScriptとチャートの使用
  カスタムJavaScriptを追加して、チャートのルック・アンド・フィールを制御します。

関連項目:

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

10.3.7.1 チャート属性の編集

チャート・リージョン属性、チャート属性およびシリーズ属性の編集について学習します。

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

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

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

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

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

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

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

チャート属性を編集して、チャート・タイプを変更します。

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

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

      ノート:

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

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

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

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

• 「自動リフレッシュ」属性の有効化
  「自動リフレッシュ」属性を有効にすると、チャートが更新され、指定した時間間隔内に基礎となるデータで行われた変更が反映されます。
• リフレッシュ動的アクションの作成
  リフレッシュ動的アクションの作成について学習します。

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

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

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

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

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

リフレッシュ動的アクションの作成について学習します。

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

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

   ヒント:

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

6. 「レンダリング」タブで、「True」の下の最初のアクションを選択し、属性を編集します。
   1. 識別、名前 - アクションの動作を識別するアクションの名前を入力します(たとえば、「Refresh Chart」を選択します)。
   2. 識別、アクション - 実行するアクションを指定します(たとえば、「リフレッシュ」を選択します)。
   3. 影響を受ける要素、選択タイプ - このアクションが実行されると影響を受けるページ・コンポーネントのタイプを選択します(たとえば、「リージョン」を選択します)。
   4. 影響を受ける要素、リージョン - チャートを含むリージョンを選択します。
   5. 実行、順序 - このコンポーネントの順序を確認します。これによって実行の順序が決まります。
   6. 実行、イベント - 選択した動的アクション・イベントを確認します(例: Refresh Chart)。
   7. 実行、イベント結果時に実行 - 選択した動的アクション・イベントが指定されます(例: Refresh Chart)。
   8. 実行、初期化時に起動 - このオプションを有効にします。リフレッシュ動的アクションについては、このオプションによって、ページのロード時に動的アクションが実行されます。
7. 「保存」をクリックします。

関連項目:

動的アクションの管理

10.3.7.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";
           return data;
       };
       // Set chart initialization options
       // e.g. Set chart type to Line
       options.type = "line";
       return options;
   }

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

   ヒント:

   サポートされるチャート・オプションの詳細は、Oracle JavaScript Extension Toolkit (JET)のJSDocページのojChartを参照してください。

ノート:

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