chart.jsはグラフを描画できるツール。
gonというgemを利用することで、コントローラ内で定義した変数をjsファイルで扱えるようになります。
chart.jsを使ったグラフをrailsアプリに表示するまでの手順は以下の記事で紹介しています。今回はこの記事の続きです。
chart.jsを使用して、3ステップで簡単にグラフを描く【Rails】
1. gonを使用する準備
Gemfileに以下を記述してbundle install
Gemfile.
gem 'gon', '~> 6.2.0'
application.html.erbに以下の記述を追加
application.html.erb
<head>
...
<%= include_gon %>
...
</head>
2. gonを使ってchart.js用の変数に変換
ここではRecordというモデルに、runday（走った日）とdistance（走行距離）というカラムを加えたテーブルを想定しています。@weekly_recordsは直近一週間分のrecordのデータが入っています。
※ pluckメソッドは引数に指定したカラム（distance）の値だけを配列として返してくれます。(今回はrundayとdistanceで一セットになっているデータがpluckメソッドによってdistanceの数値だけが入っている配列になっています)
records_controller.rb
require "date"
def top
@today = Date.today
@weekly_records = Record.where(
runday: @today.all_week #一週間分のrecordを取得
)
gon.weekly_records = @weekly_records.pluck(:distance)
end
ちなみにrecordsテーブルに登録されているデータは以下のようになります
seeds.rb
Record.create(runday: '2021-12-06', distance: '5')
Record.create(runday: '2021-12-07', distance: '3.5')
Record.create(runday: '2021-12-08', distance: '4')
Record.create(runday: '2021-12-09', distance: '8')
Record.create(runday: '2021-12-10', distance: '7')
Record.create(runday: '2021-12-11', distance: '3')
Record.create(runday: '2021-12-12', distance: '5')
3. chart.jsに挿入
app/javascript/pack/bbb.js
var ctx = document.getElementById("aaa");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日", "日曜日"],
datasets:
[
{
label: 'ランニング走行距離',
backgroundColor: 'rgba(102,255,129,0.2)',
borderColor: 'rgba(122,255,129,0.2)',
data: gon.weekly_records /* コントローラで定義したgonを代入 */
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
suggestedMin: 0
}
}]
}
}
});
rails sで確認してみます。以下のように表示されていれば成功です！
4. 参考
chart.jsとgonでグラフを作成する
【Rails】 便利なpluckメソッドの使い方をマスターしよう！
【Rails Chart グラフ】Railsで、投稿に連動した美しいグラフを作ってみよう