こんにちは。たなか(@tanaka_ricecake)です。
Ruby on RailsでWebアプリケーションサービスの開発をしています。
開発でChartkickというgemを使用したグラフ表示の方法を学習したので、備忘録として残しておきます。
システム管理画面なんかを作成して、データを可視化したいといったシチュエーションで重宝するかと思います。
導入もお手軽なのでよろしければ参考にしてみてください。
もくじ
Chartkickの導入
導入に必要な記述はわずか三行です。
まずはgemファイルにchartkickを追加します
gem "chartkick"
忘れずにbundle installを実行します。
最後はapplication.jsに以下を追記します。
//= require chartkick
//= require Chart.bundle
Chartkickの使い方
使い方もとってもシンプル。
表示したいビューに以下を記述します。(以下はhamlで書いています)
= line_chart @user_data
続いてcontrollerで受け渡しようの@user_dataを用意してやります。
def index
@user_data= User.where(payment_result: 1).group("date(created_at)").count
end
今回は『Userのうち、決済結果が1(成功))の人の数)』を@user_dataに持たせてやりました。これで準備完了。
テーブルのデータを読み取ってグラフ表示してくれました!やったぜ!
Chartkickの設定
簡単な設定方法についても併せて解説してみます。
グラフ全体に反映させる設定
グラフ全体に反映させたい設定については、initializersディレクトリ配下にchartkick.rbという設定ファイルを用意することで可能です。
# グラフに関する共通設定
Chartkick.options = {
height: '400px',
library: {
layout: {
padding: {
left: 20,
right: 20,
top: 20,
bottom: 40
}
}
}
}
折れ線の曲線を解除(直線にする)
今回は折れ線グラフを使用しましたが、デフォルトで曲線になっているので、直線に変更する場合はcurve: falseを記述します。
= line_chart @user_data, curve: false
日付を細かくする(1日ずつ)
こちらもデフォルトでは間の日付が省略表示されてしまいます。日付を細かく表示したい場合はdiscrete: trueを記述します。
= line_chart @user_data, discrete: true
グラフ色の変更
デフォルトのブルーから色を変更する場合は、colorオプションを追加すればOKです。
= line_chart @user_data, , colors: ["#b00", "#666"]
まとめ
ということでグラフ化gem『Chartkick』についてでした。
今回は開発で使用した折れ線グラフでの紹介でしたが、他にも円グラフや棒グラフなど様々なグラフに対応しています。
簡単に始められるので、ぜひ試してみてください。
今回はここまで。