レーダーチャート (実験) jQueryプラグイン「Canvas Chart」 (JavaScript)

インストールされていないので、表現されず。
//////
jQueryプラグイン「Canvas Chart」graph_radar

//////
jQueryプラグイン「Canvas Chart」graph_radar (1)

//////
jQueryプラグイン「Canvas Chart」graph_radar(3)

//////
 jQueryプラグイン「Canvas Chart」
レーダーチャートを作成「Canvas Chart」

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

/////
デモのソース(HTML + jQuery)
ソースを表示印刷SyntaxHighlighterについて
///// 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery Canvas Chart - jQueryプラグインまとめのカルマ</title>
<!--[if IE]><script src="excanvas.js"></script><![endif]-->
<script src="http://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>


/////
jsファイルのダウンロードやその他オプションはこちらからどうぞ。
/////

デフォルトの設定

基本設定

  • polygon : 5,//頂点の数
  • chartInput : '.chartInput',//チャートのインプットclass
  • valuation : 5, //評価値
  • radius : 150, //半径
  • bgType : 'pol', //背景のタイプ  pol:多角形 or arc:円
  • angle : '', //レーダーチャートの回転度数

背景

  • bgStroke : true, //背景の線 true or false
  • bgStrokeColor : '#ddd', //背景の線色
  • bgLineWidth : 1, //背景の線の太さ
  • bgFill : true, //背景の塗り true or false
  • bgFillColor : '#fafafa', //背景の塗り
  • bgDivision : undefined, //背景の分割数

チャート

  • chartStrokeColor : ['#ffa656'], //チャートの線
  • chartFillColor : ['rgba(255, 210, 170, 0.5)'],//チャートの塗り色 noneで塗らない
  • chartLineWidth : 1,//線の太さ

レーダーチャートの頂点

  • chartPoint : true, //チャートの点描画 true or false
  • chartPointType : ['square'], //点の図形タイプ square:四角 or arc:円
  • chartPointType2 : ['fill'], //線か塗りつぶし stroke or fill
  • chartPointLineWidth : 1,//頂点の線の太さ
  • chartPointSize : [10], //チャートの点サイズ
  • chartPointColor : [''], //チャートの点描画色、指定無しで背景線と同じ色

チャートタイプ

  • selectable : false,//セレクタブル機能、radio selectに対応、inputのnameにselectableを指定してください
  • selectableName : 'selectable',//セレクタブル名、デフォルトでselectable
  • checkbox : false,//チェックボックス機能、radio selectに対応、inputのnameにcheckboxを指定してください
  • checkboxName : 'checkbox',//チェックボックス、デフォルトでcheckbox
  • compare : false,//比較機能、使用する際はselectableかcheckboxをtrueにしてください

評価名

  • valuationPrint : true, //評価名の表示 true or false
  • valuationName : ['評価1','評価2','評価3','評価4','評価5'],//評価名
  • valuationPosition : 1.15, //評価名要素の位置
  • valuationClass : '', //評価名要素のclass デフォルトでvalName

評価の数値

  • valuationCntPrint : true, //評価の数値表記 true or false
  • valuationCntClass : '', //評価の数値のclass デフォルトでvalCntName
  • valuationCntPosition: 10, //評価の数値位置
  • printZero : true, //中央0の表記 true or false
  • valuationCntDivision: undefined, //評価の数値分割数

中央からのゲージライン

  • gauge : true, //中央からのゲージライン描画 true or false
  • gaugeColor : '', //中央からのゲージライン描画色、指定無しで背景線と同じ色

ゲージラインのスケール

  • scale : true, //ゲージラインの目盛り描画 true or false
  • scaleSize : 10, //ゲージラインの目盛りサイズ
  • scaleColor : '' //ゲージラインの目盛り色、指定無しで背景線と同じ色
  • scaleDivision : undefined //ゲージラインの目盛分割数
///// 
jQueryプラグイン「Canvas Chart」graph_radar(2)

/////