Rails4 Chart.jsでレーダーチャートを表示する
レーダーチャートを表示したかった。
「Chart.js」というものを使うと簡単にレーダーチャートを表示できた。
まず、下記のページからChart.jsをダウンロードする。
nnnick/Chart.js · GitHub
画面右下の「Download ZIP」ボタンをクリックすると、ダウンロードが始まる。
ダウンロードしたZIPを解凍し、「Chart.js-master」フォルダ内の「Chart.js」ファイルのみを、Railsプロジェクトの「\vendor\assets\javascripts」にコピーする。
レーダーチャートを表示したいerbファイルに下記のように、レーダーチャートを記述する。
<!--レーダーチャートを描画する Canvas--> <canvas id="canvas" width="300px" height="300px"> </canvas> <%= javascript_include_tag "Chart" %> <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>
注意点は、Chart.jsの読み込みを下記のように書いているところ。
<%= javascript_include_tag "Chart" %>
「\app\assets\javascripts」に置かれたファイルは特に読み込む必要はないが、「\vendor\assets\javascripts」に置いたファイルは上記のように読み込まなければならない。
ブラウザで表示すると次のようになった。
参考:
レーダーチャートを描画したかったので Chart.js を試してみた - present
Rails3.1でJavaScriptが使えなくて困った - ヨーグルト大学演習室
Chart.js | HTML5 Charts for your website.