10.3.8 チャートの編集

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

• チャート属性の編集
  
• チャート・タイプの切替え
  
• 自動リフレッシュの有効化
  
• カスタムJavaScriptとチャートの使用
  カスタムJavaScriptを追加して、チャートのルック・アンド・フィールを制御します。

関連項目:

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

10.3.8.1 チャート属性の編集

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

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

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

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

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

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

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

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

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

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

      ノート:

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

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

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

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

• 「自動リフレッシュ」属性の有効化
  
• リフレッシュ動的アクションの作成
  

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

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

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

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

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

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

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

   ヒント:

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

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

関連項目:

動的アクションの管理

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

ノート:

「サンプル・チャート」サンプル・アプリケーションには、チャートでカスタムJavaScriptを使用する例が多数含まれています。サンプル・アプリケーションを表示するには、「サンプル・アプリケーション」に移動してください。