INDEX； HTML基本編 はじめに サンプルグラフ等 1.アプリケーションの構成 2.システム構成（環境） 3.グラフライブラリーXML/SWF Chartsのインストール 4.グラフの作成方法 5.出力フラッシュグラフ（結果） 6.Reference（XMLリファレンスマニュアル） リファレンス和訳 7.特記事項 ≫サイト内グラフ関連リンク |
TARGET；
|
はじめに 本ページは、www.maani.usサイトのグラフライブラリーXML/SWF Charts*（Ver 5)を使用して、フラッシュグラフ（SWF)の作成方法を紹介します。 本ページが使用しているXML/SWF Chartsのバージョンは2010年5月版です。最新版v5.120は一部動作が不安定です。 * 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（結合グラフ）（サンプルなし） | ライブアップデート機能 PHP｜ Perl |
１．アプリケージョンの構成
グラフ作成アプリケージョンの構成は、以下のとおりです。
|
|
（説明）
（１）日本語を表示するためには、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-charts] （ローカルサーバテスト環境パス C:\Inetpub\wwwroot\xmlswf-charts 任意のフォルダ) +---[chart] ←XML/SWF Chartsライブラリー(任意のフォルダ） +---[charts_library] ←グラフ部品SWFのライブラリー *1（必須） +---.DS_Store ← *1（必須） +---ar3d.swf ←等グラフ部品SWF 全26ファイル *1（必須） +---・・・ *1（必須） +---charts.swf ←グラフ作成メインSWF *1（必須） +---AC_RunActiveContent.js ←フラッシュオブジェクト生成JSファイル *1（必須） +---default.html ←Webページサンプル１（このページ4.1節で用いたもの） *2 +---default.xml ←XMLファイルサンプル１（このページ4.1節で用いたもの） *3 +---sample_bar-v5.html ←Webページサンプル２（このページ4.2節で用いたもの） *2 +---sample_bar-v5.xml ←XMLファイルサンプル２（このページ4.2節で用いたもの） *3 +---xml-swf_howtograph.html ←本ページ +---[Jcode] ←日本語変換ルーチンJcode.pmの一部。右参照。（注１） +---Jcode.pm ←日本語変換ルーチン（V‐0.87）（注１） （注１）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
・UNIXサーバ確認OS 必要ソフト
(サーバ）・Active Perl(5.6.1)*1
・Jcode.pm(0.87)*2
・XML/SWF Charts 5*1,*2：Perl,Jcode.pmは、基本編では未使用
()内の数字は使用バージョンクライアント ・InternetExplorler5.5および6.0-SP2
・Windows Trule TYpe FONT；
"日本語フォント"/"Arial" *3
・Adobe Flash Player 9 *4
*4：Flash Playerは、9 以上が必要です。
３．グラフライブラリーXML/SWF Chartsのインストール
XML/SWF Chartsのダウンロードは、ここ（英語サイト）より行います。 Windowsの場合、zip形式ファイルをダウンロードします。 |
なお、ライセンスには、Free License（フリー）、$45 - Single License（45ドル１ライセンス） および$550 - Bulk License（大口ライセンス）があります。 Free License（フリー）とは、以下のとおりです。 ・チャート（グラフ）をクリックする、XML/SWF Chartsウェブサイトへリンクします。 ・他のフラッシュファイル中にのXML/SWF Chartsのフラッシュファイルを表示することはできません。 ・テクニカルサポートと電子メールによる製品アップデートはできません。４．グラフの作成方法（例 縦棒グラフ-Column）
XML/SWF Chartを用いたグラフの作成方法について説明します。ここのサンプルのWebページは、HTMLのみで作成しています。 実際のグラフデータは、データベース等から読み込み、編集が必要になります。この場合はCGIで作成ことが現実的でしょう。 CGIのサンプルアプリケーションは、CGI応用動的XML編参照。 XMLの詳細は、www.maani.usサイトのReference（XML/SWF ChartsのXML記述仕様（英語））を参照ください。 ４．１ 基本手順
上表のグラフデータ（3行4列）から、最も簡単なグラフ定義データXML (表4.1-2参照）で、表示したグラフです。 凡例ラベル(日本語）が出ていないには、FONTのデフォルトが "Arial"のためなのです。 手順は、「グラフデータの整理」→「グラフ定義データXMLの作成」 →「Webページの作成」です。 | ⇒ | 最も簡単なグラフ定義データXML(表4.1-2）からのフラッシュグラフ |
 |
|
・カンバス上で、グラフ矩形（グラフ自身）の位置（矩形の左上端）を表すとき、カンバスの左上端のところが基準点x,y=(0,0)です。 ・グラフ自身以外の凡例、テキスト（グラフタイトル、カテゴリー軸タイトルやデータ軸タイトル)および画像をカンバス上に、 自分で描くときも、その位置はカンバスの左上の基準点からの相対ピクセル値で指定します。 ・4つの赤色のデータ（東京）のグループ（セット）をシリーズ(series)といい、行（row）に関連します。 ・カテゴリー（category）は、列(column)に関連します。 ・カンバス（キャンバス）の大きさとその背景は、Webページの<object>タグで指定します。その他のグラフを描く部分はXMLで作成します。 |
|
| axis_category | カテゴリー軸ラベルの特性を定義する | axis_ticks | 軸目盛（目盛マーク）-データ軸/カテゴリー軸の特性を定義する |
| axis_value | データ軸ラベルの特性を定義する | axis_value_label | データ軸ラベルを定義したテキストでカスタマイズする |
| 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 | Ver5廃止 | draw | グラフ要素の自由な描写（テキスト、画像） |
| legend | 凡例を定義する | legendタグに統合 | |
| legendタグのtransitionパラメーターに変更 | link | リンク機能（フリーは、未対応） | |
| link_data | リンクデータ機能（フリーは、未対応） | update | ライブアップデート機能 |
| series_color | シリーズカラーを定義する | series_explode | シリーズの分解を定義する |
| series | シリーズの間隔を定義する | seriesタグのtransferパラメーターに変更 |
<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タグは、グラフのデータを定義の終了です。-->
<legend font='ＭＳ Ｐゴシック' /> <!--legendタグは、グラフの凡例の属性を定義します。-->
</chart> <!--chartタグで全体を挟みます。ベースタグ。-->
（注記）
・XML要素の記述は、正確にテーブルの行・列（セル）に真似て定義します。
・たとえ、左上セルが空であるとしても、それは一貫性して、ヌルとしてXMLコードに定義します。
・全ての行と列タイトルは、文字列(string)です。全てのテーブル価値は、数値(number)です。また、空白はnull(<null/>)です。
|
<HTML>
<head>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<title>縦棒SWFグラフ作成サンプル｜XML/SWF Charts V5 ｜default.xml</title>
<meta http-equiv="Pragma" content="no-cache">
<!-- XML/SWF charts 5 2008.11.16 -->
<script language="javascript">AC_FL_RunContent = 0;</script>
<script language="javascript"> DetectFlashVer = 0; </script>
<script src="./chart/AC_RunActiveContent.js" language="javascript"></script> <!--*1-->
<script language="JavaScript" type="text/javascript">
<!--
var requiredMajorVersion = 9;
var requiredMinorVersion = 0;
var requiredRevision = 45;
-->
</script>
<!-- XML/SWF charts 5 ↑ -->
</head>
<BODY bgcolor="#ffffff">
<P><b>縦棒フラッシュグラフサンプル</b></p>
<!-- XML/SWF Charts 埋め込み----------------------------->
<script language="JavaScript" type="text/javascript">
<!--
if (AC_FL_RunContent == 0 || DetectFlashVer == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
if(hasRightVersion) {
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,45,0',
'width', '400', // <!--*2-->
'height', '250', // <!--*3-->
'scale', 'noscale',
'salign', 'TL',
'bgcolor', '#ffff00', // <!--*4-->
'wmode', 'opaque',
'movie', 'chart/charts', // <!--*5-->
'src','chart/charts', // <!--*6-->
'FlashVars', 'library_path=chart/charts_library&xml_source=default.xml', // <!--*7-->
'id', 'my_chart',
'name', 'my_chart',
'menu', 'true',
'allowFullScreen', 'true',
'allowScriptAccess','sameDomain',
'quality', 'high',
'align', 'middle',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'play', 'true',
'devicefont', 'false'
);
} else {
var alternateContent = 'This content requires the Adobe Flash Player. '
+ '<u><a href=http://www.macromedia.com/go/getflash/>Get Flash</a></u>.';
document.write(alternateContent);
}
}
// -->
</script>
<noscript>
<P>This content requires JavaScript.</P>
</noscript>
<!-- XML/SWF Charts 埋め込み------↑----------------------->
</BODY>
</HTML>
（注記）
①AC_RunActiveContent.jsのURL（*1）
②width,height：フラッシュグラフ( キャンバス)の大きさ（*2,*3）
キャンバスとは、全てのグラフ要素を持つエリアです。それは凡例、タイトル、その他を含みます。
③bgcolor：フラッシュグラの背景色（*4）
④movie,src：charts.swf（グラフ作成メインSWF)のURLを拡張子（.swf)なしで、movieとsrcの２箇所に指定します。（*5,*6）
URLは、Webページから見た相対または絶対パスでしてします。上の例は相対パスです。
例のchart/chartsは、charts.swfファイルが、chartフォルダにあることを示しています。
⑤FlashVars：charts_libraryフォルダのURLとXMLファイルのURLをcharts.swfに与えます。（*7）（表2 ファイル構成参照）
例．library_path=chart/charts_library&xml_source=default.xml
・library_path：charts_libraryの格納フォルダのURL。例：chart/charts_library（相対パス）
・xml_source：グラフ定義データXMLファイルのURL。例：default.xml（相対パス）
xml_sourceでCGI（XMLを生成するCGI)パス を与える場合の注意事項－
（例）
library_path=chaert/charts_library&xml_source=xml_make.cgi?p1=line&p2=H18 (誤）
library_path=chart/charts_library&xml_source=xml_make.cgi%3Fp1%3Dline%26p2%3DH18 (正）
|
４．２ サンプルグラフデータ定義XMLファイル、WebページHTMLとそのフラッシュグラフ（応用） ・下のサンプルグラフデータ定義XMLファイルでは、XML/SWF ChartsのXML記述仕様のほとんどのXMLタグを使用しています。 サンプルのXMLは、テキストエディターのメモ帳で作成しました。XMLの文字コードは、UTF-8で保存します。（表4.2-1参照） ・WebページHTMLサンプルは、SHIFT-JISで作成します。 ・これらのフラッシュグラフは、こちらです。 （１） サンプルグラフデータ定義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で保存してください。
|
５．出力グラフラ（結果）
ブラウザの「更新」ボタンをクリックして、再表示してください。
|
（注）表示がおかしい場合は、ブラウザの「更新」ボタンをクリックしてください。
また、アニメーション動作を見たい場合は、ブラウザの「更新」ボタンをクリックしてください。
６．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リファレンスマニュアル）追加 | |
| 2008.12.9 | Reference Ver5 対応（XMLリファレンスマニュアル） |
最終更新日：2007.4.29