|
amCharts LINKS & other；
|
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が著作権を持っています。
１．アプリケージョンの構成
グラフ作成アプリケージョンの構成は、以下のとおりです。
|
|
| ||||
２．システム構成（動作確認マシン環境）
| ||||||||||||
３．グラフライブラリーamChartsのインストール
 |
４．グラフの作成方法（円とドーナツグラフ Pie & Donut chart）
amChartsのグラフを作成するためには、次の２つのファイルを作成、カスタマイズし、Webページを作成します。
４．１ データファイルの作成
|
1 トヨタ自動車;2529293;true;;;10年連続TOP 2 日産自動車;646016 3 ホンダ;627952 4 スズキ;369526 5 ダイハツ工業;134448;true;#ffffff 6 マツダ;720573 7 三菱自動車;406238 8 富士重工;238836;true |
|
|
|
#!/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
|
|
４．２ 設定ファイルのカスタマイズ
|
| ||||||||||||
|
４．３ 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>
|
|
５．グラフサンプル
|
|
|
|
制約事項
|
|
|
|
（変更履歴）
| 2007.1.30 | 初版（HTML基本編） |
最終更新日：2012.2.14
