제가 Chartkick으로 그래프를 만들어봤어요.

입문

Chartkick이라는 gem을 사용하면 간단하게 도표를 만들 수 있을 것 같아서 실험적으로 사용해야 합니다.

환경

Ubuntu16.04.7 LTS
Windows10 + Vegrant
Rails 5.2.4
Ruby 2.5.1

단계

Gemfile에 두 개의 gem을 추가합니다.

gem 'chartkick'
gem 'groupdate'

$bundle install

application.js에 두 개의 js를 추가합니다.
application.js

//= require chartkick
//= require Chart.bundle

컨트롤러를 적당히 만들다.쇼1, 쇼2, 두 가지 방법을 만드는 것은 서로 다른 도표를 표시하기 위해서입니다.

$rails g controller asagaos index show1 show2

모델을 적절하게 생성합니다.(로그인을 위해 나팔꽃의 성장 기록을 구상한 데이터는 이런 모델을 사용했다)

$rails g model asagao jyotai:string take:integer ymd:date
$rails db:migrate

루트를 설정합니다.
routes.rb

get 'asagaos/show1'
get 'asagaos/show2'
root 'asagaos#index'

seed에서 테스트 데이터를 만듭니다.
seed.rb

Asagao.destroy_all

require "date"
_todate = Date.today

30.times do |n|

    _jyotai = case n 
        when 0..10 then  "種"
        when 11..20 then "葉"
        when 21..30 then "花"
    end

    _ymd = _todate + n

    Asagao.create!(
        jyotai: "#{_jyotai}",
        take: "#{n + 10 }",
        ymd: "#{_ymd}"
    )
end

테스트 데이터를 재생합니다.

$rails db:seed

컨트롤러를 이렇게 기술하세요.
controller/asagaos_controller.rb

class AsagaosController < ApplicationController
    def index
        @asagaos = Asagao.all
    end

    def show1
    end

    def show2
    end
end

index 보기는 이렇게 설명합니다.
view/asagaos/index.html.erb

<h1>朝顔の成長記録</h1>

<%= link_to 'グラフ１', asagaos_show1_path %>
<%= link_to 'グラフ２', asagaos_show2_path %>
<br>

<table>
  <thead>
    <tr>
      <th>状態</th>
      <th>丈</th>
      <th>日付</th>
    </tr>
  </thead>

  <tbody>
    <% @asagaos.each do |a| %>
      <tr>
        <td><%= a.jyotai %></td>
        <td><%= a.take %></td>
        <td><%= a.ymd %></td>
      </tr>
    <% end %>
  </tbody>
</table>

스트라이프에 대한 설명을 표시합니다.
views/asagaos/show1.html.erb

<h1>Asagaos#show1</h1>
<p>Find me in app/views/asagaos/show1.html.erb</p>

<%= link_to '一覧', root_path %>
<br>
<%= column_chart Asagao.group_by_day(:ymd).sum(:take), id: "column-chart", width: "800px", height: "500px" %>

케이크 그림의 설명을 표시합니다.
views/asagaos/show2.html.erb

<h1>Asagaos#show2</h1>
<p>Find me in app/views/asagaos/show2.html.erb</p>

<%= link_to '一覧', root_path %>
<br>
<%= pie_chart Asagao.group(:jyotai).count %>

집행

$rails s

index 화면에서 테스트 데이터를 한눈에 볼 수 있습니다.

차트 1을 표시하면 이렇게 됩니다.

차트 2를 표시하면 이렇게 됩니다.

참조 URL