簡単！HTMLで、XML/SWFライブラリーを用いてフラッシュグラフを作成する
－FLASH Graph フラッシュグラフ作成１（HTML基本編）
（インストールは、めちゃ簡単！グラフライブラリXML/SWF Chartsをダウンロード後、解凍し、好きな場所に置くだけです。）
2006.8.14初版
INDEX；
HTML基本編
　はじめに
　　　サンプルグラフ等
　1.アプリケーションの構成
　2.システム構成（環境）
　3.グラフライブラリーXML/SWF Chartsのインストール
　4.グラフの作成方法
　5.出力フラッシュグラフ（結果）
　6.Reference（XMLリファレンスマニュアル） 
　　　 リファレンス和訳
  7.特記事項 
CGI応用動的XML編 
　1.グラフ作成Webページ
　2.データ定義動的XML

>>サイト内グラフ関連リンク
TARGET；
  • XML/SWF Chartsでグラフを描く
  • グラフ作成WebページはHTMLで作成く
  • グラフデータ定義XMLは、静的に作成（CGIで動的に作る方法もある）
  • グラフのテキスト等を日本語で表示する
    発見？フォント指定のデフォルトは、日本語フォント？>>7.特記事項参照
    確認できている日本語フォント(2007.1.18 Windows環境)；
    ・"ＭＳ ゴシック", "ＭＳ 明朝", "ＭＳ Ｐゴシック", "ＭＳ Ｐ明朝"および"魚石行書"
  • Windows/UNIXでの動作を確認する 
はじめに

　本ページは、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で保存してください。


表１　XML/SWF Chartsで対応しているグラフの種類とサンプルグラフ（グラフ名をクリック）
 
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（結合グラフ）（サンプルなし）
 ライブアップデート機能





各グラフのサンプルは、www.maani.usサイトのギャラリーページを合わせて参照ください。


XML/SWF Chartsは、単にグラフを表示するだけでなく、刻々変化するデータに追従、対応したライブアップデート機能を有しています。

XML/SWF Chartsでは、グラフのことをチャート（chart)と呼んでいますが、ここではグラフと呼ぶことにします。
このページの内容はOS Windows IIS + Active Perl5.6.1をベースに書いています。

１．アプリケージョンの構成

　　グラフ作成アプリケージョンの構成は、以下のとおりです。

　　　　
図1　グラフ作成アプリケージョン構成

（説明）

　（１）漢字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)が、最小構成です。



表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は、最小構成ファイル









　（６）起動方法例（テスト環境のサンプルWebページ)
　　　　http://127.0.0.1/xmlswf-chart/barchart-sample1.html

　
２．システム構成（動作確認マシン環境）


　　

