SVGチャートの作成

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

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

トピック:

既存ページへのSVGチャートの追加
新しいページへのSVGチャートの追加
SVGチャート・タイプの概要
SVGチャート・カスケード・スタイルシート・クラスの理解
カスタムSVGチャート・カスケード・スタイルシートの参照
SVGチャートのカスタムCSSスタイル・インラインの指定

参照:

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

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

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

「ページ定義」にナビゲートします。「ページ定義へのアクセス」を参照してください。
「リージョン」で、「作成」アイコンをクリックします。

「リージョンの作成」ウィザードが表示されます。
「チャート」を選択して、「次へ」をクリックします。
「リージョン」で「SVGチャート」を選択します。
「リージョン」でチャート・タイプを選択し、「次へ」をクリックします。「SVGチャート・タイプについて」を参照してください。
「表示属性」では次のようにします。
1. 次の項目を指定します。
  - タイトル
  - リージョン・テンプレート
  - 表示ポイント
  - 順序
  - 列
  詳細を表示する場合は、アイテム・ラベルをクリックします。ヘルプが使用できる場合、アイテム・ラベルの上にカーソルを置くとアイテム・ラベルは赤に変わり、カーソルは矢印と疑問符マークに変わります。「フィールドレベル・ヘルプについて」を参照してください。
2. 「次へ」をクリックします。
「ソース」で、次の項目を指定します。
1. 問合せは次のいずれかの方法で指定します。
  - 表示されているフィールドにSQL問合せを入力します。「チャートのSQL問合せの作成について」を参照してください。
  - 「問合せの作成」ボタンをクリックします。ビルド・チャート問合せウィザードが表示されたら、画面に表示されるステップに従います。
2. 関連するチャート属性を指定します。詳細を表示するには、アイテム・ラベルをクリックします。
「リージョンの作成」をクリックします。

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

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

「作業領域」ホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
アプリケーションを選択します。
「ページの作成」をクリックします。
「チャート」を選択して、「次へ」をクリックします。
「SVGチャート」を選択します。
チャート・タイプを選択し、「次へ」をクリックします。「SVGチャート・タイプについて」を参照してください。
「ページ属性」では、次のステップを実行します。
1. 次の項目を指定します。
  - ページ番号
  - ページ名
  - リージョン・テンプレート
  - リージョン名
  - チャートのカラー・テーマ
  - ブレッドクラム
  詳細を表示する場合は、アイテム・ラベルをクリックします。ヘルプが使用できる場合、アイテム・ラベルの上にカーソルを置くとアイテム・ラベルは赤に変わり、カーソルは矢印と疑問符マークに変わります。「フィールドレベル・ヘルプについて」を参照してください。
2. 「次へ」をクリックします。
タブを含めるかどうかを指定して、「次へ」をクリックします。
「問合せ」で、次のステップを実行します。
1. 問合せは次のいずれかの方法で指定します。
  - 表示されているフィールドにSQL問合せを入力します。「チャートのSQL問合せの作成について」を参照してください。
  - 「問合せの作成」ボタンをクリックします。ビルド・チャート問合せウィザードが表示されたら、画面に表示されるステップに従います。
2. 残りの属性を指定します。詳細を表示するには、アイテム・ラベルをクリックします。
3. 「次へ」をクリックします。
「終了」をクリックします。

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

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

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

チャート・タイプ	説明
棒(横)	シリーズ内の各データ・ポイントが横棒で表される単一シリーズ・ベースの横棒グラフです。 SVGベースです。SVGプラグインが必要です。
棒(縦)	シリーズ内の各データ・ポイントが縦棒で表される単一シリーズ・ベースの縦棒グラフです。 SVGベースです。SVGプラグインが必要です。
集合棒(横)	各データ・ポイントが横棒で表され、共通変数で集計される複数シリーズ・ベースの横棒グラフです（月ごとに集計される部門販売合計など）。 SVGベースです。SVGプラグインが必要です。
集合棒(縦)	シリーズ内の各データ・ポイントが縦棒で表され、共通変数で集計される複数シリーズ・ベースの縦棒グラフです（月ごとに集計される部門販売合計など）。 SVGベースです。SVGプラグインが必要です。
ダイアル - スイープ	角度ゲージとも呼ばれます。このチャートには、最大値の割合または立体領域として表される最大値と比較した絶対値のいずれかを示します。 SVGベースです。SVGプラグインが必要です。
ダイアル	角度ゲージとも呼ばれます。このチャートには、最大値の割合または折れ線で表される最大値と比較した絶対値のいずれかを示します。 SVGベースです。SVGプラグインが必要です。
折れ線	各折れ線がシリーズ内のすべてのデータ・ポイントを表す複数シリーズ・ベースの折れ線グラフです。 SVGベースです。SVGプラグインが必要です。
円	各区分がシリーズ内の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;}

表: 「使用可能なSVGチャートCSSクラス」に、サポートされているすべてのCSSクラスを示します。一部のクラスは、特定のチャート・タイプにのみ適用されます。

使用可能な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を参照するには、次のステップを実行します。

CSSをアプリケーション・ビルダーにアップロードします。詳細は、「カスケード・スタイルシートのアップロード」を参照してください。
チャートを作成します。「SVGチャートの作成」を参照してください。
「ページ定義」にナビゲートします。「ページ定義へのアクセス」を参照してください。
「リージョン」で、リージョン名の横にある「チャート」をクリックします。

チャート属性ページが表示されます。
「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スタイルを入力します。

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

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

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

チャートを作成します。「SVGチャートの作成」を参照してください。
「ページ定義」にナビゲートします。「ページ定義へのアクセス」を参照してください。
「リージョン」で、リージョン名の横にある「チャート」をクリックします。

チャート属性ページが表示されます。
「CSS」までスクロールします。
「カスタムCSSを使用」で、「はい」を選択します。
「カスタムCSS、インライン」で、上書きするカスタムCSSスタイルを入力します。