簡単に円グラフを作成するamcharts

Pie & Donut chart
というやつです。
(追記:11/2:簡単に円グラフを作成するamcharts

レポート出力に円グラフがほしくて、
円グラフって作りにくいなーと思っていたので調べていたら見つけました。
amCharts

かなりいい感じです。
導入も楽です。
とりあえず今回は円グラフだけですが。

使い方

とりあえずダウンロードして解凍。
ampieを適当にアップロードする。

<script type=”text/javascript” src=”ampie/swfobject.js”></script>
<script type=”text/javascript”>
window.onload=function(){
 var so = new SWFObject(“ampie/ampie.swf”, “ampie”, “465”, “380”, “8”, “#FFFFFF”);
 so.addVariable(“path”, “ampie/”);
 so.addVariable(“settings_file”, escape(“ampie/ampie_settings.xml”));
 so.addVariable(“preloader_color”, “#999999”);

  so.addVariable(“data_file”, escape(“ampie/ampie_data.xml”));
  so.write(“graph”);
}
</script>

これを<head> 部分に貼り付けて
<body>部分に

//好きなところに
<div id=’graph’></div>

これを貼り付けるだけです。
scriptタグで動的にJSをロードしておいて、onloadでグラフオブジェクト作成>表示
という感じです。

適当に解説

遊べる部分はここらへんですね。

・ampie_settings.xml
・ampie_data.xml

ampie_settings.xmlは文字通りセッティング関連のXMLです。
グラフの角度とか文字の大きさ、色、透明度とかの設定。
別にデフォルトでも特に問題ないですがw

<pie>っていうところが円グラフのステータスです。

//円グラフの厚み
<height>8</height>

//円グラフの角度
<angle>30</angle>

ここら辺をいじれば見栄えがします。
heightを高くしすぎると やったら表示に時間がかかるので注意です。

ampie_data.xmlが円グラフの元データです。
型が決まっているので、その形式で出力すればそれだけでOKです。

<pie>
<slice title=”20~24歳” pull_out=”true”>5</slice>
<slice title=”25~29歳”>10</slice>
<slice title=”30~34歳”>7</slice>
</pie>

こんな感じですね。
自分はUTF8でやってますが、文字コードがおかしいと
データがありませんとかいうエラーになるので注意してください。

Leave a Reply