Web Design Office スタジオビートル―滋賀県草津市のWeb制作会社

ホームページやECサイトなどWebサイト制作のお問い合わせはこちら077-566-3365

いろいろメモ帳Memos

プログラム関連Program

多角形レーダーチャートの作り方

2013年10月26日
タグ:jQuery,レーダーチャート
投稿者:Webディレクター 藤居
多角形レーダーチャートの作り方
以前、pChartでレーダーチャートを作成したのですが、

pChartが、2009年8月19日以降、アップデートがない?ので

jQueryでレーダーチャートを作る方法を探してみました。

すると「Jquery Canvas Chart」なるものを発見!

俺WEB 跡地 」様にて配布されています。(有難うございます。m(_ _)m

jQueryとhtml5のcanvasを使って多角形レーダーチャートを作るようです。

早速、作ってみました。



では、作り方!

①「俺WEB 路地」様よりjquery.canvasChart.jsをダウンロード

②Googleさんのexcanvas.jsをダウンロード

③コードを書いて出来上がり!

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.canvasChart.js"></script>

<!--[if IE]><script type="text/javascript" src="./js/excanvas.js"></script><![endif]-->
<script type="text/javascript">
$(function(){
	$('#canvasChart').canvasChart({
		//各種設定
	});
});
</script>
</head>
<body>

<div id="canvasChart">
	<canvas width="380" height="380"></canvas>
	<div class="chartInput">
		<input type="hidden" value="5" id="input1" name="input1" />
		<input type="hidden" value="4" id="input2" name="input2" />
		<input type="hidden" value="5" id="input3" name="input3" />
		<input type="hidden" value="3" id="input4" name="input4" />
		<input type="hidden" value="2" id="input5" name="input5"  />
	</div>
</div>

</body>
</html>

各パラメータの設定を変更すれば、いろいろできるみたいです。

他の装飾やらできるかやってみて、うまくいけそうなら、以前作ったpChartのグラフから

こっちに変えようかしら。。。


あなたのホームページを無料診断します!ホームページ診断
WEBデザイナー&プログラマー求人募集
正当なCSSです!
レスポンシブデザインテンプレート販売サイトEC|TEMPLATES
TOP