Rails4 Chart.jsでレーダーチャートの目盛ラベルを変更する
chart.jsで描画したレーダーチャートの目盛ラベルを変更するのに苦戦したので、その方法をメモ。
コントローラで、表示したい目盛ラベルを変数に代入する。
デフォルトと同じ
@scale_label = "<%= value %>"
デフォルトの目盛ラベルにPを付加する場合
@scale_label = "<%= value %>P"
アルファベットに置き換える場合
@scale_label = "<%= value.replace('5','A').replace('4','B').replace('3','C').replace('2','D').replace('1','E') %>"
erbファイルでコントローラで設定した変数をscaleLabelにエスケープをオフにして設定する。
この時、<%= %>をダブルクォーテーションで囲むこと。
<!--レーダーチャートを描画する 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: [3,4,5,2,3] } ] }; // Canvas にレーダーチャートを描画 var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var chart = new Chart(context); var rader = chart.Radar(radarChartData, { scaleOverride : true, // 目盛の設定を変更 scaleSteps : 5, // 目盛の数 scaleStepWidth : 1, // 目盛間隔 scaleStartValue : 0, // 目盛の最小値 scaleShowLabels : true, // 目盛ラベルの使用フラグ scaleLabel : "<%= @scale_label.html_safe %>", // 目盛ラベル animation: false // アニメーションの使用フラグ }); }); </script>