Railsでchartkickを使ってグラフ表示

仕事でchartkickを使うことになったので導入手順メモ。

Gemfileに以下のgemを追加してbundle install

gem "chartkick"

ライブラリの読込

ライブラリのhelperを呼び出す前にライブラリを読み込まなきゃならんので必要箇所に以下を追記 例: layouts/application.html.erb

<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>

config/initializers/assets.rbに以下を追記

(Rails.application.config.assets.paths << Rails.root.join('node_modules') の前に追記しないと動かないっぽい

Rails.application.config.assets.precompile += %w( chartkick.js )

app/assets/javascripts/application.jsに以下を追記

Rails5はこれでいけるが6だと違うらしい

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

グラフ生成に必要なデータをcontrollerからviewへhash形式で渡す

keyが縦軸、valueが横軸となる。

 @sample = {'2019-06-01' => 60, '2019-06-02' => 65, '2019-06-03' => 64}

viewで受け取った値を引数としてヘルパーを使用する

<%= line_chart @sample %>

で、グラフ表示されるはず。

公式リファレンス：https://chartkick.com/