レーダーチャート (実験) jQueryプラグイン「Canvas Chart」 (JavaScript)
インストールされていないので、表現されず。
//////
//////
//////
//////
jQueryプラグイン「Canvas Chart」
インストールされていないので、表現されず。
//////
//////
//////
//////
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 //ゲージラインの目盛分割数
/////