9
6

More than 1 year has passed since last update.

【rails】chartkick導入ガイド

Last updated at Posted at 2022-04-24

はじめに

個人開発の過程でkickchartを利用する機会があったのですが、日本語の記事でわかりやすいものがあまり見つからなかったので公式ドキュメントを日本語化&個人的に役に立った内容を記載しておきます!kickchartを利用する際の参考にしてください!!

導入

まずはkickchartの導入からです。rails のバージョンによって導入方法が違うので注意してください!
どのバージョンであってもまずはgemファイルに以下の記述を書き加えてください!!

gemfile.rb
gem "chartkick"

rails7の場合

configのimport.rbに以下の記述を追加してください。

config/importmap.rb
pin "chartkick", to: "chartkick.js"
pin "Chart.bundle", to: "Chart.bundle.js"

また、app/javascript/application.jsに以下の記述を追加してください。

app/javascript/application.js
import "chartkick"
import "Chart.bundle"

これでrails7における導入は完了です!!

rails6の場合

ターミナルorコマンドプロンプトにて以下のコマンドを実行してください!

yarn add chartkick chart.js

app/javascript/packs/application.jsに以下の記述を追加してください!

app/javascript/packs/application.js
import "chartkick/chart.js"

これでrails6における導入は完了です!

rails5の場合

app/assets/javascripts/application.jsに以下の記述を追加してください!

app/assets/javascripts/application.js
//= require chartkick
//= require Chart.bundle

これでrails5における導入は完了です!

導入できるグラフの例

公式ドキュメントで紹介されているグラフを紹介します!!

line chart(曲線図)

image.png

<%= line_chart User.group_by_day(:created_at).count %>

上記のグラフはcreated_atを横軸、その日の投稿数を縦軸で表示しています。

pie chart (円グラフ)

image.png

<%= pie_chart Yogurt.group(:flavor).count %>

Yogurtテーブルからflavorカラムのカウントを表にしています。

Column chart(棒グラフ)

image.png

<%= column_chart Order.group_by_day_of_week(:created_at, format: "%a").count %>

上記は一週間の曜日ごとの投稿数を表示するグラフです。

Bar chart (棒グラフ)

image.png

<%= bar_chart Shirt.group(:size).sum(:price) %>

上記はShirtモデルのsizeごとに集計しその売り上げ合計を表示した棒グラフです。

Area chart (面積図)

image.png

<%= area_chart Visit.group_by_minute(:created_at).maximum(:load_time) %>

Scatter chart (散布図)

image.png

<%= scatter_chart City.pluck(:size, :population), xtitle: "Size", ytitle: "Population" %>

Multiple series

image.png

<%= line_chart @goals.map { |goal|
    {name: goal.name, data: goal.feats.group_by_week(:created_at).count}
} %>

もしくは

<%= line_chart Feat.group(:goal_id).group_by_week(:created_at).count %>

最後に

次は様々なグラフオプションについての記事を書く予定なので是非楽しみにしていてください。

9
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
6