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

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

sponsors

使用方法

今回は円グラフを紹介します。
Pie & Donut chartのDownloadからファイル群をダウンロードします。
<script src="http://yourdomain/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
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行目くらいにあります。

sponsors

Javascriptサンプルページ一覧
skuare.net

サンプル

You need to upgrade your Flash Player