表現力豊かなグラフチャートを作成/コンテンツ表示/SolidStateEveryday

スポンサードリンク

SAMPLE
CODE
DownLoad

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pie & Donut chart</title>
</head>

<body>
<!-- saved from url=(0013)about:internet -->
<!-- ampie script-->
  <script type="text/javascript" src="ampie/swfobject.js"></script>
	<div id="flashcontent">
		<strong>You need to upgrade your Flash Player</strong>
	</div>

	<script type="text/javascript">
		// <![CDATA[		
		var so = new SWFObject("ampie/ampie.swf", "ampie", "520", "400", "8", "#FFFFFF");
		so.addVariable("path", "ampie/");
		so.addVariable("settings_file", encodeURIComponent("ampie/ampie_settings.xml"));                // you can set two or more different settings files here (separated by commas)
		so.addVariable("data_file", encodeURIComponent("ampie/ampie_data.xml"));
    		
//	so.addVariable("chart_data", encodeURIComponent("<settings>...</settings>"));                   // you can pass chart data as a string directly from this file
//	so.addVariable("chart_settings", encodeURIComponent("data in CSV or XML format"));              // you can pass chart settings as a string directly from this file
//	so.addVariable("additional_chart_settings", encodeURIComponent("<settings>...</settings>"));    // you can append some chart settings to the loaded ones
//  so.addVariable("loading_settings", "LOADING SETTINGS");                                         // you can set custom "loading settings" text here
//  so.addVariable("loading_data", "LOADING DATA");                                                 // you can set custom "loading data" text here
//  so.addVariable("preloader_color", "#999999");
		so.write("flashcontent");
		// ]]>
	</script>
<!-- end of ampie script -->
</body>
</html>

	http://www.amcharts.com/

棒グラフ、円グラフ、折れ線グラフ、レーダーチャートなどデザイン性に優れたグラフを作成します。
グラフ表示部分はFlashにて表示されるためほんのりアニメーション付き。
データの設定は主にXMLファイルを読み込ませて行い、基本的な設定はとても簡単です。
グラフの種類ごとにファイルをダウンロードして利用しなければなりませんが、日本語での表示もOKなので重宝すると思います。
リンクウェアで商用サイトはシェアウエアになるようです。

セッティング

１．ダウンロード/セッティング

今回のサンプルでは、 Pie & Donut chart を利用しているので、サイトへ行きダウンロード項目からそれをダウンロードしてください。
解凍したらhtmlファイルでサンプルが付いてます。
基本的にはそこに書いてあるコードをコピペすれば使えるようになります。とりあえず今回の場合は ampieフォルダを適当な場所へアップロード。