簡単!HTMLで、amCharts-Flash chartsを用いてきれいなフラッシュグラフを作成する
−FLASH Graph フラッシュグラフ作成2(amline Line & Area chart 折れ線グラフ基本編)

(インストールは、めちゃ簡単!グラフライブラリーamCharts Flash Versionをダウンロード後、解凍し、好きな場所に置くだけです。)
2012.2.14 バレンタイン版
INDEX;
amline Line & Area chart 折れ線グラフ基本編
はじめに  
1.アプリケーションの構成  
2.システム構成(動作確認マシン環境)  
3.グラフライブラリーamCharts amplineのインストール  
4.グラフの作成方法(折れ線グラフと面グラフ Line & Area chart)  
 4.1 データファイルの作成  
  4.2 設定ファイルのカスタマイズ  
  4.3 Webページ(HTML)の作成  
5.フラッシュグラフサンプル
amCharts LINKS & other;
≫ampie Pie & Donut chart 円グラフ基本編
≫amcolumn Column & Bar & Line & Area chart 縦棒と横棒グラフ基本編

amCharts flash charts(2012.2.14);
  • フラッシュ(グラフ)起動が、SWFObject2.0javascriptファイル(ajax)に変更になりました。
    対応バージョンは、ampie:v1.1.1 amline:v1.0.13 amcolumn:v1.1.0 以上です。>>例
  • 2つのY軸(左右)を持つことができます。amlineのみ。
  • データリロード機能(ライブアップデート)。ampieとamcolumn。>>例
  • Javascriptによる表示中のグラフコントロール機能。ampieとamcolumn。
  • amChartsの最新版はJavascript chartsです。Flash chartsは旧バージョンとして存続しています。
サイト内グラフ関連リンク
はじめに

amchartsは、現在、javascript charts(新javascriptバージョン)、flex charts(新flexバージョン)およびflash charts(旧flashバージョン)があります(2012.2.14現在)
本ページは、flash charts(amchartsの旧バージョンとして存続)を使用して、折れ線グラフ(amline)のフラッシュグラフ(SWF)の作成方法を紹介します。
Webページは、HTMLをはじめPerl、PHP、ASP等が使用できます。
amCharts flash chartsは、円グラフ、折れ線グラフ、棒グラフ、分散グラフ及びストックグラフが提供されています。
このページの内容は、OS Windows IIS + Active Perl5.6.1をベースに書いています。  * amChartsは、www.amcharts.comが著作権を持っています。

1.アプリケージョンの構成

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

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

(説明)
(1)ファイル構成

