[JavScript] Chart.jsを使ってレーダーチャートを描画する
(インストール されていないので、表現されず)
環境
Chart.js 0.2
ダウンロード
///////
///////
///////
<script src="./Chart.min.js"></script>
<canvas id="canvas" height="450" width="600"></canvas>
<script type="text/javascript" src="http://www.chart.min.js"></script>
<script type="text/javascript">
//上2行はなし(仮)
//上2行はなし(仮)
var radarChartData = {
labels : ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
datasets : [
{
fillColor : "rgba(220, 220, 220, 0.5)",
strokeColor : "rgba(220, 220, 220, 1)",
pointColor : "rgba(220, 220, 220, 1)",
pointStrokeColor : "#fff",
data : [1, 59, 90, 81, 56, 55, 40, 30, 10, 40, 48, 58]
},
{
fillColor : "rgba(151, 187, 205, 0.5)",
strokeColor : "rgba(151, 187, 205, 1)",
pointColor : "rgba(151, 187, 205, 1)",
pointStrokeColor : "#fff",
data : [28, 48, 40, 19, 96, 27, 100, 33, 63, 31, 64, 51]
}
]
}
// オプション
var options = {
// 値のラインが棒グラフの値の上にかぶさるようにするか
scaleOverlay : true,
// 値の開始値などを自分で設定するか
scaleOverride : false,
// 以下の 3 オプションは scaleOverride: true の時に使用
// 値のステップ数
scaleSteps : 10,
// 値のステップする大きさ
scaleStepWidth : 10,
// 値の始まりの値
scaleStartValue : 0,
// 値の円ラインの表示
scaleShowLine : true,
// 円ラインの色
scaleLineColor : "rgba(0, 0, 0, .1)",
// 円ラインの幅
scaleLineWidth : 1,
// ラベルの表示
scaleShowLabels : true,
// ラベルの表示フォーマット
scaleLabel : "<%=value%>%",
// ラベルのフォント
scaleFontFamily : "'Arial'",
// ラベルのフォントサイズ
scaleFontSize : 12,
// ラベルのフォントスタイル, normal, italic など
scaleFontStyle : "italic",
// ラベルの文字色
scaleFontColor : "#666",
// ラベルの背景色を塗りつぶすか
scaleShowLabelBackdrop : true,
// ラベルの背景色
scaleBackdropColor : "rgba(255, 255, 255, 0.8)",
// ラベルの Padding 上下
scaleBackdropPaddingY : 5,
// ラベルの Padding 左右
scaleBackdropPaddingX : 5,
// 中央からポイントラベルに向かう線の表示
angleShowLineOut : true,
// 中央からポイントラベルに向かう線の色
angleLineColor : "rgba(0, 0, 0, .1)",
// 中央からポイントラベルに向かう線の幅
angleLineWidth : 1,
// ポイントラベルのフォント
pointLabelFontFamily : "'Arial'",
// ポイントラベルのフォントスタイル
pointLabelFontStyle : "normal",
// ポイントラベルのサイズ
pointLabelFontSize : 12,
// ポイントラベルの色
pointLabelFontColor : "#999",
// 値の点の表示
pointDot : true,
// 値の点の大きさ
pointDotRadius : 2,
// 値の点の線の幅
pointDotStrokeWidth : 1,
// データ部分の枠線の表示?変化がなかった
datasetStroke : true,
// データ部分の枠線の幅
datasetStrokeWidth : 1,
// データ部分の塗りつぶし?変化がなかった
datasetFill : true,
// 表示の時のアニメーション
animation : false,
// アニメーションの速度 ( ステップ数 )
animationSteps : 60,
// アニメーションの種類, 以下が用意されている
// linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic,
// easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint,
// easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine,
// easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc,
// easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack,
// easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce
animationEasing : "easeOutQuad",
// アニメーション終了後に実行する処理
// animation: false の時にも実行されるようです
// e.g. onAnimationComplete : function() {alert('complete');}
onAnimationComplete : null
}
var chart = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, options);
</script>
/////// </script>