レーダーチャートを表示したいんだけど、 これまで Rails で使ってきた lazy_high_chart はどうも対応していないっぽい。
最近、JavaScript ライブラリをラップした gem を使うことに抵抗が出てきたので、 lazy_high_chart を使うのはやめて、他のライブラリを使うことにした。
チャートライブラリでは有名どころの『Chart.js』がレーダーチャートに対応していたので、 こいつを試してみよう。
レーダーチャートを描画するサンプルを描いてみた。 パイチャートや棒チャートなどにも対応してるけど、今回は使う予定ないんで省略。
<!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>
ブラウザで表示してみる。
これくらいシンプルに使えるライブラリなら、わざわざ gem で導入する必要ないな。 Bower で入れれば済む。 Rails で使うときにヘルパーくらいは書くかもしれないけど。