Chartkickを使って、ページにグラフを表示させる方法（Ruby on Rails）

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

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

#完成図
以下のような、配当金を記録した仮のテーブルを作成して、グラフ表示させました。
![スクリーンショット 2021-05-02 17.20.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1382306/81d3ddce-96dd-6014-73f8-4800ff866186.png)
![スクリーンショット 2021-05-02 17.17.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1382306/1dca768d-2f08-2392-6a70-a36d16bce88c.png)

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

```ruby: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です。
合わせてインストールしておくと便利です。

```ruby: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以降でしたので、１の手順で進めました。

```html:ターミナル
% rails -v
Rails 6.1.3
```

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

```html:ターミナル
% yarn add chartkick chart.js
```
その後、`app/javascript/packs/application.js`に以下のコマンドを追記します。

```javascript: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以前は未検証ですので、これのみで動作するかは未確定です、、、。）

```javascript:app/assets/javascripts/application.js
//= require chartkick
//= require Chart.bundle
```

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

```html: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://chartkick.com/)
[https://qiita.com/Y_uuu/items/0d57748954c7cdb9bbcb](https://qiita.com/Y_uuu/items/0d57748954c7cdb9bbcb)
[https://wonderwall.hatenablog.com/entry/2015/08/22/225258](https://wonderwall.hatenablog.com/entry/2015/08/22/225258)