Chart.jsで円グラフを書く

chart.jsでデータベースの値から簡単な円グラフを作成
スポーツの大会でよくある勝敗確率のグラフ(最高100%という設定)

データベース

forecastsテーブル
numはwin_schoolの勝利確率
win_schoolは勝利予想されているチーム
lose_schoolは負け予想されているチーム

id	num	user_id	win_school	lose_school
1	60	1	A学園	B学園

コントローラー

idが1のデータを取ってこれる設定

def show
  @forecast = Forecast.find(params[:id])
end

htmlファイル

<div class="win"><%= @forecast.win_school %></div><!-- A学園 -->
<div class="lose"><%= @forecast.lose_school %></div><!-- B学園 -->
<div class="win-rate"><%= @forecast.num %></div><!-- 60 -->
<div class="pie"><!-- グラフ描画部分 -->
  <div style="width:60%; height:60%";><canvas id="PieChart"></canvas></div>
</div>
<%= javascript_pack_tag 'forecast' %> <!-- js読み込み -->

非表示にさせたい場合はhiddenを使うと良いでしょう

<div hidden class="win">

jsファイル

app > javascript > packs > forecast.js

var ctx = document.getElementById("PieChart");
var win = document.getElementsByClassName("win").textContent //クラス名winから値を取得(A学園)
var lose = document.getElementsByClassName("lose").textContent //クラス名loseから値を取得(B学園)
var winnum = document.getElementsByClassName("win-rate").textContent  //クラス名win-rateから値を取得(60)
var PieChart = new Chart(ctx, {
  type: 'pie', //グラフのタイプは円グラフです、という意味
  data: {
    labels: [win,lose], //円グラフのラベル(円グラフのA学園,B学園と表示されている箇所)
    datasets: [{
      backgroundColor: [ //円グラフの色
        "#FF0000", //1つめの色(ラベルwin)は赤
        "#33CCFF", //2つめの色(ラベルlose)は水色
      ],
      data: [winnum,100-winnum] //グラフの値 下記参照
    }]
  },
  options: { //オプションでカスタマイズ？
    title: {
      display: true,
      text: '勝利確率'//グラフのタイトル
    }
  }
});

data:でグラフに値を挿入しています
変数winnumには60が入っているので60,2つめは100-60で40が入るので
A学園の勝率60%,B学園の勝率40%ということになります

data: [winnum,100-winnum]

今回はhtmlファイルから値を取得しました
コントローラーから取得したい場合は、gonを使えば良いと思います