ヘッダーをスキップ
Oracle® Application Expressアプリケーション・ビルダー・ユーザーズ・ガイド
リリース3.2
B53794-04
  目次へ移動
目次		 索引へ移動
索引
前
前 		 次
次		  

チャートの作成

アプリケーション・ビルダーには、HTML、Scalable Vector Graphics (SVG)およびFlashチャートを生成する組込みウィザードがあります。Oracle Application Expressは、この3つのグラフィカル・チャートのみサポートします。

この項に含まれる内容は次のとおりです。


チュートリアルを参照:

Oracle Application Expressアドバンスト・チュートリアルの「積上げ棒グラフの作成方法」

サポートするチャート・タイプの概要

Oracle Application Expressでは、HTML、Scalable Vector Graphics (SVG)、およびFlashの3種類グラフィカル・チャートをサポートしています。

Flashチャートについて

Oracle Application ExpressのFlashチャートのサポートは、Anychart Flashチャート・コンポーネントをベースにしています。開発者は、Macromedia FlashベースのフレキシブルなソリューションであるAnychartを使用して、動きがありコンパクトでインタラクティブなFlashチャートを作成できます。Flashチャートはブラウザでレンダリングされ、使用するにはFlash Player 8以上が必要です。対話モード・レポートで使用されるFlashチャートでは、Flash Playerバージョン9以上が必要です。Anychartの詳細については、次のURLを参照してください。

http://www.anychart.com

SVGプラグインのサポートの概要

SVGは、World Wide Web Consortium (W3C)が策定したXMLベースのWebグラフィックス用言語です。SVGチャートは埋込みタグで定義されます。SVGチャートがアプリケーションに適切なチャート・タイプかどうかを判断する際は、次の点に注意してください。

  • 一部のWebブラウザは、SVGチャートをサポートしていません。

  • SVGチャートをサポートするWebブラウザでは、ほとんどの場合、SVGプラグインをダウンロードする必要があります。

Adobe SVGプラグインは、UTF-8、UTF-16、ISO-8859-1およびUS-ASCIIでエンコードされたデータを処理できます。SVGチャートのエンコードは、データベース・アクセス記述子(DAD)データベース・キャラクタ・セットによって決定されます。DADキャラクタ・セットがUTF8、AL32UTF8、AL16UTF16、WE8ISO8859P1またはUS7ASCII以外の場合、SVGチャートはAdobe SVGプラグインで適切にレンダリングされない場合があります。


関連項目:

「SVGチャートの作成」および「SVGチャートのFlashへの移行について」

チャートのSQL問合せの作成について

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

SELECT link, label, value
FROM   ...

説明:

  • linkはURLです。

  • labelはバー内に表示されるテキストです。

  • valueはバーのサイズを定義する数値列です。

次に例を示します。

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

注意:

既存のチャートのタイプは変更しないでください。かわりに、既存のチャートを削除して再作成してください。

ダイアル・チャート構文

ダイアル・チャートを作成するには、ダイアル・チャート・タイプを選択し、次の構文を使用して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

複数シリーズの構文(Flashのみ)

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

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

レンジ・チャート構文(Flashのみ)

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

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

スキャッタ・チャート構文(Flashのみ)

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

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

ローソク足チャート構文(Flashのみ)

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

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

HTMLチャートの作成

チャートの作成方法は、既存のページにチャートを追加するか、ページにチャートを追加するかによって異なります。このチャート・タイプは、棒で示された各データ・ポイントを持つデータ・シリーズが表示される棒グラフを作成します。

この項に含まれる内容は次のとおりです。