表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以上が必要です。

   

   
*2：Jcode.pm(日本語変換ライブラリーは、インストールまたは私用ライブラリーで使用します。
　　Jcode.pmの入手方法やインストール方法は、ここを参照。
　　Jcode.pmは、PerlでXMLを動的に生成する場合必要になります。
*3：Microsoft Sans Serifは、日本語フォントです。
　　Windowsでは、"ＭＳ ゴシック", "ＭＳ 明朝", "ＭＳ Ｐゴシック", "ＭＳ Ｐ明朝"および"魚石行書"等も使用できます。
   

   

   








　
３．グラフライブラリー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記述仕様（英語））を参照ください。


　４．１　基本手順

       

            
表4.1-1 過去４年の売上げデータ－（単位：万円）
              
              

                 
                2001
                2002
                2003
                2004

              

                東京
                75
                10
                30
                63

              

                大阪
                100
                20
                65
                55

              

                札幌
                56
                21
                20
                90
               

              


         上表のグラフデータから、最も簡単なグラフ定義データXML

         (表4.1-2参照）で、表示したグラフです。

         凡例ラベル(日本語）が出ていないには、FONTのデフォルトが

         "Arial"のためなのです。


         手順は、「グラフデータの整理」→「グラフ定義データXMLの作成」

         →「Webページの作成」です。
         		⇒
         最も簡単なグラフ定義データXML(表4.1-2）からのフラッシュグラフ




      
        
         		
         

         


　　（１） XML/SWF Chartsのグラフ用語

　　　　　XML/SWF Chartsでは、いわゆるグラフをチャート（Chart)と呼んでいます。ここでは、グラフに統一しています。
 
          

          

          

          ・カンバス上で、グラフ矩形（グラフ自身）の位置（矩形の左上端）を表すとき、カンバスの左上端のところが基準点x,y=(0,0)です。

          ・グラフ自身以外の凡例、テキスト（グラフタイトル、カテゴリー軸タイトルやデータ軸タイトル)および画像をカンバス上に、

             自分で描くときも、その位置はカンバスの左上の基準点からの相対ピクセル値で指定します。

          ・4つの赤色のデータ（東京）のグループ（セット）をシリーズ(series)という。上のグラフは３シリーズです。

          ・カンバス（キャンバス）の大きさとその背景は、Webページの<object>タグで指定します。その他のグラフを描く部分はXMLで作成します。
          

          


　　（２） グラフデータの整理

　　　　　グラフデータについて、表4.1-1のように、同じ項目名のデータ（Y軸データ）を1行に書き出します。
　　　　　データは、表示したいX軸ラベル名（水平軸ラベル名とかカテゴリー軸名と言う。ここでは、西暦年。）の順に１行に並べます。
　　　　　何もないところは、空白とします。そして、テールを完成させます。
　　　　　表4.1-1 過去４年の売上げデータは、３データ（Y軸データ)の例です。

　　（３） グラフ定義データXMLの作成(グラフデータ-Chart SourceためのXMLファイル）

　　　　　整理されたグラフデータから、XML/SWF Chaertsの記述仕様に基づき、テキストエディターで、グラフ定義データXMLファイルを作成します。
　　　　　また、グラフ定義データXMLファイルはCGIで動的に作成することも可能です。
　　　　　XMLファイルの文字コードは、UTF-8です。テキストエディターはメモ帳が使用できます。
　　　　　グラフ定義データは、最低限、グラフのデータとX軸ラベル名の定義が必要です（表4.1-2参照）。
　　　　　グラフは、この表4.1-2の必要最低限のグラフ定義データXMLでも表示できます。

　　　　　グラフの「テキスト」の色・大きさ、「背景」の色・透明度、「グラフ線や面」の色・透明度、軸ラベル・凡例の特性および
　　　　　ロゴ画像の挿入等のバリエーションは、必要に応じXML/SWF Chaertsの記述仕様に基づきグラフ定義データXMLに追加定義します。

　　　　　XML構文は、次のとおりです。
　　　　　・XMLソースは、タグの根の要素です。
　　　　　・XMLタグは大文字と小文字の区別ができます。
　　　　　・XML要素は、完全な入れ子なければなりません。
　　　　　・特性値は、引用句で括られていなければません(シングルクォートまたはダブルクォート)。

　　　　　グラフを描くためのXMLタグは、次のとおりです。
　　　　　詳細は、www.maani.usサイトのReference（XML/SWF Chartsの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 シリーズの色の切り替えを定義する





表4.1-2 グラフ定義データXML（必要最低限の定義）
              
              

                

<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/>)です。 



      



　　　　（注）実際には、（１）、（２）項の作業は、CGIがデータベースファイルを読み込み、XMLファイルを自動作成する方法が現実的でしょう。
　　　　　　　ここに示すサンプルXMLは、静的XML文書です。しかし、実際にはダイナミックにXMLコードを生み出しますような動的XML文書でも
　　　　　　　ありえます。
　　　（４） charts.swf（グラフ作成メインSWF）フラッシュを呼ぶためのWebページの作成（例．HTMLのみ）
Webページの作成の作成言語は、HTML, Perl,PHP,ASP,CFML等が可能です。サンプルページはHTMLのみで作成しています。
表4.1-3 <OBJECT>タグを直接書く使用例（FLASHコントロールアクティブ化非対応） 
<!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 (正）              
          
記号と16進コード対応表
          
記号16進コード
          (注）

           CGI（XMLを生成するCGI)パスの中で
パラメータを与える場合は、
左表のように16進コードを用います。
          

          
?%3F

          
=%3D

          
&%26

          


　　　　相対パスの場合、「グラフ作成Webページ」ファイル（例．barchart-sample1.html）からの相対URLを用います。
 
④ キャンバスとは、全てのグラフ要素を持つエリアです。それは凡例、タイトル、その他を含みます。
⑤キャンバス特性は、WebページのHTMLパラメータを通して、幅（width)、高さ(height)と背景色(bgcolor)に加えて、
　背景をチャートの後でhtml背景を示すために透明（transparent）にすることは、可能です。
　　　例．透明（transparent）にする（下の2行をXMLに追加します）
　　　　<PARAM NAME=wmode VALUE=transparent> <!--グラフカンバスの背景色を透明にする-->（ <EMBED タグの上に書く）
　　　　wmode=transparent <!--グラフカンバスの背景色を透明にする-->（ <EMBED タグの中に書く）
⑥ドキュメントタイプを入れます。例は、フレーム構成をとらない場合です。

表4.1-4 SWFObject（SWF-フラッシュ埋込み用Javascriptファイル)の使用例（FLASHコントロールアクティブ化対応） 
<!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オブジェクトの書き方
  • 第１パラメータ（./charts/charts.swf?・・・）：SWF(フラッシュ）のURL
  • 第２パラメータ（charts1）：SWF(フラッシュ）埋め込みタグ（<OBJECT>～</OBJECT>）のID名
  • 第３パラメータ（500）：SWF(フラッシュ）の横幅（width)
  • 第４パラメータ（400）：SWF(フラッシュ）の高さ（height)
  • 第５パラメータ（8）：FLASH Player(フラッシュプレイヤー）のバージョン
  • 第６パラメータ（#008080）：SWF(フラッシュ）の背景色
② SWFObjectのダウンロードや、もっと詳しいことを知りたい場合は、>>日本語の解説サイト｜>>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ファイル



 表4.2-1　サンプルグラフデータ定義XMLファイル　>>この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://www.linkclub.or.jp/~ma3ki/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ファイル

　　　　　WebページHTMLサンプルはここ（FLASHコントロールのアクティブ化サンプルあり）を参照してください。

　　（３） そのフラッシュグラフ（結果）

　　　　　これらのフラッシュグラフは、こちら（下の例１）です。




５．出力グラフラ（結果）

　　　ブラウザの「更新」ボタンをクリックして、再表示してください。


 



例１：フラッシュグラフ（結果）（FLASHコントロールアクティブ化非対応）









       






    
　>>このグラフのXML 
　　

このグラフは背景にフラッシュを使用しています。
 フラッシュ by (c)押し花とアイコン






 

  
例２：SWFObject使用例－横棒フラッシュグラフサンプル（FLASHコントロールアクティブ化対応） >>このグラフのXML
  

   
	

		You need to upgrade your Flash Player
	


	
   





（注）表示がおかしい場合は、ブラウザの「更新」ボタンをクリックしてください。

また、アニメーション動作を見たい場合は、ブラウザの「更新」ボタンをクリックしてください。






６．XMLリファレンス（XMLマニュアル）

グラフを描くためのXMLタグのマニュアル（リファレンス）の詳細は、以下を参照ください。



７．特記事項



 
日本語フォントについて

  
凡例やカテゴリーの文字フォントを指定する場合、次のようにfontキーでフォント名を指定しますが、

      fontキーで、'arial'以外を指定すると、日本語フォントになるようです。


     
XML fontキーの指定方法（日本語フォントについて）（確認：WindowsXP+Adobe Flash Player9 PC)

     

         
XML fontキー例No.記述例フォント名日本語表示備考

         
fontキー省略          ①-arial×表示されないfontキーを書かない

         
fontキー記述②font='arial'arial×表示されない

         
                               ③font=''フォント名不明○表示される（注）

         
                               ④font='☆'指定したフォント○表示される
           ☆："ＭＳ ゴシック", "ＭＳ 明朝", "ＭＳ Ｐゴシック", "ＭＳ Ｐ明朝"
または"魚石行書" （注）

           例．font='ＭＳ ゴシック'
         

         
                               ⑤font='★'フォント名不明○表示される
           ★：例No.②、③、④以外の値 （注）

           例1．font='Microsoft Sans Serif' *1

           例2．font='水平軸'  >>Line(折れ線グラフ）（6行目参照）

         

         

           （注）arialフォント以外の制限

           非埋め込まれた字体が使用されているとき、どんな回転(rotation)とアルファ(alpha)属性も無視されます。 

           非埋め込まれた字体を使用するテキストは、いつも水平に表示し、完全に不透明です。


           *1お詫びと訂正

           Microsoft Sans Serifは、日本語フォントと思っていましたが、実際はarial以外なら日本語が表示されることが分かりました。

              お詫びして、訂正いたします。(2007.1.20)
         

     

     

  
 
  
Windowsで確認できている日本語フォントは、
       "ＭＳ ゴシック", "ＭＳ 明朝", "ＭＳ Ｐゴシック", "ＭＳ Ｐ明朝"および"魚石行書"です。

      

      

      
例；


        <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>
      

      

  
 
  
Macintosh では "Osaka"、"細明朝体"、"平成角ゴシック" などのフォントが指定できるかは未確認です。

      よろしければ、Macintoshをお持ちの方のご報告をお願いいたします。












（サイト内グラフ関連リンク）




NoタイトルGDと必要ソフトスクリプトOS


1
Perl(Active Perl5.6）でグラフを作成する
・Active Perl(5.6.1)
・GD(2.16)
・GD::Graph(1.43)
・GDTextUtil(0.86)
・jcode.pm(0.87)		Perl CGIWindows　IIS


2
PHPで高機能なグラフ生成ライブラリーJpGraphを使ってグラフを描いてみました・・・
・PHP(4.3.11)
・GD(2.0)（boutell）
・JpGraph(1.17)
PHPWindows　IIS


3簡単！HTMLで、XML/SWFライブラリーを用いてフラッシュグラフを作成する

－フラッシュグラフ作成１（HTML基本編）
｜
－フラッシュグラフ作成２（CGI応用動的XML編）
・XML/SWF Chartsライブラリー
HTML,Perl,PHPWindows　IIS等


4
簡単！HTMLで、amChartsライブラリーを用いてフラッシュグラフを作成する
・amChartsライブラリー
HTML,Perl,PHPWindows　IIS等
















HOME


Profile


BBS


Chat


XML/SWF Graph


GD Graph


PDF Make


PDF Make


ASP Apli Make


MID


FONT


IE Filter


Mini Bonsai


Web Color List


E-m@il












（変更履歴）



2006.8.14初版（HTML基本編）


2006.8.21CGI応用動的XML編　追加


2007.4.29Reference（XMLリファレンスマニュアル）追加









最終更新日：2007.4.29