More than 3 years have passed since last update.

【2021年現在】初心者でも大丈夫。chartkickのインストールの仕方(rails 6)

Last updated at 2021-08-30Posted at 2021-05-07

アプリケーションにグラフを差し込むのに便利な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

こちらを。

いよいよグラフ表示です！

グラフを表示させたい「○○.html.erb」に

<%= pie_chart [['赤', 50], ['青', 50]]%>

と記述。
この段階で画面上に円グラフが表示されているか確認することで、chartkickがちゃんと導入できているか確認することができます。
※もし上手く表示されない場合、『サーバー閉じてからのrails s』　
もしくは『js内の記述を変更』してみてください

pie_chartの部分を変更すればグラフの種類も変更可能です

column_chart(縦棒グラフ)
bar_chart(横棒グラフ)
line_chart(折れ線グラフ)

今回は速攻でグラフが表示されるかを確認するためコントローラーを経由せず、ビュー内に直接データ記述(赤50青50)しました。

一般的な使い方としては
コントローラ内にデータ記述する方法など色々ありますので下のリンクをご参考に。

##参考サイト