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

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

使用方法
今回は円グラフを紹介します。
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」サンプル

sponsors

「グラフ作成javascriptの最高峰「amCharts」」をシェアする

記事作成:
記事URL:

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