amCharts LINKS & other；
|
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が著作権を持っています。
１．アプリケージョンの構成
グラフ作成アプリケージョンの構成は、以下のとおりです。
|
|
| ||||
２．システム構成（動作確認マシン環境）
| ||||||||||||
３．グラフライブラリーamChartsのインストール
 |
４．グラフの作成方法（折れ線グラフと面グラフ Line & Area chart）
amChartsの折れ線グラフを作成するためには、次の２つのファイル（①、②）を作成、カスタマイズし、Webページ（③）を作成します。
４．１ データファイルの作成
| ⇒ |
|
|
| 月 | 平均気温 | 最高気温 | 最低気温 | 日照時間 |
| 1月 | 5.8 | 9.8 | 2.1 | 180.5 |
| 2月 | 6.1 | 10 | 2.4 | 161.1 |
| 3月 | 8.9 | 12.9 | 5.1 | 159.2 |
| 4月 | 14.4 | 18.4 | 10.5 | 164.9 |
| 5月 | 18.7 | 22.7 | 15.1 | 180.9 |
| 6月 | 21.8 | 25.2 | 18.9 | 120.1 |
| 7月 | 25.4 | 29 | 22.5 | 147.5 |
| 8月 | 27.1 | 30.8 | 24.2 | 177.5 |
| 9月 | 23.5 | 26.8 | 20.7 | 112.9 |
| 10月 | 18.2 | 21.6 | 15 | 129.9 |
| 11月 | 13 | 16.7 | 9.5 | 141.4 |
| 12月 | 8.4 | 12.3 | 4.6 | 171.1 |
#!/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
|
|
４．２ 設定ファイルのカスタマイズ
|
４．３ Webページ（HTML)の作成
<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>
|
|
５．グラフサンプル
|
|
|
（変更履歴）
| 2007.4.1 | 初版（折れ線グラフ基本編-amline） | |
| 2012.2.14 | flashバージョン最新版 |
最終更新日：2012.2.14
