グラフ作成javascriptの最高峰「amCharts」 : skuare.net

グラフ作成javascriptの最高峰「amCharts」

2007

09/26

グラフ作成のjavascriptは数あれどここまでデザインに優れたものはなかったでしょう。
amChartsはFlashとjavascriptにより華麗でクールなPie & Donut、Line & Area、Column & Bar、Scatter & Bubbleのグラフを作成できます。
ただし、無料版はamChratsへのテキストリンクが掲載されます。

使用方法
今回は円グラフを紹介します。
Pie & Donut chartのDownloadからファイル群をダウンロードします。
<script src="http://yourdomain/swfobject.js" type="text/javascript"></script> <script type="text/javascript"> // <![CDATA[ var so = new SWFObject("http://yourdomain/ampe.swf", "ampie", "520", "400", "8", "#FFFFFF"); so.addVariable("path", "http://yourdomain/ampie/"); so.addVariable("settings_file", escape("http://yourdomain/ampie_settings.xml")); //グラフ設定ファイル so.addVariable("data_file", escape("http://yourdomain/ampie_data.xml")); //グラフデータ so.addVariable("preloader_color", "#999999"); so.write("flashcontent"); // ]]> </script>
上記のようにjavascriptを書き込みます。
またFlashが最新でない場合に表示するHTMLを以下の通り記します。
<div id="flashcontent">フラッシュを最新バージョンにアップグレードしてください。</div>
グラフデータの記述方法は以下の通りです。
<pie> <slice title="項目1" pull_out="true">数値</slice> <slice title="項目2" pull_out="false" alpha="透明度">数値</slice> //　以下項目分 </pie>
pull_outは表示した時に出っ張らせるかどうかです。
設定はダウンロードしたファイルに英語で説明があり、なんとなくわかると思います。
なお、タイトルの設定は、130行目くらいにあります。
グラフ作成javascriptの最高峰「amCharts」サンプル