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

ヒント:

AnyChartチャートは、レガシー・アプリケーション・コンポーネントです。レガシー・コンポーネントは引き続きOracleでサポートされますが、Oracle JETチャートに基づく新しいチャートを作成することをお薦めします。チャートの作成を参照してください。

Oracle Application Expressのレガシー・チャートは、AnyChart HTML5 Chart ComponentとAnyChart Flash Chart Componentをベースにしています。

トピック:

24.2.1 チャート・タイプについて

Oracle Application ExpressのHTML5チャートとFlashチャートのサポートは、AnyChart HTML5 Chart ComponentとAnyChart Flash Chart Componentをベースにしています。AnyChartはフレキシブルなFlashおよびJavaScriptベースのソリューションで、開発者は動きがありコンパクトでインタラクティブなチャートを作成できます。

トピック:

24.2.1.1 HTML5チャートについて

Oracle Application ExpressのHTML5チャートのサポートは、AnyChart HTML5 Chart Componentをベースにしています。HTML5チャートはJavaScriptチャート・エンジンを使用し、SVG形式のチャートをレンダリングします。Flashは最新のモバイル・デバイスのほとんどでレンダリングできませんが、現在は新しいHTML5チャート作成ソリューションを利用して、チャートをモバイル・アプリケーションに組み込むことができます。HTML5チャートは、次のモバイル・プラットフォームの一般的なブラウザと互換性があります。

Android: バージョン3.1、3.2、4.0、4.0.3および4.1
IOS (iPhone、iPad、iPod Touch): Safari 3.2以上が必要

ヒント:

詳細は、http://6.anychart.com/products/anychart/docsを参照してください。

24.2.1.2 Flashチャートについて

Oracle Application ExpressのFlashチャートのサポートは、AnyChart Flash Chart Componentをベースにしています。Flashチャートはブラウザでレンダリングされ、使用するにはFlash Player 9以上が必要です。AnyChart 6.0では、FlashチャートはFLASH_PREFERREDレンダリング・タイプを使用してレンダリングされます。チャートを表示するデバイスでFlash Playerを使用できない場合(iPhoneで表示されるページなど)、AnyChartは自動的にHTML5チャート・エンジンに切り替え、SVGベースのチャートを表示します。

24.2.2 チャートのSQL問合せの作成

この項では、アプリケーション・ビルダーでのチャートの作成についてサポートされる構文を説明します。

トピック:

24.2.2.1 標準チャート構文

アプリケーション・ビルダーでチャートを定義するには、ウィザードを使用します。ほとんどのチャート・ウィザードでは、チャート・タイプを選択し、次の構文を使用してSQL問合せを指定します。

SELECT link, label, value
FROM   ...

内容は次のとおりです。

linkはURLです。
labelは、バーに表示されるテキストです。
valueは、バー・サイズを定義する数値列です。

次に例を示します。

SELECT null, last_name, salary
FROM   employees
WHERE  DEPARTMENT_ID = :P101_DEPARTMENT_ID

24.2.2.2 ダイアル・チャート構文(FlashおよびHTML5)

ダイアル・チャートを作成するには、ダイアル・チャート・タイプを選択し、次の構文を使用してSQL問合せを指定します。

SELECT value , maximum_value [ ,low_value [ ,high_value] ]
FROM   ...

内容は次のとおりです。

valueは、ダイアルの開始位置です。
maximum_valueは、ダイアルでの推定最高位置です。
low_valueおよびhigh_valueは、履歴上の最低値および最高値です。

次に例を示します。

SELECT dbms_random.value(500, 1200), 1300, dbms_random.value(100, 200)
FROM DUAL

24.2.2.3 複数シリーズ構文(FlashおよびHTML5)

列チャートおよび行チャートには、1つのSQL問合せで複数シリーズを定義できます。これらのチャート・タイプのシリーズ名は、問合せ内の関連する列別名から導出されます。複数シリーズのチャートを定義するには、次の構文を使用します。

SELECT link, label, series_1_value [, series_2_value [, ...]]
FROM   ...

24.2.2.4 レンジ・チャート構文(FlashおよびHTML5)

レンジ・チャートは、各バーに2つの値が必要です。レンジ・チャートを作成するには、チャートを作成し、次の構文を使用してSQL問合せを提供します。

SELECT link, label, low_value, high_value 
FROM   ...

24.2.2.5 散布チャート構文(FlashおよびHTML5)

