skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

グラフ作成の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」サンプル

記事作成：2007年09月26日

前の記事：ページ内をスクロールさせるjavascript「auto-scrolling-page-navigation」
次の記事：角を丸めるjavascript「Nifty Corners Cube」