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>


参考:
[JavaScript] Chart.js を使って線グラフを描画する | unlinked log