【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/

ピラティス部屋で使えるように、時間を見つけてカスタマイズしていきたい✨