アプリケーションにグラフを差し込むのに便利なchartkickの説明(導入メイン)となります。
1.Chartkickの導入
gemfileに
gem 'chartkick'
を記述。その後忘れずにbundle installも！
続いて
% yarn add chartkick chart.js
※こちらのコマンド忘れずに
そしてapp/javascript/packs/application.js内に
import "chartkick/chart.js"
を記述する！
※もしグラフが上手く表示されない場合は
app/javascript/packs/application.js内の記述を
import "chartkick/chart.js"ではなく
require("chartkick")
require("chart.js")
としてみてください。
rails５以前
の方は
//= require chartkick
//= require Chart.bundle
こちらを。
2.グラフ表示
いよいよグラフ表示です！
グラフを表示させたい「○○.html.erb」に
<%= pie_chart [['赤', 50], ['青', 50]]%>
と記述。
この段階で画面上に円グラフが表示されているか確認することで、chartkickがちゃんと導入できているか確認することができます。
※もし上手く表示されない場合、『サーバー閉じてからのrails s』
もしくは『js内の記述を変更』してみてください
3.グラフについて
pie_chartの部分を変更すればグラフの種類も変更可能です
column_chart(縦棒グラフ)
bar_chart(横棒グラフ)
line_chart(折れ線グラフ)
今回は速攻でグラフが表示されるかを確認するためコントローラーを経由せず、ビュー内に直接データ記述(赤50青50)しました。
一般的な使い方としては
コントローラ内にデータ記述する方法など色々ありますので下のリンクをご参考に。
参考サイト
chartkick
【Rails】Rails完結！グラフを簡単に作成できるライブラリChartkickについて簡単にまとめてみた