More than 3 years have passed since last update.

【ポートフォリオを作成する方へ】chartkickの使い方

Posted at 2020-07-22

chartkickはとても簡単にグラフを作ることができるライブラリです

##環境
Ruby 2.5.3
Ruby on Rails 5.2.4
chartkick 3.3.1

##手順
#####1.インストール

Gemfile

 gem "chartkick"

 $ bundle install

#####2.javascript読み込み

app/javascripts/application.js

//= require chartkick
//= require Chart.bundle

準備完了です。
一度サーバー落としてrails sやり直した方がいいかもしれません。
###オプション
ID,幅,高さ

<%= line_chart data, id: "users-chart", width: "800px", height: "500px" %>

軸のタイトル

<%= line_chart data, xtitle: "Time", ytitle: "Population" %>

これらを組み合わせるとこのような感じになります。

managemantに売上(result),売上日(result_date)を用意し、

app/controllers/managemants_controller.rb

def index
    @managemants = Managemant.all
  end

app/models/managemant.rb

# chartkick用データ
  def self.chart_date
    order(result_date: :asc).pluck('result_date', 'result').to_h
  end

app/views/managemants/index.html.erb

<%= column_chart @managemants.chart_date, xtitle: "日付", ytitle: "売上(円)", width: "600px", height: "200px" %>

ビューのcolumn_chartの部分を変えるだけで色々なグラフに変えることができます。
・折れ線グラフ-line_chart

・円グラフ-pie_chart

・棒グラフ-pie_chart

・面グラフ-area_chart

簡単にきれいなグラフが作れるのでぜひ試してみてください。