既存ページへのHTMLチャートの追加

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

  1. ページ定義にナビゲートします。「ページ定義へのアクセス」を参照してください。

  2. 「リージョン」で、「作成」アイコンをクリックします。

    「リージョンの作成」ウィザードが表示されます。

  3. 「チャート」を選択して、「次へ」をクリックします。

  4. 「リージョン」で、「HTMLチャート」を選択して「次へ」をクリックします。

  5. 「表示属性」で、次のステップを実行します。

    1. 次の項目を指定します。

      • タイトル

      • リージョン・テンプレート

      • 表示ポイント

      • 順序

      • 列

      詳細を表示するには、アイテム・ラベルをクリックします。ヘルプが利用できる場合は、アイテム・ラベル上にカーソルを重ねると、アイテム・ラベルが赤色に変わり、カーソルが矢印と疑問符に変わります。「フィールドレベル・ヘルプについて」を参照してください。

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

  6. 「ソース」で、次のステップを実行します。

    1. 問合せは次のいずれかの方法で指定します。

      • 表示されているフィールドにSQL問合せを入力します。「チャートのSQL問合せの作成について」を参照してください。

      • 「問合せの作成」ボタンをクリックします。ビルド・チャート問合せウィザードが表示されたら、画面に表示されるステップに従います。

    2. 関連するチャート属性を指定します。詳細を表示するには、アイテム・ラベルをクリックします。

  7. 「リージョンの作成」をクリックします。

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

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

  1. 「ワークスペース」ホームページで、「アプリケーション・ビルダー」アイコンをクリックします。

  2. アプリケーションを選択します。

  3. 「ページの作成」をクリックします。

  4. 「チャート」を選択して、「次へ」をクリックします。

  5. 「リージョン」で、「HTMLチャート」を選択して「次へ」をクリックします。

  6. 「ページ属性」で、次のステップを実行します。

    1. 次の項目を指定します。

      • ページ番号

      • ページ名

      • リージョン・テンプレート

      • リージョンの列

      • ブレッドクラム

      詳細を表示するには、アイテム・ラベルをクリックします。ヘルプが利用できる場合は、アイテム・ラベル上にカーソルを重ねると、アイテム・ラベルが赤色に変わり、カーソルが矢印と疑問符に変わります。「フィールドレベル・ヘルプについて」を参照してください。

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

  7. タブを含めるかどうかを指定して、「次へ」をクリックします。

  8. 「チャート定義」で、次のステップを実行します。

    1. 問合せは次のいずれかの方法で指定します。

      • 表示されているフィールドにSQL問合せを入力します。「チャートのSQL問合せの作成について」を参照してください。

      • 「問合せの作成」ボタンをクリックします。ビルド・チャート問合せウィザードが表示されたら、画面に表示されるステップに従います。

    2. 関連するチャート属性を指定します。詳細を表示するには、アイテム・ラベルをクリックします。

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

  9. 「終了」をクリックします。

SVGチャートの作成

Oracle Application Expressでは、様々なSVGチャートをサポートしています。完全なリストを確認するには、「SVGチャート・タイプについて」を参照してください。

チャートの作成方法は、既存のページにチャートを追加するか、新しいページにチャートを追加するかによって異なります。このチャート・タイプは、棒で示された各データ・ポイントを持つデータ・シリーズが表示される棒グラフを作成します。

この項に含まれる内容は次のとおりです。


関連項目:

「SVGプラグインのサポートの概要」および「SVGチャートのFlashへの移行の概要」