散布チャートは、各ポイントにx値およびy値が必要です。レンジ・チャートを作成するには、チャートを作成し、次の構文を使用してSQL問合せを提供します。

SELECT link, label, x_value, y_value 
FROM   ...

24.2.2.6 ローソク足チャート構文(FlashおよびHTML5)

ローソク足チャートには、各ローソク足に始値、安値、高値および終値が必要です。ローソク足チャートを作成するには、チャートを作成し、次の構文を使用してSQL問合せを指定します。

SELECT link, label, open, low, high, close
FROM   ...

24.2.2.7 ガント・チャート構文(Flashのみ)

プロジェクト・ガント・チャートでは、各タスクのタスク名、タスクID、親タスクID、実際の開始日と終了日、および進捗の値が必要になります。計画開始日と計画終了日の2つの値も必要に応じて使用できます。プロジェクト・ガント・チャートを作成するには、Flashチャートを作成し、次の構文を使用してSQL問合せを指定します。

SELECT link, task_name, task_id, parent_task_id, actual_start_date, actual_end_date, progress
FROM   ...

リソース・ガント・チャートでは、各タスクのリソースID、リソース名、親リソースID、および実際の開始日と終了日の値が必要になります。リソース・ガント・チャートを作成するには、Flashチャートを作成し、次の構文を使用してSQL問合せを指定します。

SELECT link, resource_id, resource_name, resource_parent_id, actual_start_date, actual_end_date
FROM   ...

リソース・ガント・チャートで親子階層データを表すには、START WITH..CONNECT BY構文を使用してSQL問合せを指定します。

SELECT link,
           resource_id,
           resource_name,
           resource_parent_id,
           actual_start_date,
           actual_end_date,
FROM ...
START WITH resource_parent_id IS NULL
CONNECT BY PRIOR resource_id = resource_parent_id
ORDER SIBLINGS BY resource_name

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

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

注意:

レガシーAnyChartチャートは、レガシー・アプリケーション・コンポーネントです。レガシー・コンポーネントは引き続きOracleでサポートされますが、かわりにOracle JETデータ視覚化に基づく新しいチャートを作成することをお薦めします。

ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
アプリケーションを選択します。
「ページの作成」をクリックします。
「ページの作成」で、次のステップを実行します。
1. ユーザー・インタフェース: ページのユーザー・インタフェースを選択します。
2. ページ・タイプの選択: 「レガシー・ページ」を選択して、「AnyChartチャート」を選択します。
「チャート・タイプ」で、次のステップを実行します。
1. チャートのレンダリング: チャート・タイプを選択します。
2. チャート・タイプ: チャート・タイプを指定します。チャート・タイプによっては、追加で選択するように求められる場合があります。
3. 「次へ」をクリックします。
「チャート・タイプ」でチャート・タイプを選択し、「次へ」をクリックします。
「ページおよびリージョン属性」で、次のステップを実行します。
1. ページ番号: チャートを作成するページ番号を入力します。
2. ページ名: ページ名を入力します。
3. ページ・モード: ページ・モードを選択します。
  詳細は、フィールドレベル・ヘルプを参照してください。
4. ブレッドクラム: ページでブレッドクラム・ナビゲーション・コントロールを使用するかどうか、およびどのブレッドクラム・ナビゲーション・コントロールを使用するかを選択します。
5. 「次へ」をクリックします。
「ナビゲーションのプリファレンス」で、このページに含めるナビゲーションのタイプを指定し、「次へ」をクリックします。ナビゲーション・オプション(ナビゲーション・メニューまたはタブなど)はカレント・アプリケーションのテーマに応じて決まります。
「チャート属性」で、該当する属性を指定します。
ヒント:
表示される属性は、チャート・タイプによって異なります。属性の詳細は、フィールドレベル・ヘルプを参照してください。
「ソース」で、次のステップを実行します。
チャートを表示するためのデータを戻す問合せを入力します。必要な問合せフォーマットは、チャート・タイプに応じて異なります。
1. SQL問合せ、またはSQL問合せを戻すPL/SQLファンクションを入力: チャートに移入するSQL問合せを指定します。
2. 問合せは次のいずれかの方法で指定します。
  - 表示されているフィールドにSQL問合せを入力します。
  - 「問合せの作成」ボタンをクリックします。ビルド・チャート問合せウィザードが表示されたら、画面に表示されるステップに従います。
