railsで、平均値ランキングをchart.jsで作る場合について

Question

railsのChart.jsで、itemに紐づくレビューの平均値を、レビュー項目ごとにランキングにしたいのですが、dataにどう連携すればいいのかわかりません。

例）
みかん、オレンジ、レモン(item)について、ユーザーが酸っぱさ（rating1カラム）の星５段階評価をしていくと、その平均値がランキングで表示されるようにしたいです。
「酸っぱさランキング」ページにいくと、みかん、オレンジ、レモン、それぞれの平均値が横棒グラフ(horizontalBar)として表示されているイメージです（ランキングにしたいので平均値が大きい順になるともっと嬉しいです）

<% @items.each do |t| %>
 </div> 
 <div class="avg"><%= t.reviews.average(:rating1)  %></div>　// これであれば各itemのrating1カラム平均値が列挙できる
 <% end %>

// 以下、chart.js。dataのところに何を入れればいいのかわかりません
 <canvas class="myCharts"></canvas>
  <script>
    ctx = document.getElementsByClassName("myCharts");
    var avg = document.getElementsByClassName("avg");
    myChart = new Chart(ctx, {
       type: "horizontalBar",
      data: {
            labels: <%== @itemname %>, 　// ここは全てのitem名がちゃんと列挙される
            datasets: [             
                {
                        data:  [1,2,3,4],  // ここの置き換えがわからない
                    backgroundColor: ["red", "yellow", "green", "blue", "purple"]
                }
                    ]
        },
options: {
            responsive: false,
            title: {
                display: true,
                fontSize: 20,
                text: "酸っぱさランキング"
            },
            legend: {
                display: false,
            },                
            scales: {
                xAxes: [ // Ｘ軸のオプション
                    {
                        ticks: {
                            min: 0
                        }
                    }
                ],
                yAxes: [                   //
                    {                      //
                        ticks: {           //
                            reverse: true  // 
                        }                  //
                    }                      //
                ]                          //
            }

        }
    });

</script>
 </div>

◆やってみたこと
①idだと複数表示されないという回答を別記事で見たので、classにしました

②普通にeachメソッドで　<%= t.reviews.average(:rating1) %>　とすれば、全ての項目の数値が出てきます。しかし、chart.jsの中のdataにそれを入れてもグラフの数値は表示されませんでした。同様にcontroller上でgonを利用して代入してみましたが、これもうまく表示されませんでした。

// 以下でやってみました
     data: {
            labels: <%== @itemname %>, 
            datasets: [      
                <% @items.each do |t| %>    　// ここ追加してみました
                {
                        data: <%= t.reviews.average(:rating1)  %>, 　// ここに追加してみました
                    backgroundColor: ["red", "yellow", "green", "blue", "purple"]
                }
                 <% end %>　// ここ追加してみました
                    ]
        },

③controller上で平均値を指す変数を定義、

  @items.each do |item|
  @ratesum= item.reviews.sum(:rating1)  # カラムのデータの合計値 
  @ratecount= item.reviews.count(:rating1) # カラムのデータ個数
  @rateavg = @ratesum.to_f/@ratecount
  end

chart.jsの方で以下のように記載すると、なぜか一番最後のitemの平均値が一番上のitemに反映されました。
それ以外はまっさらです。

data: {
            labels: <%== @itemname %>, 
            datasets: [      
 
                {
                        data: [<%= @rateavg  %> ], 　// ここに追加してみました
                    backgroundColor: ["red", "yellow", "green", "blue", "purple"]
                }

                    ]
        },

④以下をcontrollerで定義、gon.rating1をchart.jsのdataに代入してみましたが、これだと配列の中から順番に数値が表示されるようです。以下の場合、平均値をどう出せばいいのかわかりませんでした。

// 以下で定義
  reviews = Review.all
  @rating1 = reviews.map { |review| review.rating1 }
  gon.rating1 = @rating1