多角形レーダーチャートを作成「Canvas Chart」
当ページのリンクには広告が含まれています。
スポンサーリンク
多角形レーダーチャートを作成するプラグイン「Canvas Chart」を紹介します。
jQueryプラグイン「Canvas Chart」
jQueryプラグイン「Canvas Chart」は、html5のcanvasを使って、レーダーチャートが簡単に作成できるプラグインです。このプラグインは、オプションが豊富で、項目数・線色・背景色・半径などなどレーダーチャート作成に必要なすべてが用意されています。便利なプラグインなので、おすすめです。レーダーチャートが必要なときはぜひぜひ。
スポンサーリンク
デモで多角形のレーダーチャートを作成してみましたので、ご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Jquery Canvas Chartのデモでーす。">
<title>Jquery Canvas Chart - jQuery Plugin Demo</title>
<!--[if IE]><script src="excanvas.js"></script><![endif]-->
<script src="//code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="jquery.canvasChart.js"></script>
<script>
$(function(){
$('.canvasChart').canvasChart({
polygon : 5,
chartPointType : ['arc'],
chartPointSize : [2],
valuationName : ['優しさ','顔','年収','性格','ファッション'],
printZero : false,
scale : false,
bgFill : false
});
});
</script>
</head>
<body>
<h1>Jquery Canvas Chartのデモでーす。</h1>
<div class="canvasChart">
<canvas width="500" height="500"></canvas>
<div class="chartInput">
<input type="hidden" value="2" name="優しさ" />
<input type="hidden" value="1" name="顔" />
<input type="hidden" value="1" name="年収" />
<input type="hidden" value="5" name="性格" />
<input type="hidden" value="3" name="ファッション" />
</div>
</div>
</body>
</html>
スポンサーリンク