chart.js와 gon으로 그래프 만들기

rails의 controller에서 gem의 gon로 변수를 전달합니다.
chart.js에서 그래프를 만들었으므로 기록에 남겨 둡니다.

chart.js 로드

application.html에 붙여넣기

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"</script> ←　追加
<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
</head>

show.html

<canvas id="myChart" width="150" height="80"></canvas>　　←サイズ大きかったので変更してます

js 파일에 그래프 작성

<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["赤", "青", "黄色", "緑", "紫", "橙"],
        datasets: [{
            label: '得票数',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

이쪽은

htps : // 미 sc. 0오0오. 오 rg / cha rtjs-do c-ya /

일본어 문서를 인용했습니다!
사용 방법에 실렸습니다.

여기서 show 페이지에 막대 그래프 만들어졌기 때문에 다음은 rails의 controller로부터 javascript에 변수를 건네 갑니다.

Gon 설치

gem 'gon',  '~> 6.2.0'

bundle install

application.html

<%= include_gon %>
...省略
</head>

방금 전의 로딩 위에 붙였습니다.

@your_int = 123
@your_array = [1,2]
@your_hash = {'a' => 1, 'b' => 2}
gon.your_int = @your_int       
gon.your_other_int = 345 + gon.your_int
gon.your_array = @your_array
gon.your_array << gon.your_int
gon.your_hash = @your_hash

gon.all_variables # > {:your_int => 123, :your_other_int => 468, :your_array => [1, 2, 123], :your_hash => {'a' => 1, 'b' => 2}}
gon.your_array # > [1, 2, 123]

견적: htps : // 기주 b. 코 m / 가자 y / 곤

해시도 배열도 넣을 수 있다고 합니다.

pet의 체중을 그래프로 하고 싶었기 때문에,

 @pet = Pet.find(params[:pet_id])

 gon.weight = Condition.where(pet_id: @pet.id).pluck(:weight)
 gon.recorded_date = Condition.where(pet_id: @pet.id).pluck(:recorded_date)

Condition 테이블의 weight 컬럼에서 pet_id로 짜내고 gon.weight에 대입했습니다. (X축)
Condition 테이블의 recorded_date는 하루입니다. (Y축)

htps : // 놀라운 l. 코 m / 쿠에 s 치온 s / 193183

참고로 했습니다.
감사합니다.

이것을 이전 js 파일에 넣습니다.

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: gon.recorded_date, <=　変更
    datasets: [{
      label: '体重',  <=　変更
      data: gon.weight,　<=　変更
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
      ],
      borderColor: [
        'rgba(255,99,132,1)',
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    }
  }
});

선 그래프가 좋았기 때문에 type : 'line'으로 만들었습니다.
문서에 많은 유형이 실려있었습니다.

이상입니다.
아직도 할 수있는 것들이 많이 있으므로 만져 가고 싶습니다