3. 問合せの検証: チャート問合せを検証するかどうかを指定します。可能な場合は常に問合せを検証する必要があります。ただし、セッション内でアイテムを参照する場合は、ページを実行するまでこれを行うことはできません。このような場合は、検証しないで保存します。
4. 送信するページ・アイテム: チャート・データが各リクエストで読み取られるときにセッション・ステートに設定される、カレント・ページのページ・アイテムのカンマ区切りリストを入力します。
5. 最大行数: チャートの表示に使用する行の最大数を入力します。
6. データが見つからなかった場合のメッセージ: 問合せによって行が戻されない場合に使用するテキストを入力します。
7. 関連するチャート属性を指定します。
  属性の詳細は、フィールドレベル・ヘルプを参照してください。
「作成」をクリックします。

関連項目:

24.2.4 ページ・デザイナでのチャートの管理

この項では、ページ・デザイナでチャートを作成および編集する方法について説明します。

トピック:

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

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

ページ・デザイナでアイテムを含めるページを表示します。
ギャラリから「ギャラリ・メニュー」をクリックして、「レガシー・コンポーネントの表示」を選択します。
ギャラリで、チャート - AnyChart [レガシー]を右クリックして「追加先」を選択し、適切な位置を選択します。
ヒント:
ギャラリで、マウスを使用してチャート - AnyChart [レガシー]を選択して、「レイアウト」タブの適切な位置までドラッグすることもできます。
ページ・デザイナは、次に必要なアクションを示します。

「メッセージ」タブには、対応する必要のあるメッセージを示す赤または黄色のバッジが表示されます。「メッセージ」タブには、次の2つのタイプのメッセージが表示されます。
- エラー - エラー・メッセージは赤で表示されます。エラー・メッセージを選択すると、プロパティ・エディタに関連する属性が赤で表示されます。ページを保存する前にエラーに対処する必要があります。
- 警告 - 警告メッセージは黄色で表示されます。警告メッセージを選択すると、プロパティ・エディタで、関連する属性が黄色で表示されます。ページを保存する前にエラーに対処する必要があります。警告メッセージには対処しないでページを保存できることに注意してください。
チャート属性を編集します。
ヒント:
属性の詳細は、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックして、参照してください。
1. 「レンダリング」タブで、チャートを探して「属性」ノードを選択します。
  プロパティ・エディタに、チャートの属性が表示されます。
2. 属性を編集します。
シリーズを編集します。
1. 「レンダリング」タブで、「シリーズ」ノードを選択します。
  プロパティ・エディタにシリーズ属性が表示されます。
2. 属性を編集します。
「保存」をクリックします。

関連項目:

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

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

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

注意:

ページ・デザイナを使用して、非推奨のSVGチャート・タイプを編集することはできません。

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

ページ・デザイナで、チャートを含むページを表示します。
「レンダリング」タブで、チャートを探して「属性」ノードを選択します。
プロパティ・エディタですべての属性を表示するには、「すべて表示」をクリックします。
グループまたは属性を検索するには、「フィルタ・プロパティ」フィールドにキーワードを入力します。
チャート属性を編集します。
ヒント:
属性の詳細は、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックして、参照してください。
「保存」をクリックします。

注意:

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

24.2.4.3 HTML5チャートからFlashチャートへの切替え

HTML5チャートの作成後は、「チャート属性」ページでチャート属性を編集することによって、そのレンダリングをFlashに切り替えることができます。

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

ページ・デザイナで、チャートを含むページを表示します。
「レンダリング」タブで、「属性」ノードを選択します。
「プロパティ・エディタ - 属性」が表示されます。
「外観」セクションを開きます。
「外観」の「レンダリング」で、「Flashチャート」を選択します。
属性の詳細は、フィールドレベル・ヘルプを参照してください。
「保存」をクリックします。

関連項目:

24.2.4.4 非同期更新の有効化

チャート属性ページで「非同期更新」属性を有効するか、リフレッシュ・アクションとともに動的アクションを使用すると、SVGチャート、FlashチャートおよびHTML5チャートで情報を監視できます。

トピック:

24.2.4.4.1 非同期更新属性の有効化

「非同期更新」属性を有効にすると、チャートが更新され、指定した時間間隔内に基礎となるデータで行われた変更が反映されます。

非同期更新を有効にするには、次のステップを実行します。

ページ・デザイナでアイテムを含めるページを表示します。
「レンダリング」タブで、チャートを探して「属性」ノードを選択します。
プロパティ・エディタに属性が表示されます。
プロパティ・エディタですべての属性を表示するには、「すべて表示」をクリックします。
グループまたは属性を検索するには、「フィルタ・プロパティ」フィールドにキーワードを入力します。
「自動リフレッシュ」を探して「はい」を選択します。
「間隔」を見つけて、リフレッシュ間隔を秒単位で指定します。
「保存」をクリックします。

