Js + each doで複数回実行

Vue.jsのライブラリchart.js(グラフ)を使い、each doでグラフを複数回表示させたいのですが、最初の1回しか表示されません
こちらと同じ悩みなのですが、参考にしても上手くいきませんでした
ご教示お願いします

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<% @avgs.each do |avg|%>
省略
<canvas class="RaderChart"></canvas>
<script>
  var ctx = document.getElementsByClassName("RaderChart");
  var RaderChart = new Chart(ctx,{
    type: 'radar',
    data: {
      labels: ["攻撃力","守備力","投手力","総合力","期待度"],
      datasets: [{
        label: '戦力',
        data: 考え中
        backgroundColor: 'RGBA(225,95,150, 0.5)',
        borderColor: 'RGBA(225,95,150, 1)',
        borderWidth: 1,
        pointBackgroundColor: 'RGB(46,106,177)'
      }]
    },
    options: {
      title: {
        display: true,
      },
      layout: {
        padding: {
          left: 550,
        }
      },
      scale: {
        ticks: {
          suggestedMin: 0,
          suggestedMax: 5,
          stepSize: 1,
          callback: function(value,index,values){
            return value
          }
        }
      }
    }
  });
</script>