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을 사용하면 좋을 것입니다.