INDEX； HTML基本編 はじめに サンプルグラフ等 1.アプリケーションの構成 2.システム構成（環境） 3.グラフライブラリーXML/SWF Chartsのインストール 4.グラフの作成方法 5.出力フラッシュグラフ（結果） 6.Reference（XMLリファレンスマニュアル） リファレンス和訳 7.特記事項 CGI応用動的XML編 |
TARGET；
≫xml/swf charts Ver5の作成方法 |
はじめに 本ページは、www.maani.usサイトのグラフライブラリーXML/SWF Charts*（以下XML/SWF Chartsと言う）を使用して フラッシュグラフ（SWF)の作成方法を紹介します。 * XML/SWF Chartsは、www.maani.usが著作権を持っています。 FLASH Graph（フラッシュグラフ）を作成するためのWebページ（スクリプト言語）は、HTML、Perl、PHP、ASPやCFML等が可能です。 グラフライブラリー「XML/SWF Charts」を用いると、HTMLとXMLで、FLASH Graph（フラッシュグラフ）が簡単、容易に作成することができます。 XML/SWF Chartsで対応しているグラフの種類は、下表のとおりです。 表内のグラフ名をクリックすると、サンプルグラフ(日本語対応）とXMLコードを表示します。コードをコピーする場合は、UTF-8で保存してください。
| Line(折れ線グラフ） | Column（縦棒グラフ） | Stacked Column（積み重ね縦棒グラフ） |
| Floating Column（浮遊縦棒グラフ） | 3D Column（3D縦棒グラフ） | Stacked 3D Column（積み重ね3D縦棒グラフ） |
| Parallel 3D Column（並列3D縦棒グラフ） | Pie（円グラフ） | 3D Pie（3D円グラフ） |
| Bar（横棒グラフ） | Stacked Bar（積み重ね横棒グラフ） | Floating Bar（浮遊横棒グラフ） |
| Area（面グラフ） | Stacked Area（積み重ね面グラフ） | Candlestick（ストックグラフ） |
| Scatter（分散グラフ） | Polar （極グラフ） | Mixed（混合グラフ） |
| Composite (複合グラフ) | Joined（結合グラフ）（サンプルなし） | ライブアップデート機能 |
１．アプリケージョンの構成
グラフ作成アプリケージョンの構成は、以下のとおりです。
|
|
（説明）
（１）漢字FONT（日本語FONT)は、「Microsoft Sans Serif」（Windows標準）を使用します。(2007.4.29訂正） 日本語を表示するためには、Arial以外を使用します（fontキー）。明示的に、使用する場合は、 "ＭＳ ゴシック", "ＭＳ 明朝", "ＭＳ Ｐゴシック", "ＭＳ Ｐ明朝"および"魚石行書"（PC Windows環境) が指定できます。 XML/SWF Chartsのデフォルトは「Arial」です。7.特記事項参照。 （２）グラフは、フラッシュSWF形式です。表示するためには、FLASH Player6 以上が必要です。 （３）グラフを作成表示するためのWebページ（スクリプト言語）は、HTMLのみ,Perl,PHP,ASP,CFML等を使用できます。 （４）グラフ定義データは、XMLファイルを使用し、使用コードはUTF-8です。UTF-8は、Windowsのメモ帳で扱えます。 （５）ファイル構成（XML/SWF Chartsライブラリー以外は、自分で作成、準備します） XML/SWF Chartsライブラリー(下図の*1)、１Webページ（HTML 下図の*2)および１XMLファイル(下図の*3)が、最小構成です。（６）起動方法例（テスト環境のサンプルWebページ) http://127.0.0.1/xmlswf-chart/barchart-sample1.html
表2 ファイル構成例 [ ]：フォルダ [xmlswf-chart] （ローカルサーバテスト環境パス C:\Inetpub\wwwroot\xmlswf-chart) +---[charts] ←XML/SWF Chartsライブラリー *1 +---[charts_library] ←グラフ部品SWFのライブラリー +---.DS_Store ← *1 +---arno.swf ←等グラフ部品SWF 18ファイル *1 +---charts.swf ←グラフ作成メインSWF *1 +---[Jcode] ←日本語変換ルーチンJcode.pmの一部。右参照。（注１） +---barchart-sample1.html ←サンプルグラフ作成Webページ1（注２） *2 +---linechart-sample2-2.html ←サンプルグラフ作成Webページ2-2（注３） +---Jcode.pm ←日本語変換ルーチン（V‐0.87）（注１） +---swfchart_write.js ←FLASHコントロールアクティブ化対応のobjectタグ書き出し +---sample1_bar.xml ←サンプルグラフ定義データXML（コードはUTF-8)（注２） *3 +---sample-xml1.cgi ←データ定義XML作成CGI（動的XML作成１）（注３） +---sample-xml2.cgi ←データ定義XML作成CGI（動的XML作成２）（注３） +---xml-swf_howtograph.html ←本ページ +---graph-data2.csv ←グラフデータファイル（sample-xml2.cgiと対） （注１）Jcode.pmは、Jcode.pmがインストールできない環境の場合、 私用ライブラリーとして使用します。 Jcode.pmは、PerlでXMLを動的に生成する場合必要になります。 Jcode.pmのファイル構成（私用ライブラリー使用） +---[Jcode] +---[Unicode] +---Constants.pm +---NoXS.pm +---Constants.pm +---H2Z.pm +---Tr.pm +---Jcode.pm （※１）Jcode.pm V 0.87を使用 （※２）私用ライブラリー使用方法 例 use lib qw(./); #UNIX（相対パス） use lib qw(c:/Inepub/wwwroot/xmlswf-chart); #Windowsの場合、絶対パス） （注２）縦棒グラフサンプル。sample1_bar.xmlと対。ここを参照。 （注３）折れ線グラフサンプル。sample-xml1.cgiと対。 FLASHコントロールアクティブ化対応版。ここを参照。 ※ *1,*2,*3は、最小構成ファイル２．システム構成（動作確認マシン環境）
表3 システム構成
OS
(サーバー)・Windows2003 Server
・WindowsXP Pro+IIS5
・Windows98SE+PWS確認OS 必要ソフト
(サーバ）・Active Perl(5.6.1)*1
・Jcode.pm(0.87)*2
・XML/SWF Charts*1,*2：Perl,Jcode.pmは、基本編では未使用
()内の数字は使用バージョンクライアント ・InternetExplorler5.5および6.0-SP2
・Windows Trule TYpe FONT；
"Microsoft Sans Serif"/"Arial" *3
・Adobe Flash Player 9 *4
*4：Flash Playerは、6以上が必要です。３．グラフライブラリーXML/SWF Chartsのインストール
XML/SWF Chartsのダウンロードは、ここ（英語サイト）より行います。 Windowsの場合、zip形式ファイルをダウンロードします。 ダウンロード後、解凍し任意の場所に配置します。これでインストールは終わりです。
 |
４．グラフの作成方法（例 縦棒グラフ-Column）
XML/SWF Chartを用いたグラフの作成方法について説明します。ここのサンプルのWebページは、HTMLのみで作成しています。 実際のグラフデータは、データベース等から読み込み、編集が必要になります。この場合はCGIで作成ことが現実的でしょう。 CGIのサンプルアプリケーションは、CGI応用動的XML編
参照。
XMLの詳細は、www.maani.usサイトのReference（XML/SWF ChartsのXML記述仕様（英語））を参照ください。
４．１ 基本手順
上表のグラフデータから、最も簡単なグラフ定義データXML (表4.1-2参照）で、表示したグラフです。 凡例ラベル(日本語）が出ていないには、FONTのデフォルトが "Arial"のためなのです。 手順は、「グラフデータの整理」→「グラフ定義データXMLの作成」 →「Webページの作成」です。 | ⇒ | 最も簡単なグラフ定義データXML(表4.1-2）からのフラッシュグラフ
You need to upgrade your Flash Player
|
 |
|
・カンバス上で、グラフ矩形（グラフ自身）の位置（矩形の左上端）を表すとき、カンバスの左上端のところが基準点x,y=(0,0)です。 ・グラフ自身以外の凡例、テキスト（グラフタイトル、カテゴリー軸タイトルやデータ軸タイトル)および画像をカンバス上に、 自分で描くときも、その位置はカンバスの左上の基準点からの相対ピクセル値で指定します。 ・4つの赤色のデータ（東京）のグループ（セット）をシリーズ(series)という。上のグラフは３シリーズです。 ・カンバス（キャンバス）の大きさとその背景は、Webページの<object>タグで指定します。その他のグラフを描く部分はXMLで作成します。 |
| axis_category | カテゴリー軸ラベルの特性を定義する | axis_ticks | 軸目盛（目盛マーク）-データ軸/カテゴリー軸の特性を定義する |
| axis_value | データ軸ラベルの特性を定義する | axis_value_text | データ軸ラベルを定義したテキストでカスタマイズする |
| canvas_bg | カンバス背景について（XMLではありません） | chart_border | グラフ枠を定義する |
| chart_data | グラフデータを定義する | chart_grid_h | 水平(horizontal)グリッド線を定義する |
| chart_grid_v | 垂直(vertical)グリッド線を定義する | chart_pref | グラフの好み(preferences)を定義する |
| chart_rect | 矩形（rectangle：グラフ描写エリア）を定義する | chart_transition | グラフの移り変わりを定義する（アニメーション） |
| chart_type | グラフの種類を定義する | chart_value | グラフのデータラベル値を定義する |
| chart_value_text | グラフのデータラベル値をカスタマイズする | draw | グラフ要素の自由な描写（テキスト、画像） |
| legend_label | 凡例ラベル | legend_rect | 凡例の領域とマージンを定義する |
| legend_transition | 凡例の移り変わりを定義する（アニメーション動作） | link | リンク機能（フリーは、未対応） |
| link_data | リンクデータ機能（フリーは、未対応） | live_update | ライブアップデート機能 |
| series_color | シリーズカラーを定義する | series_explode | シリーズの分解を定義する |
| series_gap | シリーズの間隔を定義する | series_switch | シリーズの色の切り替えを定義する |
<chart> <--chartタグで全体を挟みます。ベースタグ。-->
<chart_data> <--chart_dataタグは、グラフのデータを定義します。-->
<row> <!--rowタグは、カテゴリータイトル、凡例タイトルおよびデータ値の定義の開始です。1行目の始め。-->
<null/> <!--nul/タグは、NULLを定義します。カテゴリー軸名を順に並べて定義を意味します。1行1列目。 -->
<string>2001</string> <!--stringタグは、タイトルを定義します。カテゴリー軸名を定義します。1行2列目。 -->
<string>2002</string> <!--stringタグは、タイトルを定義します。カテゴリー軸名を定義します。1行3列目。 -->
<string>2003</string> <!--stringタグは、タイトルを定義します。カテゴリー軸名を定義します。1行4列目。 -->
<string>2004</string> <!--stringタグは、タイトルを定義します。カテゴリー軸名を定義します。1行5列目。 -->
</row> <!--/rowタグは、カテゴリータイトル、凡例タイトルおよびデータ値の定義の終了です。1行目の終わり。-->
<row> <!--rowタグは、カテゴリータイトル、凡例タイトルおよびデータ値の定義の開始です。2行目の始め。-->
<string>東京</string> <!--stringタグは、タイトルを定義します。はじめに、凡例タイトルを定義します。2行1列目。 -->
<number>75</number> <!--numberタグは、グラフデータの値を順に定義します。2行2列目。-->
<number>10</number> <!--numberタグは、グラフデータの値を順に定義します。2行3列目。-->
<number>30</number> <!--numberタグは、グラフデータの値を順に定義します。2行4列目。-->
<number>63</number> <!--numberタグは、グラフデータの値を順に定義します。2行5列目。-->
</row> <!--/rowタグは、カテゴリータイトル、凡例タイトルおよびデータ値の定義の終了です。2行目の終わり。-->
<row> <!--以下同様。3行目の始め。-->
<string>大阪</string>
<number>100</number>
<number>20</number>
<number>65</number>
<number>55</number>
</row>
<row> <!--以下同様。4行目の始め。-->
<string>札幌</string>
<number>56</number>
<number>21</number>
<number>20</number>
<number>90</number>
</row>
</chart_data> <!--/chart_dataタグは、グラフのデータを定義の終了です。-->
</chart> <!--chartタグで全体を挟みます。ベースタグ。-->
（注記）
・XML要素の記述は、正確にテーブルの行・列（セル）に真似て定義します。
・たとえ、左上セルが空であるとしても、それは一貫性して、ヌルとしてXMLコードに定義します。
・全ての行と列タイトルは、文字列(string)です。全てのテーブル価値は、数値(number)です。また、空白はnull(<null/>)です。
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><!--ドキュメントタイプ。実際は1行で書きます。-->
<HTML> <!--***英小文字パラメータの値が、修正可能です***-->
<BODY bgcolor="#FFFFFF"> <!--ページの背景色-->
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
<!--↑classid=とcodebase=は、特に修正不要。この定義はフラッシュプレーヤ６。-->
WIDTH="400" <!--グラフカンバスの幅。（注記）④、⑤参照。-->
HEIGHT="250" <!--グラフカンバスの高さ。（注記）④、⑤参照。-->
id="charts" <!--特に修正不要-->
ALIGN=""
>
<PARAM NAME=movie VALUE="charts.swf?library_path=charts_library&xml_source=sample.xml"> <!--（注記）②、③参照-->
<PARAM NAME=quality VALUE=high> <!--特に修正不要-->
<PARAM NAME=bgcolor VALUE=#666666> <!--グラフカンバスの背景色-->
<EMBED src="charts.swf?library_path=charts_library&xml_source=sample.xml" <!--（注記）②、③参照-->
quality=high <!--特に修正不要-->
bgcolor=#666666 <!--グラフカンバスの背景色-->
WIDTH="400" <!--グラフカンバスの幅。（注記）④、⑤参照。-->
HEIGHT="250" <!--グラフカンバスの高さ。（注記）④、⑤参照。-->
NAME="charts" <!--特に修正不要-->
ALIGN=""
swLiveConnect="true"
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"
>
</EMBED>
</OBJECT>
</BODY>
</HTML>
（注記）
①charts.swf URLが全てのブラウザーに取り組むために2つの異なる場所にあるとに気がついてください。
②charts.swf がWebページファイルと同じディレクトリにない場合、このURLはWebページファイルから見た相対パスか
絶対パスである必要があります。
例．"./graph/charts.swf"や"http://yourserver/graph/charts.swf".
③charts_libraryのURLとXMLファイルURLをcharts.swfに与えてください。（表2 ファイル構成参照）
例．./charts/charts.swf?library_path=charts&xml_source=sample1_bar.xml"
・library_path：charts_libraryの格納フォルダのURL
・xml_source：グラフ定義データXMLファイルのURL
xml_sourceでCGI（XMLを生成するCGI)パス を与える場合の注意事項－
（例）
charts.swf?library_path=charts_library&xml_source=xml_make.cgi?p1=line&p2=H18 (誤）
charts.swf?library_path=charts_library&xml_source=xml_make.cgi%3Fp1%3Dline%26p2%3DH18 (正）
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><!--ドキュメントタイプ。実際は1行で書きます。-->
<HTML>
<head>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<title>横棒SWFグラフ作成サンプル｜XML/SWF Charts 使用</title>
<meta http-equiv="Pragma" content="no-cache">
<script type="text/javascript" src="./charts/swfobject.js"></script> <!--SWFObject JSファイルの定義。 -->
</head>
<BODY bgcolor="#ffffff">
<CENTER>
<P><b>SWFObject使用例－横棒フラッシュグラフサンプル</b></p>
<div id="flashcontent"> <!--SWF(グラフ）を埋め込む場所をDIVタグで定義します。ID要素でID名を指定。 -->
<strong>You need to upgrade your Flash Player</strong>
</div>
<script type="text/javascript"> <!--SWFObjectの呼び出し。 -->
var so = new SWFObject("./charts/charts.swf?library_path=charts&xml_source=./ex-xml/ex-yokobar-swfobject.xml",
"charts1", "500", "400", "8", "#008080"); //実際は１行で書きます。
so.write("flashcontent"); //ID名を指定して、SWF(グラフ）を書き込み
</script>
</CENTER>
</BODY>
</HTML>
（注記）① SWFObjectオブジェクトの書き方
③ SWFObjectを使用したサンプルグラフ ④ ドキュメントタイプを入れます。例は、フレーム構成をとらない場合です。 |
４．２ サンプルグラフデータ定義XMLファイル、WebページHTMLとそのフラッシュグラフ ・下のサンプルグラフデータ定義XMLファイルでは、XML/SWF ChartsのXML記述仕様のほとんどのXMLタグを使用しています。 サンプルのXMLは、テキストエディターのメモ帳で作成しました。XMLの文字コードは、UTF-8で保存します。（表4.2-1参照） ・WebページHTMLサンプルはここ（FLASHコントロールのアクティブ化サンプルあり）を参照してください。 ・これらのフラッシュグラフは、こちらです。 WebページHTMLは、FLASHコントロールのアクティブ化を考慮し作成する必要があります。 （１） サンプルグラフデータ定義XMLファイル
<chart>
<!--*1 グラフのタイプは、column:縦棒グラフ。bar:横棒グラフ。表１参照。sample_bar.xml UTF-8 2006.8.13-->
<chart_type>column</chart_type>
<!--*2 カテゴリー軸ラベル（水平軸、X軸ラベル）属性定義。 文字のフォント、太さ、サイズ、色、不透明度-->
<axis_category font='arial' bold='false' size='14' color='88FF00' alpha='75' font='ＭＳ 明朝'
/>
<!--*3 データ軸目盛の属性定義。 データ軸目盛の表示、カテゴリー軸目盛の表示、目盛の位置、メジャー軸目盛の厚さ
メジャー軸目盛の色、マイナー軸目盛の厚さ、マイナー軸目盛の色、マイナー軸目盛の目盛の数--->
<axis_ticks value_ticks='true' category_ticks='true' position='outside' major_thickness='1'
major_color='000000' minor_thickness='1' minor_color='ff0000' minor_count='3'
/>
<!--*4 データ軸ラベルの属性定義。 軸ラベルの最小値、軸ラベルの最大値（デフォルトは自動計算）、メジャー目盛の数
軸ラベルの接頭辞記号、軸ラベルの接尾辞記号、ラベルの少数点以下の表示、同左少数点の記号、
千単位区切り記号、最小値の非表示、ラベルのフォント名、ラベル文字の太さ、ラベル文字のサイズ、ラベル文字の色
ラベル文字の不透明度、ラベル文字の位置 --->
<axis_value min='0' max='120' steps='5' prefix='$' suffix='' decimals='1' decimal_char='.'
separator='' show_min='false' font='Arial' bold='true' size='12' color='ffffff'
alpha='75' orientation='diagonal_up'
/>
<!--*5 データ軸ラベルのバリエーションの定義。特殊なグラフの場合使用。略。-->
<axis_value_text> </axis_value_text>
<!--*6 グラフ描写エリアの枠線の属性定義。説明省略。-->
<chart_border top_thickness='0' bottom_thickness='2' left_thickness='2' right_thickness='0' color='FF0000'
/>
<!--*7 グラフデータの属性定義。説明省略。-->
<chart_data>
<row>
<null/>
<string>2001年</string>
<string>2002年</string>
<string>2003年</string>
<string>2004年</string>
</row>
<row>
<string>東京</string>
<number>75</number>
<number>10</number>
<number>30</number>
<number>63</number>
</row>
<row>
<string>大阪</string>
<number>100</number>
<number>20</number>
<number>65</number>
<number>55</number>
</row>
<row>
<string>札幌</string>
<number>56</number>
<number>21</number>
<number>20</number>
<number>90</number>
</row>
</chart_data>
<!--*8 水平グリッド線の属性定義。線の厚さ（デフォルト：1)、線の色、線の不透明度、線種（solid, dotted, and dashed）-->
<chart_grid_h thickness='2' color='000080' alpha='15' type='dashed'
/>
<!--*9 垂直グリッド線の属性定義。線の厚さ（デフォルト：0)、線の色、線の不透明度、線種（solid, dotted, and dashed）-->
<chart_grid_v thickness='2' color='000080' alpha='15' type='dotted'
/>
<!--*10 幾つかのグラフに特定した属性定義。線グラフ、横棒グラフ等。下は線グラフの例。縦棒グラフでは無意味。
<chart_pref line_thickness='5' point_shape='square' fill_shape='true'
/> -->
<!--*11 グラフ描写エリアの属性定義(図4.1-1の青系色長方形‐rectangle部分）。
x:カンバス左上座標x,y=(0, 0)からの水平位置（pix) y:カンバス左上座標x,y=(0, 0)からの垂直位置（pix)
width:長方形‐rectangleの幅（pix) height:長方形‐rectangleの高さ（pix)
positive_color:0値（データ軸ラベル値0）から上の部分の背景色 positive_alpha:同左背景色の不透明度 -->
<chart_rect x='50' y='40' width='320' height='170' positive_color='8888FF' positive_alpha='75'
/>
<!--*12 グラフ部品の表示の変転-transition。棒グラフの棒が上から落ちてくるようにアニメーション表示。
type:dissolve, drop, spin, scale, zoom, blink, slide_right, slide_left, slide_up, slide_down, and none -->
<chart_transition type='drop' delay='1' uration='2' order='series'
/>
<!--*13 データ値の表示属性定義。データ値の接頭辞記号、データ値の接尾辞記号、データ値少数点以下の表示、同左少数点の記号、
千単位区切り記号、データ値の表示位置、データ値0を隠す、%表示（円グラフ）、データ値のフォント、
データ値文字のサイズ、データ値文字色、データ値文字の不透明度
ラベル文字の不透明度、ラベル文字の位置 --->
<chart_value prefix='' suffix='' decimals='0' decimal_char='.' separator='' position='middle'
hide_zero='false' as_percentage='false' font='arial' bold='true' size='10' color='FFFFFF'
alpha='90'
/> <!--データ値の表示位置-position:縦棒グラフの場合 top, bottom, middle, outside, cursor, hide-->
<!--*14 データ値の表示のバリエーションの定義。例えば、データの最大値の場合"MAX"と表示したい場合等。略。-->
<chart_value_text> </chart_value_text>
<!--*15 drawタグ は、カンバス上に、円-circle、イメージ-image（JPEGまたはSWF）、線-line、矩形-rectまたは
テキスト-text等を自由に書くことを可能にします。
textタグは、グラフのタイトル、データ軸ラベルの数値の単位やカテゴリ軸ラベルのタイトル等を書くことができます。-->
<draw>
<text color='00008b' font='Microsoft Sans Serif'
h_align='center' v_align='top' bold='true' size='13'>－過去４年の売上げ推移－</text>
<text color='008000' font='Microsoft Sans Serif' h_align='center'
bold='true' x='0' y='230'>（年）</text>
<text color='008000' font='Microsoft Sans Serif'
bold='trule' x='0' y='200'>（万円）</text>
<image layer='background' url='http://urbanqee.com/lc-hp/flash/katatumuri-c.swf' x='0' y='0'
alpha='100'
/>
</draw>
<!--*16 凡例の属性定義。 layout:凡例の配置（horizontal/vertical）、bullet:凡例ラベル前につけるマーク
（"square", "circle", and "line." The default is "square")、凡例ラベル文字フォント
（日本語FONTは'Microsoft Sans Serif'）
凡例ラベル文字の太さbold、凡例ラベル文字サイズsize、凡例ラベル文字色color、凡例ラベル文字の不透明度alpha -->
<legend_label layout='horizontal' bullet='line' font='Microsoft Sans Serif' bold='true' size='11' color='000000'
alpha='65' />
<!--*17 凡例のアニメーション表示属性定義。-->
<legend_transition type='slide_left' delay='1' duration='1'
/>
<!--*18 リンクボタンの作成の属性定義。linkの他にlink_dataおよびlive_updateタグがあります。フリーのため動作しない？ -->
<link>
<area x='50' y='230' width='75' height='20' url='http://www.google.com' target='_blank' text='google' font='Arial'
background_color='AAFF00'
/>
</link>
<!--*19 グラフ棒の色の定義。シリーズ（グループ）ごとの色。-->
<series_color>
<color>800000</color>
<color>000080</color>
<color>808000</color>
</series_color>
<!--*20 グラフ棒の間隔の定義。同じグループ内の棒の間隔bar_gap:重ねる場合はマイナス値、グループ間の間隔set_gap-->
<series_gap bar_gap='-30' set_gap='50' />
<!--*21 シリーズが１つの場合、グラフ棒ごとに色の定義。３シリーズ（グループ）のため未使用。
<series_switch>false</series_switch> -->
<!--end-->
</chart>
（制約事項）
① データ軸ラベルは、日本語FONT（下記③参照）が使用できない。*4参照。カテゴリ軸ラベルは、日本語FONTが指定できます（*2)。
（確認結果）
② データ軸ラベルに\マークを使用できない。日本語FONTに変えてもだめです。*4参照。（確認結果）
③ 日本語TTF-FONTは、"Arial"以外をを使用します。*15,*16参照。（確認結果）
Windowsでは、"ＭＳ ゴシック", "ＭＳ 明朝", "ＭＳ Ｐゴシック", "ＭＳ Ｐ明朝"および"魚石行書"を指定できます。
7.特記事項参照。
④ グラフカンバス上にリンクを設定するのは、フリーライセンスではできない。*18参照。（確認結果）
⑤ XMLファイルは、文字コード、UTF-8で保存してください。
|
５．出力グラフラ（結果）
ブラウザの「更新」ボタンをクリックして、再表示してください。|
You need to upgrade your Flash Player
|
（注）表示がおかしい場合は、ブラウザの「更新」ボタンをクリックしてください。
また、アニメーション動作を見たい場合は、ブラウザの「更新」ボタンをクリックしてください。
６．XMLリファレンス（XMLマニュアル）
グラフを描くためのXMLタグのマニュアル（リファレンス）の詳細は、以下を参照ください。
７．特記事項
| |||||||||||||||||||||||||||||||||||||||
 |  |
 | 例； <draw> <text transition='slide_left' delay='1' duration='1' x='0' y='50' width='400' height='100' h_align='center' v_align='top' font='魚石行書' bold='true' size='65' color='4400ff' alpha='60' >富士山</text> </draw> |
|
|
|
（変更履歴）
| 2006.8.14 | 初版（HTML基本編） | |
| 2006.8.21 | CGI応用動的XML編 追加 | |
| 2007.4.29 | Reference（XMLリファレンスマニュアル）追加 |
最終更新日：2007.4.29
