レーダーチャートが簡単に作れる(chart.js)

色々できるのですが僕はレーダーチャートに使っています。

github.com

使い方

html部

<div class="chart">
  <canvas id="myChart" width="300px" height="300px">
  </canvas>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="vendor/Chart.js/Chart.min.js"></script>
<script type="text/javascript" src="js/myChart.js"></script>

myChart.js

$(function() {
    // チャートの枠組み
    var radarChartData = {
        // 項目
        labels: ["aaa", "bbb", "ccc", "ddd", "eee"],
        datasets: [
            {
                // 透明を使いたいのでRGBAで色を再現→rgba(xxx,xxx,xxx,0.5):透過度50%
                fillColor: "rgba(52,152,219,0.7)",  // チャート内の色
                strokeColor: "#eff1f5",             // チャートを囲む線の色
                pointColor: "#eff1f5",              // チャートの点の色
                pointStrokeColor: "#eff1f5",        // 点を囲む線の色
                // 各項目の値
                data: [10,2,7,10,5]
            }
        ]
    };
    // レーダーチャートの目盛とかの設定
    var canvas = document.getElementById("myChart");
    var context = canvas.getContext("2d");
    var chart = new Chart(context);
    var rader = chart.Radar(radarChartData, {
        scaleShowLabels: true,   // 目盛を表示（true/false）
        pointLabelFontSize : 10, // ラベルのフォントサイズ
        scaleOverride : true,    // 目盛の最大値を手動設定（true/false）
        scaleSteps : 10,         // 目盛の数
        scaleStartValue : 0,     // 目盛の最初の数
        scaleStepWidth : 1       // 目盛の間隔
        // 目盛の最大値の計算：scaleSteps（目盛の数）→5
        //                     scaleStepWidth（目盛の間隔）→2
        // だと5×2で最大値は10
    });
});