既存ページへのSVGチャートの追加

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

  1. ページ定義にナビゲートします。「ページ定義へのアクセス」を参照してください。

  2. 「リージョン」で、「作成」アイコンをクリックします。

    「リージョンの作成」ウィザードが表示されます。

  3. 「チャート」を選択して、「次へ」をクリックします。

  4. 「リージョン」で「SVGチャート」を選択します。

  5. 「リージョン」でチャート・タイプを選択し、「次へ」をクリックします。「SVGチャート・タイプについて」を参照してください。

  6. 「表示属性」で、次のステップを実行します。

    1. 次の項目を指定します。

      • タイトル

      • リージョン・テンプレート

      • 表示ポイント

      • 順序

      • 列

      詳細を表示するには、アイテム・ラベルをクリックします。ヘルプが利用できる場合は、アイテム・ラベル上にカーソルを重ねると、アイテム・ラベルが赤色に変わり、カーソルが矢印と疑問符に変わります。「フィールドレベル・ヘルプについて」を参照してください。

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

  7. 「ソース」で、次のステップを実行します。

    1. 問合せは次のいずれかの方法で指定します。

      • 表示されているフィールドにSQL問合せを入力します。「チャートのSQL問合せの作成について」を参照してください。

      • 「問合せの作成」ボタンをクリックします。ビルド・チャート問合せウィザードが表示されたら、画面に表示されるステップに従います。

    2. 関連するチャート属性を指定します。詳細を表示するには、アイテム・ラベルをクリックします。

  8. 「リージョンの作成」をクリックします。

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

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

  1. 「ワークスペース」ホームページで、「アプリケーション・ビルダー」アイコンをクリックします。

  2. アプリケーションを選択します。

  3. 「ページの作成」をクリックします。

  4. 「チャート」を選択して、「次へ」をクリックします。

  5. 「SVGチャート」を選択します。

  6. チャート・タイプを選択し、「次へ」をクリックします。「SVGチャート・タイプについて」を参照してください。

  7. 「ページ属性」で、次のステップを実行します。

    1. 次の項目を指定します。

      • ページ番号

      • ページ名

      • リージョン・テンプレート

      • リージョン名

      • チャートのカラー・テーマ

      • ブレッドクラム

      詳細を表示するには、アイテム・ラベルをクリックします。ヘルプが利用できる場合は、アイテム・ラベル上にカーソルを重ねると、アイテム・ラベルが赤色に変わり、カーソルが矢印と疑問符に変わります。「フィールドレベル・ヘルプについて」を参照してください。

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

  8. タブを含めるかどうかを指定して、「次へ」をクリックします。

  9. 「問合せ」で、次のステップを実行します。

    1. 問合せは次のいずれかの方法で指定します。

      • 表示されているフィールドにSQL問合せを入力します。「チャートのSQL問合せの作成について」を参照してください。

      • 「問合せの作成」ボタンをクリックします。ビルド・チャート問合せウィザードが表示されたら、画面に表示されるステップに従います。

    2. 残りの属性を指定します。詳細を表示するには、アイテム・ラベルをクリックします。

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

  10. 「終了」をクリックします。

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

表 7-7に、アプリケーション・ビルダーで使用可能なSVGチャート・タイプを示します。

表 7-7 使用可能なSVGチャート・タイプ

Chart Type 説明

棒(横)

シリーズ内の各データ・ポイントが横棒で表される単一シリーズ・ベースの横棒グラフです。

SVGベースです。SVGプラグインが必要です。

棒(縦)

シリーズ内の各データ・ポイントが縦棒で表される単一シリーズ・ベースの縦棒グラフです。

SVGベースです。SVGプラグインが必要です。

集合棒(横)

各データ・ポイントが横棒で表され、共通変数で集計される複数シリーズ・ベースの横棒グラフです(月ごとに集計される部門販売合計など)。

SVGベースです。SVGプラグインが必要です。

集合棒(縦)

シリーズ内の各データ・ポイントが縦棒で表され、共通変数で集計される複数シリーズ・ベースの縦棒グラフです(月ごとに集計される部門販売合計など)。

SVGベースです。SVGプラグインが必要です。

ダイアル - スイープ

角度ゲージとも呼ばれます。このチャートには、最大値の割合または立体領域として表される最大値と比較した絶対値のいずれかを示します。

SVGベースです。SVGプラグインが必要です。

ダイアル

角度ゲージとも呼ばれます。このチャートには、最大値の割合または折れ線で表される最大値と比較した絶対値のいずれかを示します。

SVGベースです。SVGプラグインが必要です。

Line

各折れ線がシリーズ内のすべてのデータ・ポイントを表す複数シリーズ・ベースの折れ線グラフです。

SVGベースです。SVGプラグインが必要です。

Pie

各区分がシリーズ内の1つのデータ・ポイントを表す単一シリーズ・ベースの円グラフです。

SVGベースです。SVGプラグインが必要です。

積上げ棒(横)

シリーズ内の各データ・ポイントが絶対値で、その値が1つの棒の1区分を表す複数シリーズ・ベースの横棒グラフです。

SVGベースです。SVGプラグインが必要です。

積上げ棒(縦)

シリーズ内の各データ・ポイントが絶対値で、その値が1つの棒の1区分を表す複数シリーズ・ベースの縦棒グラフです。