注意:

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

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

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

ページ・デザイナでアイテムを含むページを表示します。
左ペインで「動的アクション」タブをクリックします。
「動的アクション」で、「イベント」を右クリックし、「動的アクションの作成」を選択します。
プロパティ・エディタに動的アクション属性が表示されます。

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

注意:

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

24.2.5 レガシー・コンポーネント・ビューでのチャートの管理

開発者は、コンポーネント・ビューでチャートを作成および管理できます。

トピック:

関連項目:

レガシー・コンポーネント・ビューでのページの管理

24.2.5.1 コンポーネント・ビューでのチャートの追加

コンポーネント・ビューで既存ページにチャートを追加するには、次のステップを実行します。

ページに移動します。
新しいリージョンを作成します。「リージョン」で、「作成」アイコンをクリックします。
「リージョンの作成」ウィザードが表示されます。
「リージョンの作成」で、「チャート」を選択して「次へ」をクリックします。
「チャート・タイプ」で、次のステップを実行します。
1. チャートのレンダリング: チャート・タイプを選択します。
2. チャート・タイプ: チャート・タイプを指定します。チャート・タイプによっては、追加で選択するように求められる場合があります。
3. 「次へ」をクリックします。
「表示属性」で、次のステップを実行します。
1. タイトル - リージョンのタイトルを入力します。選択するリージョン・テンプレートにリージョン・タイトルが表示されると、このタイトルが表示されます。
2. リージョン・テンプレート - リージョンのタイトルを入力します。選択するリージョン・テンプレートにリージョン・タイトルが表示されると、このタイトルが表示されます。
3. 親リージョン - 新しいリージョンが属する親リージョンを定義します。
4. 表示ポイント: このリージョンの表示ポイントを指定します。詳細は、フィールドレベル・ヘルプを参照してください。
  詳細は、フィールドレベル・ヘルプを参照してください。
5. 「次へ」をクリックします。
「チャート属性」で、適切な属性を指定し、「次へ」をクリックします。
属性の詳細は、フィールドレベル・ヘルプを参照してください。
「ソース」で、次のステップを実行します。
1. 問合せは次のいずれかの方法で指定します。
  - 表示されているフィールドにSQL問合せを入力します。
  - 「問合せの作成」ボタンをクリックします。ビルド・チャート問合せウィザードが表示されたら、画面に表示されるステップに従います。
2. 関連するチャート属性を指定します。
  属性の詳細は、フィールドレベル・ヘルプを参照してください。
「条件付き表示」で、次のステップを実行します。
1. 条件タイプ: このコンポーネントがレンダリングされるために満たす必要があるリストから、条件タイプを選択します。
2. 認可スキーム: オプションで認可スキームを選択します。このコンポーネントをレンダリングまたは処理するためには、この認可スキームがTRUEと評価される必要があります。
3. 「リージョンの作成」をクリックします。

関連項目:

24.2.5.2 HTML5チャートからFlashチャートへの切替え

HTML5チャートの作成後は、「チャート属性」ページでチャート属性を編集することによって、そのレンダリングをFlashに切り替えることができます。

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

ページに移動します。
チャート属性ページにアクセスします。
1. 「リージョン」で、リージョン名を選択します。
  リージョン定義が表示されます。
2. 「チャート属性」をクリックします。
「チャート・タイプ」で、次のステップを実行します。
1. チャートのレンダリング: 「Flashチャート」を選択します。
2. チャート・タイプ: チャート・タイプを指定します。3Dチャート・タイプはFlashチャートでのみサポートされているため、3Dオプションを使用するにはチャート・タイプを変更する必要がある場合があります。
  属性の詳細は、フィールドレベル・ヘルプを参照してください。
「変更の適用」をクリックします。

関連項目:

24.2.5.3 コンポーネント・ビューでのチャート属性の編集

チャートの作成後は、「チャート属性」ページでチャート属性を編集してチャートの表示を変更できます。

「チャート属性」ページにアクセスするには、次のステップを実行します。

ページに移動します。
チャート属性ページにアクセスします。「リージョン」で、リージョン名を選択します。
対象となる属性を編集します。
属性の詳細は、フィールドレベル・ヘルプを参照してください。
「変更の適用」をクリックします。

