※rails6を使用しています
chartkick とは
Railsで簡単にグラフを作成することができるライブラリです。
Railsで使用することが主な目的のようですが、多言語（React, Vue.js, Ruby, Python, Elixir, and Clojure）でもグラフを作成することができます。
github chartkick
他にもいくつかのグラフがありますが、今回は折れ線グラフで実装します。
完成イメージ
前置き
今回は、タスクの投稿数を一週間(8日間)の折れ線グラフとして表したものです。
グラフのX軸が日付、Y軸が投稿数、を表したものです。
chartkickをインストールします
gemをbundle installしていきます。
:
:
gem "chartkick"
下記からは、Rails7,Rails6,Rails5以前かで手順が変わります。
Rails 7 / Importmap
config/importmap.rbに追加
pin "chartkick", to: "chartkick.js"
pin "Chart.bundle", to: "Chart.bundle.js"
app/javascript/packs/application.jsに追加
import "chartkick"
import "chart.bundle"
Rails 6 / Webpacker
※今回は、rails6を使用している為、以下を実行しています。
yarnでchart.jsをインストール
$ yarn add chartkick chart.js
app/javascript/packs/application.jsに追加
import "chartkick/chart.js"
Rails 5 / Sprockets
application.js へ以下を追記
//= require chartkick
//= require Chart.bundle
グラフ表示
controllerとviewを記述していきます
viewに記述していきます
<div class="container mt-3">
<h3 class="text-center basic">
Commit Paraphrases
</h3>
<%= area_chart @line_chart_data %> # ここでグラフ表示
</div>
controllerに記述していきます
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の記述がない為、シンプルなグラフが簡単に作れます！