レーダーチャートを描画したかったので Chart.js を試してみた

レーダーチャートを表示したいんだけど、これまで Rails で使ってきた lazy_high_chart はどうも対応していないっぽい。

最近、JavaScript ライブラリをラップした gem を使うことに抵抗が出てきたので、 lazy_high_chart を使うのはやめて、他のライブラリを使うことにした。

チャートライブラリでは有名どころの『Chart.js』がレーダーチャートに対応していたので、こいつを試してみよう。

Chart.js | HTML5 Charts for your website.

レーダーチャートを描画するサンプルを描いてみた。パイチャートや棒チャートなどにも対応してるけど、今回は使う予定ないんで省略。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ChartSample</title>
  </head>
  <body>
    <!--レーダーチャートを描画する Canvas-->
    <canvas id="canvas" width="300px" height="300px">
    </canvas>

    <script src="jquery-2.0.1.js"></script>
    <script src="Chart.js"></script>
    <script>
      $(function() {
        // レーダーチャートで表示するデータを用意
        var radarChartData = {
          labels: ["スタミナ", "スピード", "テクニック", "パワー", "メンタル"],
          datasets: [
            {
              fillColor: "rgba(151,187,205,0.5)", // 線で囲まれた部分の色
              strokeColor: "rgba(151,187,205,1)", // 線の色
              pointColor: "rgba(151,187,205,1)",  // 点の色
              pointStrokeColor: "#fff",           // 点を囲む線の色
              data: [7,8,10,6,10]
            }
          ]
        };

        // Canvas にレーダーチャートを描画
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        var chart = new Chart(context);
        var rader = chart.Radar(radarChartData, {
          scaleShowLabels: true,  // 目盛を表示
          pointLabelFontSize : 10 // ラベルを表示
        });
      });
    </script>
  </body>
</html>

ブラウザで表示してみる。

f:id:griefworker:20130724190519p:plain

これくらいシンプルに使えるライブラリなら、わざわざ gem で導入する必要ないな。 Bower で入れれば済む。 Rails で使うときにヘルパーくらいは書くかもしれないけど。