Rails에서 간단한 그래프를 처리한다면 chart-js-rails보다 chartkick을 사용할 수 있습니다.

Rails에서 그래프를 다루는 방법으로 chart-js-rails을 사용한 방법을 이 기사에서 설명했습니다.
반면에 간단한 그래프를 포함하는 경우에는 chartkick

chartkick이란?

chart.js를 좋은 느낌으로 랩핑하여 원라인으로 그래프를 임베드할 수 있도록 하는 프로젝트입니다.
Ruby뿐만 아니라 다양한 언어로 구현됩니다.

htps // 짱 rt키 ck. 코m/


또한 chart.js뿐만 아니라 Google Charts 및 Highcharts도 지원합니다.

chartkick을 사용하는 것이 더 좋은 이유

루비와 자바 스크립트 사이의 데이터 전달을 의식하지 않아도됩니다.

이 기사 의 방법이라면, Ruby측에서 취급하는 수치를 어떠한 방법으로 Javascript로 건네줄 필요가 있었습니다.

chartkick의 경우는 데이터를 배열로 해 Ruby의 메소드에 건네줄 뿐이므로, Ruby측만으로 구현이 완결합니다.

github의 스타 수가 많습니다.

어디까지나 gem으로 비교했을 경우입니다만, chartkick 쪽이 단연 스타가 많습니다.
최근 커밋 날짜와 시간도 chartkick이 더 새로운 것입니다.

Rails6에도 대응하고 있다

Ruby on Rails6부터 기본 Javascript 컴파일러가 Webpacker입니다.
아마 Rails6에서 chart-js-rails를 사용하려고하면 약간의 번거로움이 걸릴 것입니다.

실제로 사용해보기

샘플 애플리케이션 만들기

이번은 시사 재료로서 「럭비 월드컵 개최국」에 관한 정보를 그래프화합니다.
다음 명령을 실행하여 애플리케이션을 작성하십시오.

$ rails new chartkick_sample
$ rails g scaffold rugby_world_cup_host_country name:string total_attendance:integer matches:integer stadium_capacity:integer held_at:datetime

db/seeds.rb 으로 Wikipedia 를 참고로 럭비 월드컵 개최국을 입력합니다.
※엄밀하게는 1991년과 1987년에도 개최되고 있습니다만, 개최국이 복수 있어 DB구조가 복잡화하기 때문에 이번은 1995년 이후만 입력했습니다.

db/seeds.rb

[
  [1995, 'South Africa', 1100000, 32, 1423850],
  [1999, 'Wales', 1750000, 41, 2104500],
  [2003, 'Australia', 1837547, 48, 2208529],
  [2007, 'France', 2263223, 48, 2470660],
  [2011, 'New Zealand', 1477294, 48, 1732000],
  [2015, 'England', 2477805, 48, 2600741],
  [2019, 'Japan', nil, 48, nil],
  [2023, 'France', nil, 48, nil],
].each do |record|
  RugbyWorldCupHostCountry.create(
    held_at: Time.zone.local(record[0]),
    name: record[1],
    total_attendance: record[2],
    matches: record[3],
    stadium_capacity: record[4]
  )
end

입력이 끝나면 DB 작성, 마이그레이션, seed를 실행하십시오.

rails db:create db:migrate db:seed

http://localhost:3000/rugby_world_cup_host_countries에 액세스하면 목록이 표시됩니다.

그래프 표시

chartkick 설치

Gemfile에 추가하여 bundle install 합니다.
계속해서 yarn add도 실행해 봅시다.

Gemfile

・・・省略・・・
gem 'bootsnap', '>= 1.4.2', require: false
gem "chartkick" # 追記

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end
・・・省略・・・

$ bundle install

여기에서 Rails6 이상인지 Rails5 이전인지에 따라 절차를 나눕니다.

Rails6 이상
yarn 에서 chart.js 를 설치합니다.

$ yarn add chartkick chart.js

application.js 에서 chart.js 와 chartkick 를 require 합니다.

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("chartkick") // 追記
require("chart.js") // 追記

Rails5 이전
application.js 에 다음을 추가합니다.

app/assets/javascripts/application.js

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

그래프 구현

개최국 일람 페이지에 그래프를 포함합니다.

app/views/rugby_world_cup_host_countries/index.html.erb

<p id="notice"><%= notice %></p>

<h1>Rugby World Cup Host Countries</h1>

<%= column_chart RugbyWorldCupHostCountry.pluck(:held_at, :total_attendance) %><!-- 追記 -->

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Total attendance</th>
      <th>Matches</th>
      <th>Stadium capacity</th>
      <th>Held at</th>
      <th colspan="3"></th>
    </tr>
  </thead>
・・・省略・・・

http://localhost:3000/rugby_world_cup_host_countries에 액세스하면 그래프가 표시됩니다.



옵션을 지정하면 색상과 크기도 변경할 수 있습니다.

app/views/rugby_world_cup_host_countries/index.html.erb

<p id="notice"><%= notice %></p>

<h1>Rugby World Cup Host Countries</h1><!-- 追記 -->

<%= column_chart RugbyWorldCupHostCountry.pluck(:held_at, :total_attendance),
                 id: 'total-attendance-chart',
                 width: '400px',
                 height: '500px',
                 colors: ['#b00'] %><!-- 追記 -->

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Total attendance</th>
      <th>Matches</th>
      <th>Stadium capacity</th>
      <th>Held at</th>
      <th colspan="3"></th>
    </tr>
  </thead>
・・・省略・・・

chartkick에서 할 수없는 것

현시점에서 실현 방법을 모르는 것을 기재해 둡니다.
실현 방법을 아시는 분은 꼭 코멘트를 부탁드립니다.

2 축 그래프 표시

두 종류의 그래프 (선 선과 막대 그래프 등)를 하나의 그래프로 표시합니다.

요약

Ruby와 Javascript 사이의 값 전달을 의식하지 않아도 좋고, 한 줄로 그래프를 포함하는 것이 좋습니다.
Rails에서 간단한 그래프를 출력하고 싶은 분은 꼭 사용해보십시오.