Chartkick
グラフ描画することができるぷろじぇくと
いろんな言語で実装されているらしい
利点
- RubyとJavascript間のデータの受け渡しの意識が不要
- データを並列にしてRubyのメソッドへ渡すだけ(Ruby側で実装が完結する)
- Rails6でもOK
install
/Gemfile
・
・
・
gem "chartkick"
Gemfileの内容を反映する
ターミナル
$ bundle install
chart.jsをインストール
(ここから下はRails6の話です, Rails5の場合はChartkick 公式のページを参照ください)
ターミナル
yarn add chartkick chart.js
jsでimport
/app/javascript/packs/application.js
import "chartkick/chart.js"
Ruby(例)
/app/controler/コントローラ名_controller.rb
@data = ハッシュ なり 配列 なり
/app/views/コントローラ名/なんたら.html.erb
<%= pie_chart(@data, colors:["000000",...
]) %>
#その他
Chart.jsのオプションを使う
dataset:{}
/app/views/コントローラ/なんたら.html.erb
<%= line_chart(@xy, dataset:{pointRadius:0, borderWidth:10}, width:"500px", height:"500px") %>
複数の線を引く
コントローラ
@lines = [{name:"a", data:[[0,0],[1,3],[4,4]]}, {name:"b", data:[[0,2],[1,2],[4,2]]}, {name:"c", data:[[0,5],[1,0],[4,3]]}]
/app/views/コントローラ/なんたら.html.erb
<%= line_chart(@lines, dataset:{tension:0, pointRadius:0})%>
トラブルシューティング
1. Error Loading Chart
うまくライブラリをインポートできてなかったようです
(僕の場合は import "chartkick/chart.js"し忘れてました)
2. Loadingのまま変わらない
ターミナル
yarn add chartkick chart.js
は, 始めの一回でいいと思って2個目のアプリではやってなかったけど, 毎回必要だった.
diff １個目のアプリ 2個目のアプリ
でpackage.jsonにchartkick chart.jsがなかったので判明
つくったアプリ
宣伝です. こんなことができるアプリです(誰が使うんだろう...)
herokuのページ
gitのリポジトリ