[Rails]Chartkick×Chart.jsで面グラフ(Area chart)を作成する

はじめに

面グラフとは、
折れ線グラフを塗りつぶしたグラフです。こんなグラフ。

Railsでグラフを表示するには Chartkick がとても便利。
デザインが綺麗で扱いやすい Chart.js と組み合わせてグラフを作っていきます。

環境

Rails 6.1.3
Ruby 2.7.2

インストール　

Gemfile

gem "chartkick"

ターミナル

bundle install
yarn add chartkick chart.js

app/javascript/packs/application.js

import "chartkick/chart.js"

これで導入は完了です。

実装

1. データの準備

models/sample.rb

class Sample < ApplicationRecord
  def self.data
    data = {
      Sat, 24 May 2020: 50,
      Sun, 25 May 2020: 100,
      Mon, 26 May 2020: 34
    }
  end
end

モデルで data = {x軸(横)の数値: y軸(縦)の数値}のハッシュになるように成形。

2. 呼び出し

controllers/samples_controller.rb

class SamplesController < ApplicationController
  def index
    @data = Sample.data
  end
end

Viewで表示できるように、コントローラで呼び出します。

3. 表示

views/samples/index.html.erb

<%= area_chart @data, min: 0, max: 100 %>

Viewで表示。
min、maxで y軸(縦)の最大値と最小値を設定しています。

4. レイアウト変更

グラフ個別に設定

ディベロッパーツールでグラフのidを確認して、CSSを適用できます。

sample.css

#chart-1 {
　　width: 100%;
 min-width: 100%;
 max-width: 100%;
}

すべてのグラフに設定

サイトのすべてのグラフに対して共通の設定をする場合は、config/initializers/chartkick.rbで設定できます。

config/initializers/chartkick.rb

Chartkick.options = {
  height: "250px",
  width: "500px",
  colors: [ "#219ebc",
            "#bdbdbd"
          ]
}

上記で変更した場合はrails sでサーバーを再起動すると設定が反映されます。

レイアウトは色々と変更できるので、公式サイトで確認してみてください。
Chart.js

完成！

以上です。
何かありましたら是非コメントお願い致します。

参考

• Chartkick 公式
  https://chartkick.com/#installation

• Chart.js 公式
  https://www.chartjs.org/docs/latest/