簡単!HTMLで、amCharts-Flash chartsを用いてきれいなフラッシュグラフを作成する
−FLASH Graph フラッシュグラフ作成2(amcolumn Column & Bar chart 縦棒、横棒グラフ基本編)

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

amCharts flash charts(2012.2.14);
  • フラッシュ(グラフ)起動が、SWFObject2.0 javascriptファイル(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の旧バージョンとして存続)を使用して、縦棒、横棒グラフ(amcolumn)のフラッシュグラフ(SWF)の作成方法を紹介します。
Webページは、HTMLをはじめPerl、PHP、ASP等が使用できます。
amCharts flash chartsは、円グラフ、折れ線グラフ、棒グラフ、分散グラフ及びストックグラフが提供されています。
このページの内容は、OS Windows IIS + Active Perl5.6.1をベースに書いています。  * amChartsは、www.amcharts.comが著作権を持っています。

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

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

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

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

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

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

[amcharts] (ローカルサーバテスト環境パス C:\Inetpub\wwwroot\amcharts)
   +---[amcolumn] ←amCharts amcolumn用設定ファイル、データファイルなど
              +---amcolumn_data.txt  ←amcolumn棒グラフデータファイル(CSV形式) *3(*3または*4)
              +---amcolumn_data.xml  ←amcolumn棒グラフデータファイル(XML形式) *4(*3または*4)
              +---amcolumn_settings.xml  ←amcolumn棒グラフ設定ファイル(XML形式) *5
              +---cars1.jpg  ←グラフ背景画像ファイル *6
   +---[flash] ←amCharts flash charts amcolumn 用ライブラリー
              +---swfobject.js ←amcolumn.swf用<OBJECT>タグ書き出しajax対応JSファイル(amCharts) *1
              +---amcolumn.swf  ←amcolumn棒グラフSWF本体(amCharts) *2
              +---expressInstall.swf  ←説明略 *2
   +---[Jcode]  ←日本語変換ルーチンJcode.pm(V‐0.87)の一部。右参照。 *7
   +---amcolumnex.html  ←グラフ作成Webページ *8
   +---Jcode.pm  ←日本語変換ルーチン(V‐0.87) *7
   +---amcharts_howtocolumn.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「amcolumn棒グラフ設定ファイル(XML形式)」(*5)のファイルパス
    B「amcolumn棒グラフデータファイル(CSV形式)」(*3)または「amcolumn棒グラフデータファイル(XML形式)」(*4)のファイルパス
    C「amcolumn.swf用<OBJECT>タグ書き出しJSファイル」(*1)の定義
    D「amcolumn棒グラフ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/amcolumnex.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(amcolumn)のインストール

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.グラフの作成方法(縦棒グラフと横棒グラフ Column & Bar 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 データファイルの作成

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

例1 データとそのグラフ(棒グラフと折れ線グラフの混合グラフ)
表-自動車各社の06年の生産・輸出台数(07年1月27日朝日新聞より)
  国内販売 国内生産 輸出 海外生産
トヨタ自動車 1,892,253 4,194,187 2,529,293 3,898,975
日産自動車 766,702 1,234,400 646,016 2,003,946
ホンダ 702,242 1,332,866 627,952 2,300,947
スズキ 695,330 1,206,805 369,526 1,135,387
ダイハツ工業 622,500 791,291 134,448 33,221
マツダ 270,241 966,547 720,573 318,773
三菱自動車 263,490 768,478 406,238 554,598
富士重工 245,234 482,283 238,836 110,373

【注記】
  • 右グラフの設定ファイルを見る≫amcolumn_settings.xml
  • 右グラフの画像(JPEG)イメージをダウンロードする。
    右グラフの上を右クリックし、フラッシュのコンテキストメニュー
    を表示し「Export as image」メニューをクリックします。
You need to upgrade your Flash Player
 
 データファイル(XML形式)の例(拡張子 .xml)
 
  データファイルには、CSV形式とXML形式がありますが、ここではXML形式で作成します。
XML形式データファイル(ampie_data.xml)
<chart>
	<series>
		<value xid="0">トヨタ自動車</value>
		<value xid="1">日産自動車</value>
		<value xid="2">ホンダ</value>
		<value xid="3">スズキ</value>
		<value xid="4">ダイハツ工業</value>
		<value xid="5">マツダ</value>
		<value xid="6">三菱自動車</value> 
		<value xid="7">富士重工</value> 
	</series>
	<graphs>
		<graph gid="0" title="国内販売"> <!--国内販売台数-->
			<value xid="0" description="2006年売上げ世界第一位!!" >1892253</value>
			<value xid="1">766702</value>			
			<value xid="2">702242</value>
			<value xid="3">695330</value>
			<value xid="4">622500</value>
			<value xid="5">270241</value>
			<value xid="6">263490</value>
			<value xid="7">245234</value>
		</graph>
		<graph gid="1"> <!--国内生産台数-->
			<value xid="0">4194187</value>
			<value xid="1">1234400</value>			
			<value xid="2">1332866</value>
			<value xid="3">1206805</value>
			<value xid="4">791291</value>
			<value xid="5">966547</value>
			<value xid="6">768478</value>
			<value xid="7">482283</value>
		</graph>
		<graph gid="2"> <!--輸出台数-->
			<value xid="0">2529293</value>
			<value xid="1">646016</value>			
			<value xid="2">627952</value>
			<value xid="3">369526</value>
			<value xid="4">134448</value>
			<value xid="5">720573</value>
			<value xid="6">406238</value>
			<value xid="7">238836</value>
	</graph>		
	</graphs>
</chart>

(書き方)
(1) chart(ベースタグ)
例;
 
<chart>
 ・・・
</chart>

 
(2) series(カテゴリデータラベルを定義します)
 seriesで、valueタグの始まりと終わり定義します。カテゴリ(X軸)データラベルの値を、valueタグで挟み指定します。
 
<xaxis>
 <value xid="0">トヨタ自動車</value>
 <value xid="1">日産自動車</value>
 ・・・
</xaxis>
 (説明)
 ・valueタグ:X軸データラベルをタグで挟み定義します。
 ・xid要素:XidをX軸の左より、0から順次与えます。(グラフの表示がxid順になります)
 
(3) graphsタグ(グラフのデータ値を定義います)
 graphsタグで、1つ以上のgraphタグの始まりと終わり定義します。データ値は、valueタグで挟み指定します。
 
<graphs>
 <graph gid="0" title="国内販売"> <!--国内販売台数-->
  <value xid="0" description="2006年売上げ世界第一位!!" >1892253</value>
  <value xid="1">766702</value>
  ・・・
 </graph>
 <graph gid="1"> <!--国内生産台数-->
  <value xid="0">4194187</value>
  <value xid="1">1234400</value>
  ・・・
 </graph>
  ・・・
</graphs>
 (説明)
 ・graphタグ:1つのデータセット(同じデータタイトル=同じ凡例名を持つデータ群)のグラフID(gid)を、任意の数字から
  昇順に定義します。
  graphタグの中に、グラフの属性定義を行うことができます。4.2 設定ファイルのカスタマイズ参照。
 ・valueタグ:データ値をタグで挟み定義します。
 ・xid要素:seriesタグで定義したxidに対応し、xidを0から順次与えます。(グラフの表示がxid順になります)
 ・description要素:ここのxidのデータ値の指標(設定ファイルの indicatorタグ参照)に付加するテキストを定義します。

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

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

カスタマイズ修正した設定ファイルamcolumn_settings.xml(日本語訳)
(説明)
(1)コメント行の大括弧[]は、例えば [#FFFFFF] は、パラメータの値を設定しない場合のデフォルト値を示しています。
  このことは、この値で満足なら、この行を削除できてまたファイルサイズを減らすことができます。
(2)balloon(吹き出し)について---(124行〜134行)。
  • グラフ棒上をロールオーバーすると、データ値が吹き出しで表示されます。(例1−1)
     (注)amline(line&area)では、<indicator>タグに相当します。
例1−1 吹き出し)〜吹き出しは、トヨタ自動車です
吹き出し例

(3)columnタグで、グラフ棒の属性を定義します。---(31行〜48行)
(4)backgroundタグで、背景に、画像やフラッシュを使用する場合のパスを指定します。---(50行〜57行)
   WebページHTMLのamline_pathで定義したフォルダから見た相対パスを指定します。
(5)plot_areaタグで、プロットエリアの属性を指定します。---(59行〜69行)
(6)gridタグで、カテゴリ軸やデータ軸のグリッド線の属性を指定します。---(71行〜86行)
(7)valuesタグで、カテゴリ軸やデータ軸のラベルの属性を指定します。---(88行〜107行)
(8)axesタグで、カテゴリ軸やデータ軸の軸の属性を指定します。---(109行〜122行)
(9)legendタグで、凡例の属性を指定します。---(136行〜155行)
(10)labelsタグで、グラフのタイトルや任意の複数のテキストを描くことができます。---(157行〜168行)
  例:
<labels>
  <label>
  テキスト1の指定
  </label>
  <label>
  テキスト2の指定
  </label>
</labels>
(11)graphsタグで、グラフID(gid)ごとにデータの属性を指定します。---(170行〜)
  データファイル(XML形式)に、ここの属性を定義することができます。
  データファイル(XML形式)に、グラフ定義をする例
  • データファイルの<graph>タグの中に、キーパラメータで記述します。
    データファイルでの記述例:
    <graph gid="0" title="国内販売" color="#0000ff">
(12)折れ線ラフとの混合グラフについて
設定ファイルに、<line>タグ群を適当な位置に挿入し、<graph>タグに<type>タグを入れます

(13)ライブアップデートについて
  刻々変化するデータを、秒単位で定期的にライブアップデートすることができます。---(24行〜25行)
(14)グラフの画像(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ページ(amcolumn.html)をコピーし、必要に応じカスタマイズ(修正)します。

カスタマイズしたamcolumn.html(データファイルは、XML形式用)


<html> <!--新バージョン amcharts Flashバージョン amcharts_flash_1.6(2012.1.11)-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS" />
<title>amcolumn</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
	<div id="flashcontent"> <!--SWF(グラフ)を埋め込み場所。IDで名前を定義。-->
		<strong>You need to upgrade your Flash Player</strong>
	</div>

	<script type="text/javascript">
            var params = 
            {
                bgcolor:"#FFFFFF"  *6
            };
            
            var flashVars = 
            {
                path: "amcolumn/", *1
                settings_file: "amcolumn/amcolumn_settings.xml", *2
                data_file: "amcolumn/amcolumn_data.xml"  *3
            };
            
            swfobject.embedSWF("flash/amcolumn.swf", "flashcontent", "520", "400", "8", "flash/expressInstall.swf", flashVars, params);*10
               //↑グラフ(SWF)の呼び出し *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);
 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);
 フラッシュの大きさを指定します。ampie_flashWidth:横幅 ampie_flashHeight:高さ(ピクセル)。
(5) bgcolor(*6);
  フラッシュの背景色(16進値)。設定ファイルでも指定できます(設定ファイル)。
(6) preloader_color(*7);
  フラッシュをローディン中の背景色(16進値)。
(7) -
(8) SWFObjectパラメータ-
swfobject.embedSWF("flash/amcolumn.swf", "flashcontent", "520", "400", "8", "flash/expressInstall.swf", flashVars, params); (*10)
  • "flash/amcolumn.swf":amcolumnグラフ本体SWFであるamcolumn.swfのパス(Webページからの相対パスまたは絶対パス)
  • "flashcontent":<object>タグのIDは、SWF(グラフ)の埋め込みDIVのIDを指定。
  • "520":フラッシュの横幅
  • "400":フラッシュの高さ
  • "8":Flash Playerのバージョン
  • "flash/expressInstall.swf":expressInstall.swfのパス(Webページからの相対パスまたは絶対パス)
    expressInstall.swfは、フラッシュのバージョンが低い場合、adobe flashのインストールを促す画面出力をするもの。
  • 変数flashVars:*6参照
  • 変数params:*1 *2 *3参照
(9) <!-- amcharts script -->から<!-- end of amcharts script -->までのコードは、グラフを表示したい場所に置きます。
(10) SWFObject応用例-1つのページ内で、複数のSWF(グラフ)を表示する方法 ≫複数グラフサンプルを見る
         <!-- 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><!--amcharts 共用-->
        
        <!-- chart is placed in this div. if you have more than one chart on a page, give unique id for each div -->
        ▼棒グラフ・・・・・<br>
        <div id="amcolumnchartdiv"><strong>You need to upgrade your Flash Player</strong></div><br><!--棒グラフ表示場所-->
        ▼折れ線グラフ・・・・・<br>
        <div id="amlinechartdiv"></div><br><!--折れ線グラフ表示場所-->
        ▼円グラフ・・・・・<br>
        <div id="ampiechartdiv"></div><!--円グラフ表示場所-->

	<script type="text/javascript">
           //棒グラフ
            var paramscol = 
             {
                bgcolor:"#FFFFFF"
             };
            
            var flashVarscol = 
             {
                path: "amcolumn/",
                settings_file: "amcolumn/amcolumn_settings.xml",
                data_file: "amcolumn/amcolumn_data.xml"
             };
            swfobject.embedSWF("flash/amcolumn.swf", "amcolumnchartdiv", "520", "400", "8", "flash/expressInstall.swf", flashVarscol, paramscol);
            
           //折れ線グラフ
            var paramslin = 
             {
                bgcolor:"#FFFFFF"
             };
            var flashVarslin = 
             {
                path: "amline/",
                settings_file: "amline/amline_settings.xml",
                data_file: "amline/amline_data.xml"
             };
            swfobject.embedSWF("flash/amline.swf", "amlinechartdiv", "520", "400", "8.0.0", "flash/expressInstall.swf", flashVarslin, paramslin);

           //円グラフ
            var paramspie = 
             {
                bgcolor:"#000000"
             };
            var flashVarspie = 
             {
                path: "ampie/",
                settings_file: "ampie/ampie_settings-xml.xml",
                data_file: "ampie/ampie_data.xml"
             };
            swfobject.embedSWF("flash/ampie.swf", "ampiechartdiv", "520", "400", "8.0.0", "flash/expressInstall.swf", flashVarspie, paramspie);
             
        </script>
        
        <!-- end of amcharts script -->
                 
  • DIVタグのID名で対応を取ります。
  • 3つ以上、同時に表示する場合、メモリ容量が512MB以下のPCではメモリ不足が発生することがあります。

    最初の起動時は問題ありません。
    IEの「更新」ボタンで、ページをリロードしたときや、
    ページを閉じたときに発生します。
    左のアラートがでた場合、「OK」をクリックします。
  • SWFObjectにつて、もっと詳しいことを知りたい場合は、>>日本語の解説サイト>>SWFObject 本家

5.グラフサンプル

例2:ライブアップデート(6秒ごとにデータをリロードしています)

データは、Perl rand関数で、乱数を発生させています。何のデータであるかは問わないでください。

例2〜ライブアップデートの例 >>設定ファイルデータファイル(CGI)
ライブアップデート(6秒ごとにデータをリロードしています)
・ライブアップデートを実際に見る≫http://urbanqee.com/webutil/amcharts/amcolumnex-live.html


(サイト内グラフ関連リンク)
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.5.13初版(縦棒と横棒グラフ基本編-amcolumn)
2012.2.14flashバージョン最新版

最終更新日:2007.5.25,2012.2.14