【Rails】chartkickを使用してシンプルなグラフを扱う

※rails6を使用しています

chartkick とは

Railsで簡単にグラフを作成することができるライブラリです。
Railsで使用することが主な目的のようですが、多言語（React, Vue.js, Ruby, Python, Elixir, and Clojure）でもグラフを作成することができます。
github　chartkick

他にもいくつかのグラフがありますが、今回は折れ線グラフで実装します。

完成イメージ

前置き

今回は、タスクの投稿数を一週間(8日間)の折れ線グラフとして表したものです。
グラフのX軸が日付、Y軸が投稿数、を表したものです。

chartkickをインストールします

gemをbundle installしていきます。

Gemfile

:
:
gem "chartkick"

下記からは、Rails7,Rails6,Rails5以前かで手順が変わります。

Rails 7 / Importmap

config/importmap.rbに追加

config/importmap.rb

pin "chartkick", to: "chartkick.js"
pin "Chart.bundle", to: "Chart.bundle.js"

app/javascript/packs/application.jsに追加

app/javascript/packs/application.js

import "chartkick"
import "chart.bundle"

Rails 6 / Webpacker

※今回は、rails6を使用している為、以下を実行しています。

yarnでchart.jsをインストール

terminal

$ yarn add chartkick chart.js

app/javascript/packs/application.jsに追加

app/javascript/packs/application.js

import "chartkick/chart.js"

Rails 5 / Sprockets

application.js へ以下を追記

app/assets/javascripts/application.js

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

グラフ表示

controllerとviewを記述していきます

viewに記述していきます

tasks/show.html.erb

  <div class="container mt-3">
    <h3 class="text-center basic">
      Commit Paraphrases
    </h3>
    <%= area_chart @line_chart_data %>  # ここでグラフ表示
  </div>

controllerに記述していきます

tasks_controller.rb

  def show
    @task = Task.find(params[:id])

    # タスク折れ線グラフ
    @line_chart_data = [] # 空のチャート用のインスタンス変数を用意
    base_days = [*Date.current - 1.week .. Date.current]  # 日付データの配列を生成
    base_days.each do |base_day|
      # 1日の投稿数を取得
      day_count = Task.where(user_id: current_user.id).where(created_at: base_day.beginning_of_day...base_day.end_of_day).count
      # 取得した投稿数を配列としてチャート用のインスタンス変数に日付とともに代入
      @line_chart_data << [base_day.strftime('%Y/%m/%d').to_s, day_count]
    end
  end

説明していきます！
@line_chart_data = []
空の配列をインスタンス変数を用意します

base_days = [*Date.current - 1.week .. Date.current]
base_daysに、日付データの一週間の配列を生成する

※ [*Date.current - 1.week .. Date.current] のアスタリスクがないと配列として認識されず、rangeとなり、値を渡せない

base_days.each do |base_day|
each文で、base_dayのブロック変数には、一週間の中の一日が、入っている

(created_at:base_day.beginning_of_day...base_day.end_of_day).count
day_countには、現在ログインしているuserのIDと一日にtaskを投稿した数が入っている

base_day.beginning_of_day
0時0分0秒
base_day.end_of_day
23時59分59秒

@line_chart_data << [base_day.strftime('%Y/%m/%d').to_s, day_count]
@line_chart_dataに<<で[]の要素を追加する

お疲れ様です！

実装を終えて

y軸の投稿数1の時に、0.5が出現すること
y軸を最大値10にして、10以上になれば、y軸の最大値を増やしたい

まとめ

chart.jsのようにJSの記述がない為、シンプルなグラフが簡単に作れます！