【Rails】グラフ表示をお手軽に!Chartkickの導入・使い方を簡単解説します【gem】

こんにちは。たなか(@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』についてでした。

今回は開発で使用した折れ線グラフでの紹介でしたが、他にも円グラフや棒グラフなど様々なグラフに対応しています。

簡単に始められるので、ぜひ試してみてください。

今回はここまで。

 

参考サイト

コメントを残す

メールアドレスが公開されることはありません。