chart.jsでレーダーチャート作成とちょっとした調整点

chart.jsでレーダーチャートを作成する時に、ちょっと詰まったところまとめ。
基本的には公式documentを参照。
http://www.chartjs.org/docs/
基本的には簡単で使いやすかった。

基本的なコード

<canvas id=“radarChart” width=“300” height=“300”></canvas>

$(function(){
    var data = {
        labels: [“ラベル1", “ラベル2", “ラベル3", “ラベル4", “ラベル5"],
        datasets: [
            {
                label: "レーダーチャート",
                fillColor: "rgba(200,0,0,0.2)",
                strokeColor: "red",
                pointColor: "red",
                pointStrokeColor: "red",
                pointHighlightFill: "red",
                pointHighlightStroke: "red",
                data: [6, 12, 10, 18, 2]
            }
        ]
    };
    var ctx = document.getElementById("radarChart").getContext("2d");
    var options = {
        pointLabelFontSize : 12,
        scaleOverride : true,
        scaleSteps : 8,
        scaleStepWidth : 2,
        scaleStartValue : 0
    };
    var radarChart = new Chart(ctx).Radar(data, options);
});

チャートの最大値の設定と線の本数

options.scaleStepsが、線の数。
options.scaleStepWidthが、線1本あたりの値。
なので、最大値は options.scaleSteps * options.scaleStepWidth になる。
上の例だったら、最大値は18。

スマホでのtap-highlight-color

このままだと、スマホで領域をタップした時に黒っぽいハイライトが出るので
(-webkit-)tap-highlight-color を
rgba(255,255,255,0)
とかで消してあげる。