【Sinatraで運動記録アプリ④】RubyでChart.jsを使う(Gem)

こんにちは、Mako(@makokamiya)です。
私のブログの中でなぜか人気の、gonっていうRailsで定義した変数をJSで使えるgemの記事。
実はgonというgemは、Chart.jsを使うために導入したんですが、
なんとChart.jsをRubyで使えるGemが存在しました^^;
今回はRubyでChart.jsが使えるGemを使う方法をまとめます。
ソースコード:https://github.com/mako4kamiya/undouno_kiroku_app
アプリURL :https://undouno-kiroku-app.herokuapp.com/
目次
gemでChart.jsを使う方法
Chart.jsとは
Chart.jsは様々なグラフを描画するJavaScriptのライブラリです。
ちなみに、RailsでChart.jsを使いたい場合は、Chart.jsの公式がこちらのGemを載せていました。
Chart.jsのインストール
gem 'chart_js'
bundle install
Rubyで定義
get "/" do
@chart = ChartJS.line do
data do
labels ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
dataset "Cats" do
color :random
data [12, 19, 3, 5, 2, 3]
end
dataset "Dogs" do
color :random
data [10, 12, 3, 4, 5, 3]
end
end
end
erb :index
end
erbで呼び出し
<%= @chart.to_html %>

簡単!(´꒳`ノノ゙パチパチ
dataの値をデータベースから取り出したものに書き換えればいいですね!
まとめ
最後まで読んでくれてありがとうございました!
今回は、RubyでサクッとChart.jsを使う方法でしたが、
他の言語やフレームワーク(RailsやReactなど)で使う場合は
それぞれに対応した拡張機能があるようなので参考にしてください。
今回はあくまでもサクッと作るための参考までに。
Sinatraで運動記録アプリの会はこれで終わります!
簡単な記録とグラフ表示ができているので、
ぜひのぞいてみてください!
ソースコード:https://github.com/mako4kamiya/undouno_kiroku_app
アプリURL :https://undouno-kiroku-app.herokuapp.com/
ピラティス部屋で使えるように、時間を見つけてカスタマイズしていきたい✨