(最小構成-赤字)
・amCharts flash chartsライブラリー:swfobject.js、amline.swf、expressInstall.swf(3ファイル *1,*2)
・1Webページ:amlineex.html(HTML *8)(ファイル名は任意)
・1設定ファイル:amline_settings.xml(XML *5)(ファイル名は任意)
・1データファイル:amline_data.txtまたはamline_data.xml(CSV/XML *3/*4)(ファイル名は任意)

ファイル構成例 [ ]:フォルダ

[amcharts] (ローカルサーバテスト環境パス C:\Inetpub\wwwroot\amcharts)
   +---[amline] ←amCharts amline 用データファイル、設定ファイル、画像など
              +---amline_data.txt  ←amline折れ線グラフデータファイル(CSV形式) *3
              +---amline_data.xml  ←amline折れ線グラフデータファイル(XML形式) *4
              +---amline_settings.xml  ←amline折れ線グラフ設定ファイル(XML形式) (amCharts) *5
              +---fire1.swf  ←グラフデータポイント用フラッシュファイルやグラフ背景画像ファイル *6
              +---xxxxx.jpg  ←グラフ背景画像ファイル *6
  +---[flash] ←amCharts flash charts amline 用ライブラリー
              +---swfobject.js ←amline.swf用<OBJECT>タグ書き出しajax対応JSファイル(amCharts) Ver2.2*1
              +---amline.swf  ←amline折れ線グラフSWF本体(amCharts) *2
              +---expressInstall.swf  ←adobe flash インストールを促す画面出力。swfobject.js2と対で使用。 *2
   +---[Jcode]  ←日本語変換ルーチンJcode.pm(V‐0.87)の一部。右参照。 *7
   +---amlineex.html  ←グラフ作成Webページ *8
   +---amline-xmldata1.cgi  ←amline折れ線グラフデータXMLファイル動的生成CGI *9
   +---Jcode.pm  ←日本語変換ルーチン(V‐0.87) *7
   +---amcharts_howtograph.html  ←本ページ *10
*7Jcode.pmのファイル構成(私用ライブラリー使用)

 +---[Jcode]
          +---[Unicode]
                    +---Constants.pm
                    +---NoXS.pm
          +---Constants.pm
          +---H2Z.pm
          +---Tr.pm
 +---Jcode.pm
(注1)各ファイルの相互関連(*1,*2,*3,*4,*5,*8)
   グラフ作成Webページ(*8)で、以下の項目を定義し、グラフを書き出すJavascript関数を発行します。
    @グラフの背景JPEG画像やフラッシュおよびデータポイントマーク用フラッシュ等ファイル(*6)の格納フォルダ
    A「amline折れ線グラフ設定ファイル(XML形式)」(*5)のファイルパス
    B「amline折れ線グラフデータファイル(CSV形式)」(*3)または「amline折れ線グラフデータファイル(XML形式)」(*4)のファイルパス
    C「amline.swf用<OBJECT>タグ書き出しJSファイル」(*1)の定義
    D「amline折れ線グラフSWF本体(amline.swf)」(*2))のファイルパス
(注2)Jcode.pm(*7)は、Jcode.pmがインストールできない環境の場合、私用ライブラリーとして使用します。
    Jcode.pmは、Perlでデータファイル(CSV/XML *3/*4)を動的に生成する場合必要になります。
(注3)swfobject.jsは、amline.swf用<OBJECT>タグ書き出しajax対応JSファイルです。
    swfobject.jsはVer2.2。swfobject.js2の場合、expressInstall.swfが必要。
    expressInstall.swfは、フラッシュのバージョンが低い場合、adobe flash インストールを促す画面出力をするもの。
(注4)amCharts flash chartsライブラリーのダウンロード
    ダウンロードZIPファイル(amcharts_flash_1.6.zip)を解凍すると・・・\amcharts_flash_1.6\amcharts\flashにあります。
    amCharts amcolumn 用ライブラリーのあり場所

(2)文字FONTのデフォルトは、Arialです。Verdana, Arial, Courier, Times New Roman等が指定できます。
 日本語フォントは、"MS ゴシック", "MS 明朝", "MS Pゴシック", "MS P明朝"および"魚石行書"を確認しました(Windows)。
 日本語は、日本語FONTを明示的に指定しなくとも、デフォルトで問題なく表示されます。
 日本語を扱う場合は、該当ファイルはUTF-8で保存する必要があります。(関連ファイルは、データファイルおよびグラフ設定ファイル *3/*4)
(3)グラフは、フラッシュSWF形式です。表示するためには、FLASH Playerが必要です。
(4)起動方法例(テスト環境のサンプルWebページ)
   http://127.0.0.1/amcharts/amlineex.html
 

2.システム構成(動作確認マシン環境)

  
表3 システム構成
OS
(サーバー)
・Windows2003 Server
・WindowsXP Pro+IIS5
・UNIX(OS不明:ブロバイダー)
確認OS
必要ソフト
(サーバ)
・Active Perl(5.6.1)*1
・Jcode.pm(0.87)*2
amCharts
*1,*2:Perl,Jcode.pmは、基本編では未使用
()内の数字は使用バージョン
クライアント・InternetExplorler5.5および6.0-SP2
・Windows Trule TYpe FONT  *3
・Adobe Flash Player 9 *4

*4:Flash Playerは、9以上?
*2:Jcode.pm(日本語変換ライブラリーは、インストールまたは私用ライブラリーで使用します。
  Jcode.pmの入手方法やインストール方法は、ここを参照。
  Jcode.pmは、Perlでデータファイルを動的に生成する場合必要になります。
*3:確認した日本語フォントは、"MS ゴシック", "MS 明朝", "MS Pゴシック", "MS P明朝"および"魚石行書"です(Windows)。
   

3.グラフライブラリーamChartsのインストール

amCharts flash versionのダウンロードは、www.amcharts.com(英語サイト)よりdeprecated Downloadsから行います。
ダウンロード後、解凍し任意の場所に配置します。これでインストールは終わりです。

ダウンロードファイルは2つあります。
Flash chartsamCharts Flash (2405 downloads ) (2015.3 現在)
  円グラフ(ampie)、折れ線グラフ(amline)、棒グラフ(amcolumn)、分散グラフ(amxy)およびレーダグラフ(amrader)が含まれる
Flash Stock ChartamStock Flash (732 downloads ) (2015.3 現在)
  ストックグラフ(amstock)のみ

なお、ライセンスには、Free License(フリー)と
一回のサイトライセンス(45ユーロ)(一つのウェブサイトの使用のために(仮想ウェブサーバ))および
企業許可(245ユーロ)(プロジェクトの無制限の使用とあなたが所有するか、開発するアプリケーションのために)があります。

4.グラフの作成方法(折れ線グラフと面グラフ Line & Area chart)

amChartsの折れ線グラフを作成するためには、次の2つのファイル(@、A)を作成、カスタマイズし、Webページ(B)を作成します。
それぞれのファイルは、ダウンロードファイルに同梱されている基本サンプル(\basicSamples)を参照し、修正・追加してカスタマイズするとよいでしょう。
@データファイルの作成
・ファイル形式:カンマ区切りテキストファイル(拡張子 .txt)またはXMLファイル(拡張子 .xml)
・文字コード:SHIFT-JISまたはUTF-8。日本語を扱う場合は、UTF-8とします。
・ダウンロードファイルに同梱されているデータファイル、設定ファイルの基本サンプルの場所
・・・\amcharts_flash_1.6\basicSamples\sampleData
データファイル、設定ファイルの基本サンプルの場所
Aグラフ設定ファイルのカスタマイズ
・ファイル形式:XMLファイル(拡張子 .xml)
・文字コード:SHIFT-JISまたはUTF-8。日本語を扱う場合は、UTF-8とします。
・その他:コメントやコメント行は、HTMLと同様、<:!-- コメント -->を使用できます。
BWebページの作成
・HTML、Perl、PHP等で作成します。
・ダウンロードファイルに同梱されているHTMLファイルの基本サンプルの場所
・・・\amcharts_flash_1.6\basicSamples\flashOnly
HTMLファイル基本サンプルの場所
実際のグラフデータは、データベース等から読み込み、編集が必要になります。この場合はCGI(PHP/Perl)で作成ことが現実的でしょう。

4.1 データファイルの作成

次のデータを用い、グラフ(右下)を作成するために、データファイルを作成します。

(例1)-サンプルデータとそのグラフ-  >>設定ファイル
【注記】
(1) CSVデータファイル(拡張子 .txt)
 
  グラフデータをCSVファイルに作成します。

-CSV形式データファイル(amline_data.txt)-
(書き方)
・書式は、f1;f2[;f3・・・]
  (フィールドをセパレータで区切る。区切り記号は;半角セミコロンの例)
 f1:X軸データラベル
 f2〜fn:データ値
各フィールドはセパレータで区切ります。
セパレータは、;(セミコロン)や,(カンマ)を指定できます(設定ファイルで指定)。
 
・日本語を扱う場合は、ファイルをUTF-8で保存します。
(2) XMLデータファイル(拡張子 .xml)
 
  XMLデータファイルの作成には、次の方法があります。
 ここでは、@、Aの方法について述べます。

XML形式データファイル(amline_data.xml)
(書き方)
(1) chart(ベースタグ)
例;
 
<chart>
...
</chart>

 
(2) series(X軸データラベルを定義します)
 seriesで、valueタグの始まりと終わり定義します。X軸データラベルの値は、valueタグで挟み指定します。
 
<series>
 <value xid="0">1949年</value>
 <value xid="1">1950年</value>
</series>
 (説明)
 ・valueタグ:X軸データラベルをタグで挟み定義します。
 ・xid要素:XidをX軸の左より、0から順次与えます。(グラフの表示がxid順になります)
 
(3) graphsタグ(グラフのデータ値を定義います)
 graphsタグで、1つ以上のgraphタグの始まりと終わり定義します。データ値は、valueタグで挟み指定します。
 
<graphs>
 <graph gid="1">
  <value xid="0">2.54</value>
  <value xid="1">2.51</value>
  ・・・
  <value xid="54" description="イラク戦争" bullet="fire1.swf">27.54</value>
 </graph>
 <graph gid="2">
  <value xid="0">20.21</value>
  <value xid="1">19.73</value>
  ・・・
  <value xid="54">28.42</value>
 </graph>
</graphs>
 (説明)
 ・graphタグ:1つのデータセット(同じデータタイトル=同じ凡例名を持つデータ群)のグラフID(gid)を定義します。
 ・valueタグ:データ値をタグで挟み定義します。
 ・xid要素:xaxisタグで定義したxidに対応し、xidを0から順次与えます。(グラフの表示がxid順になります)
 ・description要素:ここのxidのデータ値の指標(設定ファイルの indicatorタグ参照)に付加するテキストを定義します。
 ・bullet要素:ここのxidのデータポイントのマーク。1つのgidに対するデータポイントのマークは、設定ファイルのbulleタグで定義します。
  マークは、四角(square)、丸(round) およびフラッシュファイルを使用できます。
  フラッシュファイルを使用する場合、WebページHTMLで定義したamline_pathフォルダから見たURLを書きます。
(3) CGIによるデータファイルの動的作成
 
  CGI(Perl)で、XML形式データファイルを動的に作成する例(グラフサンプルは例3参照)

月ごとの平均気温と日照時間合計 データ(気象庁HPより)
平均気温最高気温最低気温日照時間
1月5.89.82.1180.5
2月6.1102.4161.1
3月8.912.95.1159.2
4月14.418.410.5164.9
5月18.722.715.1180.9
6月21.825.218.9120.1
7月25.42922.5147.5
8月27.130.824.2177.5
9月23.526.820.7112.9
10月18.221.615129.9
11月1316.79.5141.4
12月8.412.34.6171.1
amline-xmldata1.cgi
#!/usr/bin/perl

#XML形式データファイル作成CGI 2007.4.12

use lib qw(./);
use Jcode;

#グラフデータ編集
#以下のグラフデータ編集は、データベースからデータを読み込み作成して作成たと仮定します。
undef @data_array; ###データは、無名配列に格納します。###
 #1971〜2000月別平均温度 最低気温
@saitei = ("2.1","2.4","5.1","10.5","15.1","18.9","22.5","24.2","20.7","15","9.5","4.6","12.5");
push(@data_array,[@saitei]);
 #1971〜2000月別平均温度 最高気温
@saiko = ("9.8","10","12.9","18.4","22.7","25.2","29","30.8","26.8","21.6","16.7","12.3","19.7");
push(@data_array,[@saiko]);
 #1971〜2000月別平均日照時間
@hiatari = ("180.5","161.1","159.2","164.9","180.9","120.1","147.5","177.5","112.9","129.9","141.4","171.1");
push(@data_array,[@hiatari]);

@xdata = ("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"); #X軸データ(カテゴリラベル)
@hanrei = ("最低気温","最高気温","日照時間");       #凡例
@colors = ("#0000ff","#FF0000","#FFd700");          #グラフ線の色(青、赤、黄)
@hover_colors = ("#add8e6","#ffc0cb","#ee82ee");    #グラフ線のマウスオーバー時の色(ライトブルー、ピンク、紫)
@axis_position = ("left","left","right");           #データ軸の位置(左/右)。日照時間は右軸。
@unit = ("℃","℃","時間");                         #データの単位
@fill = ("0","0","30");                             #面グラフ(0より大きな数は、面となる)。日照時間は面。
#グラフデータ編集終わり

#出力************************************
print "Content-type: text/html\n\n";
print "<chart>\n";
print "     <series>\n";
#X軸ラベル(カテゴリ)
$h=0;       #添え字
foreach(@xdata){
 $out = Jcode::convert($_,'utf8');      #データのUTF-8変換(必須
 print "       <value xid=\"$h\">$out</value>\n";
$h++;
}
print "     </series>\n";
#データ
print "     <graphs>\n";
$g=0;        #gidおよび添え字用
$print = ""; #作業用
foreach $val (@data_array) {
    $xid=0;          #xid(0〜)
    $gid = $g+1;     #gid(1〜)
    $print = "       <graph gid=\"$gid\" title=\"$hanrei[$g]\" color=\"$colors[$g]\" ";
    $print .= "color_hover=\"$hover_colors[$g]\" unit=\"$unit[$g]\" axis=\"$axis_position[$g]\" fill_alpha=\"$fill[$g]\">\n";
    $print = Jcode::convert($print,'utf8');      #日本語を含む場合、データのUTF-8変換(必須
    print $print;
    foreach(@$val){
         $print = "       <value xid=\"$xid\" >$_</value>\n";
         $print = Jcode::convert($print,'utf8');      #日本語を含む場合、データのUTF-8変換(必須
         print $print;
         $xid++;
      }
     $g++;
 print "      </graph>\n";
}

print "    </graphs>\n";
print " </chart>\n";
#END
(備考)
・日本語を扱う場合は、データをUTF-8に変換します。(サンプルCGIのコードはSJISです)

(注.実際は、もっと複雑でしょう・・・)

4.2 設定ファイルのカスタマイズ

  ダウンロードしたファイルにある設定ファイル(amline_settings.xml)をコピーし、必要に応じカスタマイズ修正します。

カスタマイズ修正したamline_settings.xml(日本語訳)
(説明)
(1)コメント行の大括弧[]は、例えば [#FFFFFF] は、パラメータの値を設定しない場合のデフォルト値を示しています。
  このことは、この値で満足なら、この行を削除できてまたファイルサイズを減らすことができます。
(2)indicator(指標)について---(122行〜133行)。2つの機能を有します。
  • グラフ(プロットエリア)上やX軸をロールオーバーすると、Y軸のデータ値が吹き出しで表示されます。(例1−1)
  • グラフ線や凡例テキストをクリックすることにより、吹き出しの表示をON/OFFすることができます。(使用タグ:y_balloon_on_offタグ)
  • グラフ(プロットエリア)上で、X軸方向(水平方向)にある範囲で、マウスをドラッグすると、その範囲でグラフが拡大表示されます。
    拡大表示されたとき、ズームアウトボタン(拡大鏡アイコン付き)が、表示されます。(関連タグ:zoom_out_button(161行目))
    ズームアウトボタンをクリックすると、元に戻ります。(例1−2)

例1−1 吹き出し)〜吹き出しは、青色(66.2)、赤色(31.77)およびX軸緑色(1971年)です
吹き出し例

例1−2 拡大表示)〜1971年から1993年をドラッグ(上)、拡大表示(下)
1971年から1993をドラッグ


1971年から1993年をドラッグ
1971年から1993年を拡大表示


1971年から1993年が拡大表示

(3)legend(凡例)について---(135行〜159行)
  • グラフ線の表示のON/OFF。graph_on_offタグを使用し、凡例テキストの頭のカラーボックスをクリックすることにより、制御できます。
    カラーボックスとは、上のグラフ(例1)において、凡例の赤色と青色のレ点の入った四角いボックスです。
(4)背景やデータポイントマーク(バレット)に、画像やフラッシュを使用する場合のパスは、
   WebページHTMLのamline_pathで定義したフォルダから見た相対パスを指定します。
  • グラフキャンバスの背景に使用するJPEG画像やフラッシュ(backgroundタグ→fileタグ(30行目))
  • データポイントマーク(バレット)に使用するフラッシュ(graphタグ→bulletタグ(255行目等))
(5)面グラフとする場合は、graphタグ→fill_alphaタグで、0以外を指定します。(250行目)
<fill_alpha>50</fill_alpha>
(6)グラフの画像(JPEG)イメージをダウンロードするには、下の例のように<export_as_image>タグを </legend>などの下に追加します。
  グラフの上を右クリックし、フラッシュのコンテキストメニューを表示し「Export as image」メニューをクリックするとグラフの画像(JPEG)イメージを
  ダウンロードできます。
 

 <export_as_image>                                          <!-- 2012.2 追加 export_as_image機能は、サーバ上で動作します。 グラフをJPG画像としてダウンロードする設定。 -->
    <file>flash/export.php</file>                            <!-- [] (filename)ここでファイル名(export.phpまたはexport.aspx(windowsサーバ)のURLパス)を設定した場合、
                                                                コンテキストメニュー(Flashムービーグラフ上でフラッシュのプロパティを表示し、右クリック)"Export as image"が表示されます。
                                                                "Export as image"をクリックすると、JPEGイメージとしてグラフをダウンロードすることができます。-->
    <target></target>                                         <!-- [] (_blank, _top ...) グラフ画像ファイルのダウンロードをダウンロードするターゲット指定 -->
    <x></x>                                                   <!-- [0] (Number / Number% / !Number)Now Loadingの文字"Collecting data:99%"を表示するX軸の位置 -->
    <y></y>                                                   <!-- [] (Number / Number% / !Number)Now Loadingの文字"Collecting data:99%"を表示するX軸の位置。この値が空の場合、フラッシュSWFの下方に表示されます。-->
    <color></color>                                           <!-- [#BBBB00] (hex color code) Now Loadingの文字"Collecting data:99%"の背景色 -->
    <alpha></alpha>                                           <!-- [0] (0 - 100)Now Loadingの文字"Collecting data:99%"テキストの不透明度 -->
    <text_color>#ff0000</text_color>                          <!-- [text_color] (16進カラーコード) Now Loadingの文字"Collecting data:99%"テキストの色-->
    <text_size>14</text_size>                                 <!-- [text_size] (Number) Now Loadingの文字"Collecting data:99%"テキストのフォントサイズ-->
  </export_as_image>

4.3 Webページ(HTML)の作成

  ダウンロードしたファイルにあるWebページ(amline.html)をコピーし、必要に応じカスタマイズ(修正)します。
下の例は、4.1 (例1)のHTMLの例です。
SWFObject(swfobject.js)を使用しWebページを作成します。

カスタマイズしたamline.html(データファイルは、XML形式用)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS" />
<title>amline</title>
</head>
<body>
        <!-- saved from url=(0013)about:internet -->
        <!-- amcharts script-->
        <!-- swf object (version 2.2) is used to detect if flash is installed and include swf in the page -->
        <script type="text/javascript" src="flash/swfobject.js"></script> <!--*8 フラッシュSWFタグ書き出しajax対応JSファイルの定義-->
        
        <!-- chart is placed in this div. if you have more than one chart on a page, give unique id for each div -->
        <div id="amlinechartdiv2"></div> <!--*9 グラフ(SWF)埋め込み場所DIVの定義-->
        
        <script type="text/javascript">
        
            var params = 
            {
                bgcolor:"#FFFFFF"                                //*6
            };
            
            var flashVars = 
            {
                path: "amline/",                                 //*1
                settings_file: "amline/amline_settings.xml",     //*2
                data_file: "amline/amline_data.xml"              //*3
            };
            
            swfobject.embedSWF("flash/amline.swf", "amlinechartdiv2", "520", "400", "8.0.0", "flash/expressInstall.swf", flashVars, params);
                     //↑*10 グラフの呼び出し
        </script>
        
        <!-- end of amcharts script -->

        <!-- other parameters which can be passed with flashVars:
            chart_data - data in csv or xml format;
            chart_settings - settings in xml format;
            additional_chart_settings - settings in xml format which will be appended to chart_settings or settings loaded from a file;
            loading_settings - string displayed while loading settings;
            loading_data - string displayed while loading data;
            preloader_color - hex color (#CC0000 for example) of a preloader bar; *7
            error_loading_file - string displayed if indicated file was not found.
         -->

</body>
</html>
         
(説明)
(1) path(*1);
 amline_pathは、関連ファイルの格納フォルダを指定します(最後に/を付けます)。
  • 背景の画像、フラッシュファイル@
  • データポイントマーク(バレット)のフラッシュファイルA
  • amline.swf(amline本体)B
 これらの@Aファイルは、XML形式データファイル(bulletキー)または設定ファイル(bulletタグ、fileタグ)で指定します。
 Bのファイルは、amline_pathの直下に置きます。amline.jsで定義済みです。

 (XML形式データファイルの例)
<value xid="54" description="イラク戦争" bullet="fire1.swf">27.54</value>
 
(設定ファイルの例)
<background>
  <file>bg.jpg</file>
</background>

(2) settings_file(*2);
 設定ファイルのファイル名または、設定ファイルを動的に生成するCGIのファイル名を、相対または絶対URLで指定します。
 CGIには、Perl、PHP、ASP等があります。
(3) data_file(*3);
 データファイルのファイル名または、設定ファイルを動的に生成するCGIのファイル名を、相対または絶対URLで指定します。
 CGIには、Perl、PHP、ASP等があります。
(4) amline_flashWidthamline_flashHeight(*4,*5);
 フラッシュの大きさを指定します。amline_flashWidth:横幅 amline_flashHeight:高さ(ピクセル)。
(5) bgcolor(*6);
  フラッシュの背景色(16進値)。設定ファイルでも指定できます(設定ファイル)。
(6) preloader_color(*7);
  フラッシュをローディン中の背景色(16進値)。
(8)swfobject.js(*8);
 SWF用 <OBJECT >タグ書き出しajax対応JSファイル(swfobject.js)を定義します。
(9)amlinechartdiv2 (グラフ埋め込み場所DIVのID)(*9);
 グラフ表示場所DIV IDを定義します。
(10) SWFObjectパラメータ-
swfobject.embedSWF("flash/amline.swf", "amlinechartdiv2", "520", "400", "8", "flash/expressInstall.swf", flashVars, params); (*10)
  • "flash/amline.swf":amline.swfのパス(Webページからの相対パスまたは絶対パス)
  • "amlinechartdiv2":<object>タグのIDは、SWF(グラフ)埋め込み場所DIVのIDを指定
  • "520":フラッシュの横幅
  • "400":フラッシュの高さ
  • "8":Flash Playerのバージョン
  • "flash/expressInstall.swf":"flash/expressInstall.swf":expressInstall.swfのパス(Webページからの相対パスまたは絶対パス)
    expressInstall.swfは、フラッシュのバージョンが低い場合、adobe flashのインストールを促す画面出力をするもの。
  • 変数flashVars:*6参照
  • 変数params:*1 *2 *3参照
(11) <!-- amcharts script-->から<!-- end of amcharts script -->までのコードは、グラフを表示したい場所に置きます。

5.グラフサンプル

例2:例1のグラフの名目データを面グラフにしました。

例2〜面グラフの例 >>設定ファイル

例3:XML形式データファイルをCGIで生成しています。

HTMLパスとCGIサーバのパスが異なるプロバイダーでは、グラフの表示がうまく動作しませんのでご注意ください。
(例えば、HTMLパス:http://urbanqee.com/... CGIパス:http://urbanqee.com/...)
この例は、HTMLパスをCGIパスにあわせています。 CGIは、上の(3)CGIによるデータファイルの動的作成を参照。

例3〜XML形式データファイルをCGIで生成例  >>設定ファイル  >>データファイル(CGI)


(サイト内グラフ関連リンク)
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ライブラリーを用いてフラッシュグラフを作成する
フラッシュグラフ作成1(HTML基本編)−フラッシュグラフ作成2(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 JpGraph PDF Make ASP Apli Make MID FONT IE Filter Mini Bonsai Web Color List E-m@il

(変更履歴)
2007.4.1初版(折れ線グラフ基本編-amline)
2012.2.14flashバージョン最新版

最終更新日:2012.2.14