소개

19년 6월부터 프로그래밍 공부를 시작하고 있는 것입니다.
작성한 앱에서 chart.js를 사용하고 변수를 넣는 데 어려움을 겪었으므로 써 보겠습니다.

chart.js 소개

도입에 대해서는 여기 를 참조, 대단히 알기 쉽게 그래프의 도입부까지는 간단하게 할 수 있습니다.

그래프에 변수를 넣습니다.

예를 들어 매일 운동 시간을 측정하는 앱으로 운동 시간과 날짜를 막대 그래프로 만들 때는 이런 느낌이 듭니다.

전제

Users와 Sports와 테이블이 있다.
Users와 Sports는 부모 - 자식 관계에서 한 쌍 이상의 관계
Sports에는 sport_day (데이터 형식은 date)와 sport_time (데이터 형식은 float)의 열이 있습니다.
*created_at에서도 문제 없음

컨트롤러에서입니다.

X축은 이쪽, 일자를 배열시킵니다.

users_controller.rb

        @graphdays =  @user.sports.order(sport_day: "DESC").limit(6).reverse
        @dayline = Array.new
        @graphdays.each do |graphday|
            @dayline.push(graphday.sport_day.strftime('%m/%d').to_s)
        end

이상, limit의 수는 자유롭게, reverse시키지 않는다고 표시되었을 때, 31일, 30일이라고 하는 순서가 됩니다.
date 형은 .to_s 를 사용하지 않으면 문자열로서 표시되지 않으므로 주의

Y축은 이쪽, 시간을 배열시킵니다.

users_controller.rb

        ＠graphtimes =  @user.sports.order(sport_day: "DESC").limit(6).reverse
        @timeline = Array.new
        @graphtimes.each do |graphtime|
            @timeline.push(graphtime.sport_time)
        end

이쪽도 reverse를 잊지 않고

다음은 View입니다.

show.html.erb

<canvas id="spotsChart" width="200" height="200"></canvas>
   <script>
    var graphdays = <%== @dayline %>, graphtimes = <%= @timeline %>
   </script>
  　<script>draw_graph();</script>

여기는 var를 사용하지 않으면 변수가 들어가지 않으므로 주의가 필요
dayline은 <%== %>와 ==가 둘이 아니면 왜 표시되지 않았습니다.
(경우에 따라서는==이 아니어도 괜찮을지도 모릅니다)

마지막은 커피입니다.

users.coffee

    window.draw_graph = -> 
    ctx = document.getElementById("sportsChart").getContext('2d')
    sportsChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: graphsdays,#ここは日付が表示される　X軸に当たる
            datasets: [{
                label: '運動時間',
                data: graphtimes,#ここは時間が表示される　Y軸に当たる
                backgroundColor: [
                    'rgba(255, 159, 64, 0.2)',
                    'rgba(255, 159, 64, 0.2)',
                    'rgba(255, 159, 64, 0.2)',
                    'rgba(255, 159, 64, 0.2)',
                    'rgba(255, 159, 64, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 159, 64, 1)',
                    'rgba(255, 159, 64, 1)',
                    'rgba(255, 159, 64, 1)',
                    'rgba(255, 159, 64, 1)',
                    'rgba(255, 159, 64, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    })

이런 그래프를 할 수 있다고 생각합니다.