SVGベースです。SVGプラグインが必要です。

割合積上げ棒(横)

各データ・ポイントがシリーズ内での割合(%)を示し、その割合が1つの棒の1区分を表す複数シリーズ・ベースの横棒グラフです。

SVGベースです。SVGプラグインが必要です。

割合積上げ棒(縦)

各データ・ポイントがシリーズ内での割合(%)を示し、その割合が1つの棒の1区分を表す複数シリーズ・ベースの縦棒グラフです。

SVGベースです。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;}

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

表 7-8 使用可能な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

凡例内のすべての矩形アイテムに一律のスタイルを適用します。

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

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

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

  1. CSSをアプリケーション・ビルダーにアップロードします。詳細は、「カスケード・スタイルシートのアップロード」を参照してください。

  2. チャートを作成します。「SVGチャートの作成」を参照してください。

  3. ページ定義にナビゲートします。「ページ定義へのアクセス」を参照してください。

  4. 「リージョン」で、リージョン名の横にある「チャート」をクリックします。

    チャート属性ページが表示されます。

  5. 「CSS」セクションまでスクロールします。

  6. 「カスタムCSSを使用」で、「はい」を選択します。

  7. 外部CSSを排他的に参照するには、次のステップを実行します。

    1. 「カスタムCSS (リンク)」で、カスタムCSSへのリンクを入力します。次に例を示します。

      #IMAGE_PREFIX#themes/theme_4/svg.css

    2. CSSが排他的に使用されるように指定します。「カスタムCSS、インライン」で、次のように入力します。

      /**/

  8. カスタムCSSを参照し、特定のスタイルを上書きするには、次のステップを実行します。

    1. 「カスタムCSS (リンク)」で、カスタム・スタイルシートへのリンクを入力します。次に例を示します。

      #IMAGE_PREFIX#themes/theme_4/svg.css

    2. 「カスタムCSS、インライン」で、上書きするカスタムCSSスタイルを入力します。

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

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

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

  1. チャートを作成します。「SVGチャートの作成」を参照してください。

  2. ページ定義にナビゲートします。「ページ定義へのアクセス」を参照してください。

  3. 「リージョン」で、リージョン名の横にある「チャート」をクリックします。

    チャート属性ページが表示されます。

  4. 「CSS」までスクロールします。

  5. 「カスタムCSSを使用」で、「はい」を選択します。

  6. 「カスタムCSS、インライン」で、上書きするカスタムCSSスタイルを入力します。

Flashチャートの作成

Flashチャートの作成方法は、既存のページにチャートを追加するか、新しいページにチャートを追加するかによって異なります。


ヒント:

Flashチャートを表示するには、Flash Playerバージョン8以上をインストールする必要があります。対話モード・レポートで使用されるFlashチャートでは、Flash Playerバージョン9以上が必要です。

この項に含まれる内容は次のとおりです。


関連項目:

「Flashチャートについて」および「SVGチャートのFlashへの移行について」を参照してください。

