簡単!HTMLで、amCharts-Flash chartsを用いてきれいなフラッシュグラフを作成する
−FLASH Graph フラッシュグラフ作成(ampie Pie & Donut chart 円グラフ基本編)

(インストールは、めちゃ簡単!グラフライブラリーamCharts Flash Versionをダウンロード後、解凍し、好きな場所に置くだけです。)
2012.2.14 バレンタイン版
INDEX;
ampie Pie & Donut chart 円グラフ基本編  
はじめに    サンプルグラフ等  
1.アプリケーションの構成  
2.システム構成(動作確認マシン環境)  
3.グラフライブラリーamCharts ampieのインストール  
4.グラフの作成方法(円とドーナツグラフ Pie & Donut chart)  
 4.1 データファイルの作成  
 4.2 設定ファイルのカスタマイズ  
 4.3 Webページ(HTML)の作成  
5.フラッシュグラフサンプル
amCharts LINKS & other;
≫amline Line & Area 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の旧バージョンとして存続)を使用して、円とドーナッツグラフ(ampie)のフラッシュグラフ(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、ampie.swf、expressInstall.swf(3ファイル *1,*2)
・1Webページ:ampiex.html(HTML *8)(ファイル名は任意)
・1設定ファイル:ampie_settings-1.xml(XML *5)(ファイル名は任意)
・1データファイル:ampie_data.txtまたはampie_data.xml(CSV/XML *3/*4)(ファイル名は任意)

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

[amcharts] (ローカルサーバテスト環境パス C:\Inetpub\wwwroot\amcharts)
   +---[ampie] ←amCharts ampie 用データファイル、設定ファイル、背景画像ファイルなど
              +---ampie_data.txt  ←ampie円グラフデータファイル(CSV形式) *3
              +---ampie_data.xml  ←ampie円グラフデータファイル(XML形式) *4
              +---ampie_settings-1.xml  ←ampie円グラフ設定ファイル(amCharts) *5
              +---kagome2.jpg  ←グラフ背景画像 *6
              +---katatumuri-c.swf  ←グラフ背景フラッシュSWF *6
   +---[flash] ←amCharts ampie 用ライブラリー
              +---export.php  ←グラフ画像ダウンロードPHP(amCharts) *11
              +---expressInstall.swf   ←adobe flashのインストールを促す画面出力。*1
              +---swfobject.js   ←ampie.swf用<OBJECT>タグ書き出しajax対応JSファイル(amCharts) *1
              +---ampie.swf  ←ampie円グラフSWF本体(amCharts) *2
   +---[Jcode]  ←日本語変換ルーチンJcode.pm(V‐0.87)の一部。右参照。 *7
   +---ampiex.html  ←グラフ作成Webページ *8
   +---ampie-xmldata1.cgi  ←ampie円グラフデータ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「ampie円グラフ設定ファイル(XML形式)」(*5)のファイルパス
    B「ampie円グラフデータファイル(CSV形式)」(*3)または「ampie円グラフデータファイル(XML形式)」(*4)のファイルパス
    C「ampie.swf用<OBJECT>タグ書き出しJSファイル」(*1)の定義
    D「ampie円グラフSWF本体(ampie.swf)」(*2))のファイルパス
(注2)Jcode.pm(*7)は、Jcode.pmがインストールできない環境の場合、私用ライブラリーとして使用します。
  Jcode.pmは、Perlでデータファイル(CSV/XML *3/*4)を動的に生成する場合必要になります。
(注3)swfobject.jsは、amline.swf用<OBJECT>タグ書き出しajax対応JSファイルです。(*1)
    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等が指定できます。
 日本語は、日本語FONTを明示的に指定しなくとも、デフォルトで問題なく表示されます。
 日本語フォントは、"MS ゴシック", "MS 明朝", "MS Pゴシック", "MS P明朝"および"魚石行書"を確認しました(Windows)。
 日本語を扱う場合は、該当ファイルはUTF-8で保存する必要があります。(関連ファイルは、データファイルおよびグラフ設定ファイル *3/*4)
(3)グラフは、フラッシュSWF形式です。表示するためには、FLASH Playerが必要です。
(4)起動方法例(テスト環境のサンプルWebページ)
 http://127.0.0.1/amcharts/ampiex.html
 

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

  
表3 システム構成
OS
(サーバー)
・Windows2003 Server
・WindowsXP Pro+IIS5
確認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.グラフの作成方法(円とドーナツグラフ Pie & Donut chart)

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

4.1 データファイルの作成

次のデータを用いデータファイルを作成します。
データファイルは、カンマ区切りテキストファイル(拡張子 .txt)またはXMLファイル(拡張子 .xml)のいずれかを作ります。
表-自動車各社の06年の生産・輸出台数(2007年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

(1) カンマ区切りテキストファイル(拡張子 .txt)
 
  カンマ区切りテキストファイルの書き方例(輸出データ)

ampie_data.txt
 1 トヨタ自動車;2529293;true;;;10年連続TOP
 2 日産自動車;646016
 3 ホンダ;627952
 4 スズキ;369526
 5 ダイハツ工業;134448;true;#ffffff
 6 マツダ;720573
 7 三菱自動車;406238
 8 富士重工;238836;true
(書き方)
・書式は、f1;f2;f3;f4;f5;f6;f7;f8([title];[value];[pull_out];[color];[url];[description];[alpha];[label_radius])
  • f1(title):データラベル
  • f2(value):データ値
  • f3(pullOut):グラフを表示するときの引き出しの有無(true/false/空)。true:引き出します false/空:引き出さない。
  • f4(color):円のスライスの色(16進値)。例.#008000(緑色)。デフォルトの色は、グラフ設定ファイルで定義されています。
      色は、ここの値が設定ファイルより優先します。
  • f5(url):必要ならURLを定義します。
  • f6(description):データ値に対するコメントを書くことができます。
  • f7(alpha):略
  • f8(label_radius):略

・各フィールドはセパレータで区切ります。セパレータは、;(セミコロン)や,(カンマ)を指定できます(グラフ設定ファイルで指定)。
・日本語を扱う場合は、ファイルをUTF-8で保存します。
・CSVファイルの場合、設定ファイルでスキップ行を指定できます。2行目からデータを有効にするなど。
設定ファイル例 <skip_rows>1</skip_rows>とすると、トヨタは処理されません。
(2) XMLファイル(拡張子 .xml)
 
  XMLファイルの書き方例(海外生産データ)

ampie_data.xml

<?xml version="1.0" encoding="UTF-8"?>
<pie>
  <!--<Pie title="自動車各社の06年の海外生産台数">-->
  <!-- <message bg_color="#CCBB00" text_color="#FFFFFF"><![CDATA[You can broadcast any message to chart from data XML file]]></message> -->
<slice title="トヨタ自動車" pull_out="true">3898975</slice>
<slice title="日産自動車" pull_out="false">2003946</slice>
<slice title="ホンダ" pull_out="false">2300947</slice>
<slice title="スズキ" pull_out="false">1135387</slice>
<slice title="ダイハツ工業" pull_out="true" color="#000000">33221</slice>
<slice title="マツダ" pull_out="false">318773</slice>
<slice title="三菱自動車" pull_out="false">554598</slice>
<slice title="富士重工" pull_out="true">110373</slice>
</pie>
(書き方)
(1) Pieタグ(ベースタグ)
 pieタグでsliceタグを囲みます。例;
 
<pie>
<slice ... >value</slice>
<slice ... >value</slice>
<pie>

 
(2) sliceタグ(データタグ)
 sliceタグで、データのタイトルラベル(titleキー)、データ値(value)、円のスライスの引き出し(pull_outキー)や
 円のスライスの色(16進値)(colorキー)を定義します。
 ・title:データのタイトルラベル
 ・pullOut:グラフを表示するときの引き出しの有無(true/false/空)。true:引き出します false/空:引き出さない。
 ・color:円のスライスの色(16進値)。例.#008000(緑色)。デフォルトの色は、グラフ設定ファイルで定義されています。
  色は、ここの値が設定ファイルより優先します。
 ・value:データの値
 
(3) 日本語を扱う場合は、ファイルをUTF-8で保存します。
(3) CGIによるデータファイルの動的作成
 
  CGI(Perl)で、XML形式データを動的に作成する例(海外生産データ)

ampie-xmldata1.cgi
#!/usr/bin/perl

#chdir("C:\\Inetpub\\wwwroot\\amChaerts"); #Windowsの場合
use lib qw(./); #Jcode.pmを私用ライブラリーとして使う
use Jcode;
$print="";
#
print "Content-type: text/html\n\n";
$printd = <<"PDATA";
<?xml version="1.0" encoding="UTF-8"?>
<pie>
  <!--<Pie title="自動車各社の06年の海外生産台数">-->
  <!-- <message bg_color="#CCBB00" text_color="#FFFFFF"><![CDATA[You can broadcast any message to chart from data XML file]]></message> -->
<slice title="トヨタ自動車" pull_out="true">3898975</slice>
<slice title="日産自動車" pull_out="false">2003946</slice>
<slice title="ホンダ" pull_out="false">2300947</slice>
<slice title="スズキ" pull_out="false">1135387</slice>
<slice title="ダイハツ工業" pull_out="true" color="#ffffff">33221</slice>
<slice title="マツダ" pull_out="false">318773</slice>
<slice title="三菱自動車" pull_out="false">554598</slice>
<slice title="富士重工" pull_out="false">110373</slice>
</pie>
PDATA
$out = Jcode::convert($printd,'utf8');      #データのUTF-8変換(必須)
print $out;
#END
(説明)
・日本語を扱う場合は、データをUTF-8に変換します。(サンプルCGIのコードはSJISです)

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

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

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

カスタマイズ修正したampie_settings-1.xml - ≫この設定ファイルのグラフ(5.グラフサンプルの例1)

          
(説明)
1.データファイルおよびこの設定ファイルのファイル名は、HTMLページ(Javascript内)で指定します。
2.グラフタイトルは、 <labels>内で設定します。(196行〜)
3.日本語は、fontキーを日本語フォントを指定しなくとも表示できます。(*2)
fontキーで指定して確認した日本語フォントは、"MS ゴシック", "MS 明朝", "MS Pゴシック", "MS P明朝"
および"魚石行書"です(Windows)。
4.円(ドーナッツ)の位置、大きさの設定(下のグラフ例の大きさは600×400(=x:y)です)(<pie>タグ32行目〜)


(図1)

  • 円(またはドーナッツ)の位置(中心)を<x>タグおよび<x>タグで指定します。
    例.xは210、yは200
  • 円(またはドーナッツ)の大きさをその中心からの長さで、<radius>タグで指定します。
    例.100(ピクセル)
  • ドーナッツの場合(全円でない場合)その大きさをその中心からの長さで、<inner_radius>タグで指定します。
    例.40(ピクセル)。なお、<inner_radius>タグで値を指定しないか0を指定した場合、全円となります。(省略値は0)。
5.円のスライスの色。(<pie>タグ-<base_color>タグまたは<colors>)(42〜46行目)
なお、色はデータファイルでも指定できます。ここより、データファイルで指定した色が優先します。
  • <base_color>タグの場合
    base_colorタグで、スライスの基準となる色を指定し、<brightness_step>タグで明るさの度合いを100〜-100(%)の範囲で指定します。
    明るさの度合いは、マイナス値を指定すると段々暗い色で描かれます。
    <base_color>#006400</base_color>
    <brightness_step>20</brightness_step>
    (上図1参照)
  • <colors>タグの場合
    colorsで、スライスの色(16進カラーコード)をカンマで区切りしていします。
    <colors>#FF0F00,#FF6600,#FF9E01,#FCD202,#F8FF01,#B0DE09,#04D215,#0D8ECF,#0D52D1,#2A0CD0,#8A0CCF,#0D52D1</colors>
    (下図2参照。なお、ダイハツはデータファイルで白を指定しています。)
    #FF0F00:#FF6600:#FF9E01: #FCD202:#F8FF01:#B0DE09:
    #04D215:#0D8ECF:#0D52D1: #2A0CD0:#8A0CCF:#0D52D1:
6.円のスライスのアニメーション動作は、<animation>タグ-<pull_out_only_one>タグで設定します(62行目〜)
スライスまたは凡例文字をクリックしたとき、そのスライスが円の外に引き出されます。
pull_out_only_oneの指定(true/false デフォルトはfalse)により、その動作が変わります。
  • false:スリックしたスライスをすべて引き出したままにします。図2参照(日産、ホンダ、富士重工が引き出されたまま)。 false:スリックしたスライスをすべて引き出したままにします。
    (図2)

  • true:スライスをクリックすると、引き出されているスライスは引き込みます。
7.円のスライスにマウスを当てると表示されるデータラベルは、<balloon>で設定します。(62行目〜)。グラフ例図3参照。


(図3)

8.表示中のグラフをイメージ(Jpeg画像)として、出力(ダウンロード)できます(<export_as_image>タグ)。(152行目〜)。
  • export_as_imageタグ内のタグで、グラフをイメージ(Jpeg画像)として出力するPHPファイルを指定します。
    (例)
    flash/export.php
  • <strings>タグで、フラッシュ上のコンテキストメニューの設定やNow Loading文字を設定します。(175行目〜)。
    何も設定しない場合(デフォルト)はつぎのとおり。
    ・コンテキストメニューの文字:Export as image( <export_as_image>タグ)
    ・Now Loading文字:Collecting data xx %( <collecting_data>タグ)
    (コンテキストメニューの例)
    コンテキストメニュー
9.日本語を扱う場合は、UTF-8で保存します。
10.データの編集機能は無いようです。例えば大きな数値の場合千単位にカンマで区切りたい等。
 123,335の表示はできません((4)項参照)。

4.3 Webページ(HTML)の作成

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

Webページ(HTML)
<html><!--ampie_1.0.5以下の場合-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT-JIS" />
<title>ampie</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="ampiechartdiv"></div> <!--*9 グラフ(SWF)埋め込み場所DIVの定義-->
        
        <script type="text/javascript">
        
            var params = 
            {
                bgcolor:"#ffffff"                                //*6
            };
            
            var flashVars = 
            {
                path: "ampie/",                                //*1
                settings_file: "ampie/ampie_settings-1.xml",   //*2
                data_file: "ampie/ampie_data.txt"              //*3
            };
            
            swfobject.embedSWF("flash/ampie.swf", "ampiechartdiv", "600", "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);
 pathは、関連ファイルの格納フォルダを指定します(最後に/を付けます)。
  • 背景の画像、フラッシュファイル@
  • データポイントマーク(バレット)のフラッシュファイルA
 これらの@Aファイルは、XML形式データファイル(bulletキー)または設定ファイル(bulletタグ、fileタグ)で指定します。
 Bのファイルは、pathの直下に置きます。
 (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) -
(5) bgcolor(*6);
  フラッシュの背景色(16進値)。設定ファイルでも指定できます(設定ファイル)。
(6) preloader_color(*7);
  フラッシュをローディン中の背景色(16進値)。
(8)swfobject.js(*8);
 SWF用 <OBJECT >タグ書き出しajax対応JSファイル(swfobject.js)を定義します。
(9)ampiechartdiv (グラフ埋め込み場所DIVのID)(*9);
 グラフ表示場所DIV IDを定義します。
(10) SWFObjectパラメータ-
swfobject.embedSWF("flash/ampie.swf", "ampiechartdiv", "520", "400", "8.0.0", "flash/expressInstall.swf", flashVars, params); (*10)
  • "flash/ampie.swf":ampie.swfのパス(Webページからの相対パスまたは絶対パス)
  • "ampiechartdiv":<object>タグのIDは、SWF(グラフ)埋め込み場所DIVのIDを指定
  • "520":フラッシュの横幅
  • "400":フラッシュの高さ
  • "8.0.0":Flash Playerのバージョンは8以上
  • "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.グラフサンプル

例1-ドーナッツグラフ:データファイルはCSVファイル  設定ファイル New!
*1:フラッシュ上を右クリックしてコンテキストメニュー(下)の「Export as image」をクリックするとグラフ画像がダウンロードできます。
*2:同じく、コンテキストメニューの「設定ファイルを見る」をクリックすると設定ファイルをダウンロードできます。
 コンテキストメニュー

例2ドーナッツグラフ:データファイルはXMLファイル 設定ファイル New!


例3円グラフ:データファイル(XML)はCGIで生成 >設定ファイル New!


例4 Javascriptによるグラフのコントロール(デモ)(旧版)
制約事項
  • 「export image」(フラッシュ→画像変換)は、PHPが動作するサーバが必要です。
  • データファイルや設定ファイルに日本語を含む場合、日本語が文字化けします。
    下の例は、日本語を意識的に入れていません。 >>設定ファイル


(サイト内グラフ関連リンク)
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.1.30初版(HTML基本編)

最終更新日:2012.2.14