関連項目:

24.2.5.4 非同期更新の有効化

トピック:

24.2.5.4.1 非同期更新属性の有効化

「非同期更新」属性を有効にすると、チャートが更新され、指定した時間間隔内に基礎となるデータで行われた変更が反映されます。

非同期更新を有効にするには、次のステップを実行します。

「チャート属性」ページにナビゲートします。
チャート属性ページが表示されます。
「リフレッシュ」までスクロールします。
「非同期更新」で、「はい」を選択します。
「更新間隔」で、チャートの更新間隔(秒)を入力します。最適なパフォーマンスを得るには、2秒を超える間隔を選択します。

注意:

「コンポーネント・ビューでのチャート属性の編集」

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

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

チャートを含むページにナビゲートします。
「動的アクション」セクションで、「作成」をクリックします。
「指定」で、次のステップを実行します。
1. 名前: 動的アクションの名前を入力します。
2. 順序: このコンポーネントの順序を指定します。これによって評価の順序が決まります。
3. 「次へ」をクリックします。
「時期」で、次のステップを実行します。
1. イベント: 動的アクションの起動をトリガするイベントを指定します。
2. 選択タイプ: 動的アクションがいつ起動するかを定義するページ要素の選択タイプを指定します。特定のページ・アイテムの例を表示するには、フィールドレベル・ヘルプを参照してください。
3. 「次へ」をクリックします。
「Trueアクション」で、次のステップを実行します。
1. アクション: 「リフレッシュ」を選択します。
2. 「次へ」をクリックします。
「影響を受ける要素」で、次のステップを実行します。
1. 選択タイプ: 「リージョン」を選択します。
2. リージョン: チャートを含むリージョンを選択します。
3. 「次へ」をクリックします。
「動的アクションの作成」をクリックします。

注意:

「レガシー・コンポーネント・ビューでのページの表示」

24.2.6 SVGチャートのサポートの理解

以前のリリースのOracle Application Expressでは、SVGチャートの作成がサポートされていました。既存のSVGチャートは引き続きサポートされていますが、Oracle Application Expressでは新しいSVGチャートの作成はサポートされなくなりました。

ヒント:

コンポーネント・ビューでのみSVGチャートを編集できます。

トピック:

24.2.6.1 SVGチャートのHTML5へのアップグレード

この項では、SVGチャートをHTML5にアップグレードする際に適用される制限と、アップグレードの手順について説明します。

単一または複数のSVGチャートを自動的にHTML5にアップグレードできます。

トピック:

24.2.6.1.1 SVGチャートのアップグレードの制限事項について

SVGチャートをアップグレードできますが、次の制限事項があります。

軸の書式文字列で定義された数値書式のみが移行されます。日付書式および時間書式は無視されます。
次の項目を含む数値書式の要素が移行されます。
```
0,9,D,G,, (comma),. (period),$,C,L,FM
```
HTML5チャートの各シリーズのラベルは、各シリーズの列の別名から導出されます。これは各シリーズのラベルが「シリーズ名」属性から導出されるSVGチャートによって異なります。
SVGチャートでは、最初のシリーズのラベルがX軸に使用されます。HTML5チャートでは、最初のシリーズでデータのラベルが発生していなくても、すべてのデータが表示されるように拡張されています。

24.2.6.1.2 1つのSVGチャートのHTML5へのアップグレード

SVGチャートをHTML5にアップグレードするには、次のステップを実行します。

ページに移動します。
チャート属性ページにアクセスします。
1. 「リージョン」で、リージョン名を選択します。
  リージョン定義が表示されます。
2. 「チャート属性」をクリックします。
「タスク」リストで、「新しいHTML5チャートへのアップグレード」をクリックします。
「アップグレード」をクリックします。

注意:

「レガシー・コンポーネント・ビューでのページの表示」

24.2.6.1.3 アプリケーション内のすべてのSVGチャートのHTML5へのアップグレード

すべてのSVGチャートをHTML5チャートにアップグレードするには、次のステップを実行します。

ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
アプリケーション・ビルダーのホームページが表示されます。
アプリケーションを選択します。
アプリケーションのホームページが表示されます。
「ユーティリティ」をクリックして、「アプリケーションのアップグレード」をクリックします。
「アプリケーション・サマリーのアップグレード」レポートが表示されます。
「SVGチャートのHTML5チャートへのアップグレード」で、候補オブジェクトの数をクリックします。
アップグレードするオブジェクトを選択し、「アップグレード」をクリックします。

