簡単に円グラフを作成する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です。
グラフの角度とか文字の大きさ、色、透明度とかの設定。
別にデフォルトでも特に問題ないですがｗ
<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でやってますが、文字コードがおかしいと
データがありませんとかいうエラーになるので注意してください。