既存ページへのFlashチャートの追加

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

  1. ページ定義にナビゲートします。「ページ定義へのアクセス」を参照してください。

  2. 「リージョン」で、「作成」アイコンをクリックします。

    「リージョンの作成」ウィザードが表示されます。

  3. 「チャート」を選択して、「次へ」をクリックします。

  4. 「リージョン」で、「Flashチャート」を選択します。

  5. 「表示属性」で、次のステップを実行します。

    1. 次の項目を指定します。

      • タイトル

      • リージョン・テンプレート

      • 表示ポイント

      • 順序

      • 列

      詳細を表示するには、アイテム・ラベルをクリックします。ヘルプが利用できる場合は、アイテム・ラベル上にカーソルを重ねると、アイテム・ラベルが赤色に変わり、カーソルが矢印と疑問符に変わります。「フィールドレベル・ヘルプについて」を参照してください。

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

  6. 「チャート・プレビュー」で、チャート属性を構成します。「更新」をクリックすると、プレビューのイメージがリフレッシュされます。

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

  8. 「ソース」で、次のステップを実行します。

    1. 問合せは次のいずれかの方法で指定します。

      • 表示されているフィールドにSQL問合せを入力します。「チャートのSQL問合せの作成について」を参照してください。

      • 「問合せの作成」ボタンをクリックします。ビルド・チャート問合せウィザードが表示されたら、画面に表示されるステップに従います。

    2. 関連するチャート属性を指定します。詳細を表示するには、アイテム・ラベルをクリックします。

  9. 「リージョンの作成」をクリックします。

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

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

  1. 「ワークスペース」ホームページで、「アプリケーション・ビルダー」アイコンをクリックします。

  2. アプリケーションを選択します。

  3. 「ページの作成」をクリックします。

  4. 「チャート」を選択して、「次へ」をクリックします。

  5. 「Flashチャート」を選択します。

  6. 「ページ属性」で、次のステップを実行します。

    1. 次の項目を指定します。

      • ページ番号

      • ページ名

      • リージョン・テンプレート

      • リージョン名

      • ブレッドクラム

      詳細を表示するには、アイテム・ラベルをクリックします。ヘルプが利用できる場合は、アイテム・ラベル上にカーソルを重ねると、アイテム・ラベルが赤色に変わり、カーソルが矢印と疑問符に変わります。「フィールドレベル・ヘルプについて」を参照してください。

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

  7. タブを含めるかどうかを指定して、「次へ」をクリックします。

  8. 「チャート・プレビュー」で、チャート属性を構成します。「更新」をクリックすると、プレビューのイメージがリフレッシュされます。

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

  10. 「問合せ」で、次のステップを実行します。

    1. 問合せは次のいずれかの方法で指定します。

      • 表示されているフィールドにSQL問合せを入力します。「チャートのSQL問合せの作成について」を参照してください。

      • 「問合せの作成」ボタンをクリックします。ビルド・チャート問合せウィザードが表示されたら、画面に表示されるステップに従います。

    2. 残りの属性を指定します。詳細を表示するには、アイテム・ラベルをクリックします。

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

  11. 「終了」をクリックします。

SVGチャートのFlashへの移行の概要

単一または複数のSVGチャートを自動的にフラッシュへ移行できます。

SVGチャートの移行制限について

SVGチャートを移行するには、次の制限に注意してください。

  • 軸の書式文字列で定義された数値書式のみが移行されます。日付書式および時間書式は無視されます。

  • 次の項目を含む数値書式の要素が移行されます。

    0,9,D,G,, (comma),. (period),$,C,L,FM

  • Flashチャートの各シリーズのラベルは、各シリーズの列の別名から導出されます。これは各シリーズのラベルが「シリーズ名」属性から導出されるSVGチャートによって異なります。

  • Flashダイアル・チャートには、割合ではなく実際の値が表示されます。

  • SVGチャートでは、最初のシリーズのラベルがX軸に使用されます。Flashチャートでは、最初のシリーズでデータのラベルが発生していなくても、すべてのデータが表示されるように拡張されています。

SVGチャートのFlashへの移行

SVGチャートをFlashへ移行するには、次のステップを実行します。

  1. ページ定義にナビゲートします。「ページ定義へのアクセス」を参照してください。

  2. 「リージョン」で、リージョン名をクリックします。SVGチャートの左側にリージョン名が表示されます。

    リージョン定義が表示されます。

  3. 「タスク」リストで、「SVGチャートのFlashチャートへの移行」をクリックします。

  4. 「移行」をクリックします。

アプリケーション内のすべてのSVGチャートのFlashへの移行

すべてのSVGチャートをFlashチャートに移行するには、次のステップを実行します。

  1. 「ワークスペース」ホームページにナビゲートします。

  2. 「アプリケーション・ビルダー」アイコンをクリックします。

  3. アプリケーションを選択します。

    アプリケーションのホームページが表示されます。

  4. 「タスク」リストで、「アプリケーション・レポート」をクリックします。

  5. 「ページ・コンポーネント」をクリックします。

  6. 「リージョン」で、「SVGチャートのFlashチャートへの移行」をクリックします。

    SVGチャートのFlashチャートへの移行のページが表示されます。

  7. 特定のチャートを移行するには、移行するチャートを選択して、「チェックした項目の移行」をクリックします。

  8. すべてのチャートを移行するには、「すべて移行」をクリックします。