24.2.6.2 SVGチャート・カスケード・スタイルシート・クラスの理解

SVGチャートを作成すると、そのチャートは、現行のテーマに関連付けられたカスケード・スタイルシート(CSS)のクラスに基づいてOracle Application Expressによってレンダリングされます。別のCSSを参照するか、または属性の編集ページのCSSセクションで個々のクラスを上書きして、チャートの外観を変更できます。

次に、サンプル・アプリケーションのダイアル・チャートのCSSクラスの例を示します。この例には、使用可能なすべてのCSSクラスが示されています。クラス名は太字で表示されています。

text{font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;fill:#000000;}
tspan{font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;fill:#000000;}
text.title{font-weight:bold;font-size:14;fill:#000000;}
text.moredatafound{font-size:12;}
rect.legend{fill:#EEEEEE;stroke:#000000;stroke-width:1;}
text.legend{font-size:10;}
#background{fill:#FFFFFF;stroke:none;}
rect.chartholderbackground{fill:#ffffff;stroke:#000000;stroke-width:1;}
#timestamp{text-anchor:start;font-size:9;}
text.tic{stroke:none;fill:#000000;font-size:12}
line.tic{stroke:#000000;stroke-width:1px;fill:none;}
#dial{stroke:#336699;stroke-width:2px;fill:#336699;fill-opacity:.5;}
#dial.alert{fill:#FF0000;fill-opacity:.5;}
#dialbackground{stroke:#000000;stroke-width:none;fill:none;filter:url(#MyFilter);}
#dialcenter{stroke:none;fill:#111111;filter:url(#MyFilter);}
#dialbackground-border{stroke:#DDDDDD;stroke-width:2px;fill:none;filter:url
(#MyFilter);}#low{stroke-width:3;stroke:#336699;}
#high{stroke-width:3;stroke:#FF0000;}
#XAxisTitle{letter-spacing:2;kerning:auto;font-size:14;fill:#000000;text-anchor:middle;}
#YAxisTitle{letter-spacing:2;kerning:auto;font-size:14;fill:#000000;text-anchor:middle;writing-mode:tb;}
.XAxisValue{font-size:8;fill:#000000;}
.YAxisValue{font-size:8;fill:#000000;text-anchor:end;}
.nodatafound{stroke:#000000;stroke-width:1;font-size:12;}
.AxisLine{stroke:#000000;stroke-width:2;fill:#FFFFFF;}
.GridLine{stroke:#000000;stroke-width:0.3;stroke-dasharray:2,4;fill:none;}
g.dataholder rect{stroke:#000000;stroke-width:0.5;}
.legenditem rect{stroke:#000000;stroke-width:0.5;}

表24-15に、サポートされているすべてのCSSクラスを示します。一部のクラスは、特定のチャート・タイプにのみ適用されます。

表 24-15 使用可能なSVGチャートCSSクラス

クラス	説明
`text`	チャートに表示されるテキストの外観を定義します。
`tspan`	チャートに表示されるテキストの外観を定義します。`tspan`は`text`の定義と一致する必要があります。
`text.title`	デフォルトのチャート・テキストを上書きします。このクラスは、タイトル・テキストに使用します。
`text.moredatafound`	より多くのデータが検出されたテキストの外観を定義します。
`rect.legend`	チャート凡例を保持する矩形ボックスを作成します。凡例の枠線を削除するには、`rect.legend`を次のように変更します。 rect.legend{fill:#CCCC99;stroke:none;}
`text.legend`	チャート凡例に表示されるテキストを定義します。
`#background`	SVGプラグイン用のバックグラウンド全体を作成します。枠線なしの単色の立体バックグラウンドを作成するには、`#background`を次のように変更します。 #background{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:2;}
`rect.chartholderbackground`	円グラフおよびダイアル・チャートには適用されません。チャート・データを保持する矩形のバックグラウンドを作成します。バックグラウンドに何も表示しない場合は、`rect.chartholderbackground`を次のように変更します。 rect.chartholderbackground(display:none;)
`#timestamp`	「非同期更新」チャート属性が「はい」に設定されている場合にのみ適用されます。更新タイムスタンプ・テストの外観を制御します。タイムスタンプの表示を無効にするには、「カスタムCSS、インライン」属性で`#timestamp`を次のように定義します。 "#timestamp{display:none;}" 関連項目: 非同期更新の有効化
`text.tic`	ダイアル・チャート専用。ダイアル・チャートの数値を定義します。
`line.tic`	ダイアル・チャート専用。ダイアル・チャートの数値の直下に表示される目盛り線を定義します。
`#dial`	ダイアル・チャート専用。ダイアル・チャートに表示される値を定義します。
`#dial.alert`	ダイアル・チャート専用。別の表示画面を使用してダイアル・チャートにレンダリングされる値(アラート値)を定義します。
`#dialbackground`	ダイアル・チャート専用。ダイアル・チャートのバックグラウンドを作成します。
`#dialcenter`	ダイアル・チャート専用。ダイアル・チャートにダイアルの中心を作成します。
`#dialbackground-border`	ダイアル・チャート専用。`#dialbackground`と連動して特定のグラフィック効果を作成します。
`#low`	ダイアル・チャート専用。チャートに表示されているデータの履歴上の最低水位標を定義します。
`#high`	ダイアル・チャート専用。チャートに表示されているデータの履歴上の最高水位標を定義します。
`#XAxisTitle`	X軸に表示されるタイトルを定義します。
`#YAxisTitle`	Y軸に表示されるタイトルを定義します。
`.XAxisValue`	X軸に表示される値を定義します。
`.YAxisValue`	Y軸に表示される値を定義します。
`.AxisLabel`	軸値に類似しています。
`.nodatafound`	情報を参照できない場合に表示されるテキスト要素を定義します。
`.AxisLine`	負の値を含むチャートの0(ゼロ)を示します。
.`GridLine`	チャートの横線および縦線を作成します。
`g.dataholder rect`	チャートに表示されるすべてのデータに一律のスタイルを適用します。
`.legenditem rect`	凡例内のすべての矩形アイテムに一律のスタイルを適用します。

24.2.6.3 SVGチャート・カスタム・カスケード・スタイルシートの参照

「チャート属性」ページの「CSS」セクションを使用して、チャート用のカスタム・カスケード・スタイルシートを参照できます。外部CSSを参照する場合は、全体を参照するか、または特定のスタイルを上書きできます。

カスタム・チャートCSSを参照するには、次のステップを実行します。

CSSをアプリケーション・ビルダーにアップロードします。
チャートを含むページにナビゲートします。
チャート属性ページにアクセスします。
1. 「リージョン」で、リージョン名を選択します。
  リージョン定義が表示されます。
2. 「チャート属性」をクリックします。
「チャート属性」ページで、CSSセクションまでスクロールします。
「カスタムCSSを使用」で、「はい」を選択します。
外部CSSを排他的に参照するには、次のステップを実行します。
1. 「カスタムCSS (リンク)」で、カスタムCSSへのリンクを入力します。次に例を示します。
```
#IMAGE_PREFIX#themes/theme_4/svg.css
```
2. CSSが排他的に使用されるように指定します。「カスタムCSS、インライン」で、次のように入力します。
```
/**/
```
カスタムCSSを参照し、特定のスタイルを上書きするには、次のステップを実行します。
1. 「カスタムCSS (リンク)」で、カスタム・スタイルシートへのリンクを入力します。次に例を示します。
```
#IMAGE_PREFIX#themes/theme_4/svg.css
```
2. 「カスタムCSS、インライン」で、上書きするカスタムCSSスタイルを入力します。

関連項目:

24.2.6.4 SVGチャートのカスタムCSSスタイル・インラインの指定

「チャート属性」ページの「カスタムCSS、インライン」属性を使用して、デフォルトCSS内の特定のスタイルを上書きできます。

デフォルトのCSS内の特定のスタイルを上書きするには、次のステップを実行します。

チャートを作成します。
ページに移動します。
チャート属性ページにアクセスします。
1. 「リージョン」で、リージョン名を選択します。
  リージョン定義が表示されます。
2. 「チャート属性」をクリックします。
「CSS」までスクロールします。
「カスタムCSSを使用」で、「はい」を選択します。
「カスタムCSS、インライン」で、上書きするカスタムCSSスタイルを入力します。

関連項目:

24.2.6.5 他の言語でのSVGチャートの表示

SVGチャートを他の言語で表示するには、textおよびtspanクラスに正しい言語が反映されるように編集します。

SVGチャートを他の言語で表示するには、次のステップを実行します。

ページに移動します。
チャート属性ページにアクセスします。
1. 「リージョン」で、リージョン名を選択します。
  リージョン定義が表示されます。
2. 「チャート属性」をクリックします。
「CSS」までスクロールします。
「カスタムCSSを使用」で、「はい」を選択します。
「カスタムCSS、インライン」で、textおよびtspanクラスに正しい言語が反映されるように編集します。次の例では、チャートを韓国語に変更する方法を示します。
```
text{font-family:Batang;fill:#000000;}
tspan{font-family:Batang;fill:#000000;}
```

関連項目:

「レガシー・コンポーネント・ビューでのページの表示」

24.2.7 HTMLチャートのサポートの理解

以前のリリースのOracle Application Expressでは、HTMLチャートの作成がサポートされていました。既存のHTMLチャートは引き続きサポートされますが、Oracle Application Expressでは作成ウィザードによるHTMLチャートの新規作成はサポートされなくなりました。新しいHTMLチャートのリージョン・タイプのプラグインは、OTNからダウンロードできます。このプラグインは、ユーザーが自分のアプリケーションでHTMLチャート・リージョンを作成できるようにします。

トピック:

関連項目:

リージョン・タイプ・プラグインのHTMLチャート:

http://www.oracle.com/technetwork/developer-tools/apex/application-express/apex-plug-ins-182042.html#region

24.2.7.1 1つのHTMLチャートのHTML5へのアップグレード

HTMLチャートをHTML5にアップグレードするには、次のステップを実行します。

ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
アプリケーション・ビルダーのホームページが表示されます。
アプリケーションを選択します。
アプリケーションのホームページが表示されます。
ページに移動します。
チャート属性ページにアクセスします。
1. 「リージョン」で、リージョン名を選択します。
  リージョン定義が表示されます。
2. 「チャート属性」をクリックします。
「タスク」リストで、「HTML5チャートへのアップグレード」をクリックします。
「アップグレード」をクリックします。

関連項目:

「レガシー・コンポーネント・ビューでのページの表示」

24.2.7.2 すべてのHTMLチャートのHTML5へのアップグレード

すべてのHTMLチャートをHTML5にアップグレードするには、次のステップを実行します。

ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
アプリケーション・ビルダーのホームページが表示されます。
アプリケーションを選択します。
アプリケーションのホームページが表示されます。
「ユーティリティ」をクリックして、「アプリケーションのアップグレード」をクリックします。
「アプリケーション・サマリーのアップグレード」レポートが表示されます。
「HTMLチャートのHTML5チャートへのアップグレード」で、候補オブジェクトの数をクリックします。
アップグレードするオブジェクトを選択し、「アップグレード」をクリックします。

24.2.8 Flashチャートの保存について

イメージの保存をサポートするには、AnyChartはhttp://www.anychart.comに存在するサーバー側スクリプトを使用する必要があります。イメージの保存を試みると、データはBase64エンコーディングでこのサーバーに送信されます。次に、サーバーでデコードされ、デコードされたレスポンスが戻されます。

チャートの保存をローカルでサポートする場合は、デコーディング・スクリプトをローカル・サーバーでホストする必要があります。Flashチャートでは、AnyChart JavaScriptのファンクションgetPNGを使用する必要もあります。デフォルトでは、チャート・リージョンは埋込みHTMLタグを使用し、AnyChart JavaScriptコールを使用しません。AnyChart JavaScriptコールを使用するには、Flashチャートのリージョン・ソースを変更する必要があります。

関連項目:

ローカルでのFlashチャート保存のサポートを追加する方法については、AnyChartユーザーズ・ガイドでイメージまたはベクター・ファイルとしてのチャート保存に関する説明を参照してください。

24.2.9 FlashおよびHTML5チャートとのカスタムXMLの使用

チャート属性ページには、標準の属性で制御できない追加のチャート設定があります。チャートのルック・アンド・フィールをさらに制御するには、カスタムXMLを使用できます。

カスタムXMLを使用するには、次のステップを実行します。

チャート属性ページにアクセスします。
1. 「リージョン」で、リージョン名を選択します。
  リージョン定義が表示されます。
2. 「チャート属性」をクリックします。
「チャートXML」までスクロールします。
「カスタムXMLの使用」から「はい」を選択します。
カスタムXMLの使用を選択した場合、もう適用されない属性を持つリージョンは非表示となります。これらのリージョンを再度表示するには、「カスタムXMLの使用」で「いいえ」を選択します。
XMLを編集します。
「変更の適用」をクリックします。

ヒント:

サポートされているチャートのXML書式の詳細は、次のサイトのオンラインXMLリファレンスを参照してください。

http://6.anychart.com/products/anychart/docs/