プログラミング学習のための備忘録

Ruby on Railsで資産管理アプリを作成しています。
配当金の月別配当金額をグラフ表示するため、chartkickを用いました。
備忘録として、導入から表示させるまでの手順をまとめました。

完成図

以下のような、配当金を記録した仮のテーブルを作成して、グラフ表示させました。

ビューとルーチングを追加する

グラフを表示させるビューファイルを作成し、ルーチングを追加します。
app/views/dividends直下にchart.html.erbを作成します。

config/routes.rb

Rails.application.routes.draw do
 #省略
  get "/dividends/index" => "dividends#index"
  get "/dividends/chart" => "dividends#chart"
 #省略
end

chartkickをインストールする

Gemfileにchartkickをインストールするためのコマンドを追記します。
追記したら、bundle installを実行します。
groupdateは、データを日毎や月毎などグループ化して表示させることができるようになるgemです。
合わせてインストールしておくと便利です。

Gemfile

 #省略
gem 'bootsnap', '>= 1.4.4', require: false

# ここから追記する
gem "chartkick"  #chartkickを導入するためのgem
gem "groupdate"  #グラフの横軸の単位を「日付ごと」で表示できるgem
# ここまで追記する

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
 #省略

次の手順は、Railsのバージョンが6以降か、５以前かで分岐します。
ターミナルでrails -vを実行し、自分のrailsのバージョンを確認してから選択します。
私は、Rails6以降でしたので、１の手順で進めました。

ターミナル

% rails -v
Rails 6.1.3

Rails6以降

yarnでchart.jsをインストールします。

ターミナル

% yarn add chartkick chart.js

その後、app/javascript/packs/application.jsに以下のコマンドを追記します。

app/javascript/packs/application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

import "chartkick/chart.js" //ここを追記する

Rails5以前

app/assets/javascripts/application.jsに以下のコマンドを追記します。
（Rails5以前は未検証ですので、これのみで動作するかは未確定です、、、。）

app/assets/javascripts/application.js

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

ビューにグラフを表示させる

表示させたいページにグラフを埋め込みます。
配当金の合計値を月ごとに棒グラフで表示させています。
オプションを使用すると、表示させるグラフの大きさやグラフの色、軸タイトルなどをカスタマイズできます。

app/views/dividends/chart.html.erb

<h1 class="dividends-heading">月別配当金記録</h1>

<div class="container">
  <%= column_chart Dividend.group_by_month(:month, format:"%Y-%m").sum(:income_based_yen), 
  width: "800px",
  height: "500px",
  min: 1,
  max: 10000, 
  colors: ["#b00","#0b0","#00b"],
  xtitle: "月" ,
  ytitle: "配当金合計",
  prefix: "¥",
  thousands: ","
  %>
</div>

オプション

chartkickのオプションを設定することで、グラフをカスタマイズできます。
オプションの種類とカスタマイズできる内容をまとめました。
使用するグラフによって、効果のあるオプションが違うみたいですので、色々なグラフで確かめてみたいです。
誤り等ございましたら、教えていただけると助かります。

オプション名	カスタマイズできる項目
width	表示させるグラフの幅
height	表示させるグラフの高さ
min	縦軸の最小値
max	縦軸の最大値
xmin	横軸の最小値
xmax	横軸の最大値
colors	グラフの色(配列で複数のカラーコードを選択できる)
xtitle	X軸（横軸）の軸タイトル
ytitle	Y軸（縦軸）の軸タイトル
legend	凡例を表示させるかどうか、表示させる場所を指定できる（top,bottom,left,right）
prefix	接頭辞（$や¥など、値の前に単位を付けたい場合に使う）
suffix	接頭辞（%や℃など、値の後ろに単位を付けたい場合に使う）
thousands	数値を３桁ごとに区切る場合に使う(1000→1,000)
decimal	小数点を設定する
precidion	有効数字を設定する
round	値の丸めを設定する
bytes	値がキロバイト換算で表示される
loading	データをロードしている時に表示させるメッセージを指定できる
empty	データが空である時に表示させるメッセージを指定できる
refresh	データリフレッシュのタイミング（秒）を指定できる

このあたりのオプションは未検証ですので、知っているかたは教えてくださいm(_ _)m

id、stacked、discrete、label、curve、points、donut、zeros等々

参考文献

https://chartkick.com/
https://qiita.com/Y_uuu/items/0d57748954c7cdb9bbcb
https://wonderwall.hatenablog.com/entry/2015/08/22/225258