今日の人気記事

  1. select要素の複数選択フォームを実装「Multiple Select」
  2. ハッシュリンクのアンカー名を拾う「xHashchange」
  3. テーブルやリストから文字列を検索「QuickSearch」
  4. 日付と時間の入力を補助する「DateTimePicker」
  5. 現在時刻も表示できるカウントダウン・タイマー「countdownTimer」

多角形レーダーチャートを作成「Canvas Chart」

スポンサーリンク

多角形レーダーチャートを作成するプラグイン「Canvas Chart」を紹介します。

jQueryプラグイン「Canvas Chart」

jQueryプラグイン「Canvas Chart」は、html5のcanvasを使って、レーダーチャートが簡単に作成できるプラグインです。このプラグインは、オプションが豊富で、項目数・線色・背景色・半径などなどレーダーチャート作成に必要なすべてが用意されています。便利なプラグインなので、おすすめです。レーダーチャートが必要なときはぜひぜひ。

スポンサーリンク

デモで多角形のレーダーチャートを作成してみましたので、ご覧ください。

「Canvas Chart」のデモ

デモのソース(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>
スポンサーリンク

関連記事(一部広告含む)