チャート属性の編集

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

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

  1. ページ定義にナビゲートします。「ページ定義へのアクセス」を参照してください。

  2. 「リージョン」で、チャート・タイプ(「チャート」、「SVGチャート」または「Flashチャート」)をクリックします。

    チャート属性ページが表示されます。

  3. 対象となる属性を編集します。

  4. ページ上の特定のアイテムの詳細を表示するには、アイテム・ラベルをクリックします。

    ヘルプが利用できる場合は、アイテム・ラベル上にカーソルを重ねると、アイテム・ラベルが赤色に変わり、カーソルが矢印と疑問符に変わります。「フィールドレベル・ヘルプについて」を参照してください。

  5. 「変更の適用」をクリックします。


ヒント:

SVGチャート(「チャート・タイトル」属性)のチャート・タイトルを削除すると、チャート凡例の位置と表示に悪影響を及ぼす場合があります。

ナビゲーションの選択肢について

チャート属性ページは3つのセクションに分かれています。これらのセクションにアクセスするには、ページをスクロール・ダウンするか、ページ上部のナビゲーション・ボタンをクリックします。ページ上部のボタンを選択すると、選択されたセクションが表示され、その他のセクションはすべて一時的に非表示になります。ページのすべてのセクションを表示するには、「すべて表示」をクリックします。

FlashチャートとのカスタムXMLの使用

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

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

  1. チャート属性ページにナビゲートします。

    1. ページ定義にナビゲートします。「ページ定義へのアクセス」を参照してください。

    2. 「リージョン」で、チャート・タイプの「Flashチャート」をクリックします。

      チャート属性ページが表示されます。

  2. 「チャートXML」までスクロールします。

  3. 「カスタムXMLの使用」から「はい」を選択します。

    カスタムXMLを使用すると、属性が適用されないリージョンは非表示となることに注意してください。これらのリージョンを再度表示するには、「カスタムXMLの使用」で「いいえ」を選択します。

  4. XMLを編集します。

  5. 「変更の適用」をクリックします。


ヒント:

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

非同期更新の有効化

チャート属性ページの「非同期更新」属性を有効にして、情報を監視するSVGおよびFlashチャートを作成できます。この属性を有効にすると、チャートが更新され、指定した時間間隔内に基礎となるデータで行われた変更が反映されます。

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

  1. SVGまたはFlashチャートを作成します。「SVGチャートの作成」または「Flashチャートの作成」を参照してください。

  2. ページ定義にナビゲートします。「ページ定義へのアクセス」を参照してください。

  3. 「リージョン」で、リージョン名の横にある「チャート」をクリックします。

    チャート属性ページが表示されます。

  4. 「リフレッシュ」までスクロールします。

  5. 「非同期更新」で、「はい」を選択します。

  6. 「更新間隔」で、チャートの更新間隔(秒)を入力します。最適なパフォーマンスを得るには、2秒を超える間隔を選択します。

SVGチャートに「非同期更新」を有効にすると、最終更新を示すタイムスタンプがチャートに表示されます。

「非同期更新」タイムスタンプを無効にするには、次のステップを実行します。

  1. 「チャート属性」ページにナビゲートします。

  2. 「CSS」セクションに移動します。

  3. 「カスタムCSSを使用」で、「はい」を選択します。

  4. 「カスタムCSS、インライン」で、#timestampを次のように編集します。

    #timestamp{display:none;}

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

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

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

  1. 「チャート属性」ページにナビゲートします。詳細は、「チャート属性の編集」を参照してください。

  2. 「CSS」までスクロールします。

  3. 「カスタムCSSを使用」で、「はい」を選択します。

  4. 「カスタムCSS、インライン」で、textおよびtspanクラスに正しい言語が反映されるように編集します。次の例では、チャートを韓国語に変更する方法を示します。

    text{font-family:Batang;fill:#000000;}
tspan{font-family:Batang;fill:#000000;}
  前
前 		 次
次
  目次へ移動
目次		 索引へ移動
索引