1. chart.jsを使用する準備
CDN（Content Delivery Network）を利用するとファイルをダウンロードする必要が無いのでとっても簡単です。
headタグ内に以下の記述を追記するだけで完了です。
application.html.erb
<head>
...
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
...
</head>
2. グラフをhtml.erbファイルに配置
canvasタグを目的のhtml.erbファイルに配置。ここにchart.jsのグラフが挿入されます。
javascript_pack_tagは、webpackerがJavaScriptをブラウザに適したファイルにコンパイルする役割を持ちます。
index.html.erb
<canvas id="[aaa(任意の名前)]"></canvas>
<%= javascript_pack_tag '[bbb(任意の名前)]' %>
3. chart.jsの中身
app/javascript/packs配下にbbb.jsというファイルを作成します。
app/javascript/packs/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: [4, 2, 3, 6, 3, 5, 7] /* データは任意の数値 */
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
suggestedMin: 0
}
}]
}
}
});
rails sして確認してみましょう！以下のようにグラフが描画されていたら成功です。
終わりに
お疲れ様でした。複雑そうに見えて簡単にグラフを描画することができたかと思います。
ここで紹介しているのはchart.jsのグラフをアプリで正常に表示させることだけを意識しているので、余計な設定は削り、シンプルなコードにしています。
chart.jsはオプションでラベルの表示や、変数の使用ができるのでいろいろ調べてみるとchart.jsの表現の幅が広がると思います。
実際に変数を使ってグラフを描画した少し発展verの記事もあるので良ければどうぞ。
chart.js × gon → 変数を用いた動的なグラフが描ける！【Rails】
参考
Chart.jsでグラフを描画してみた
【Rails Chart グラフ】Railsで、投稿に連動した美しいグラフを作ってみよう