🍧

Rails chart.jsでグラフ表示

2023/04/29に公開

Rails

tech

過去7日間分それぞれの投稿数を一覧表示

💡この流れと同じように実装！

モデル

model/book.rb

scope :created_today, -> { where(created_at: Time.zone.now.all_day) } # 今日
scope :created_yesterday, -> { where(created_at: 1.day.ago.all_day) } # 前日
scope :created_2day_ago, -> { where(created_at: 2.day.ago.all_day) } # 2日前
scope :created_3day_ago, -> { where(created_at: 3.day.ago.all_day) } # 3日前
scope :created_4day_ago, -> { where(created_at: 4.day.ago.all_day) } # 4日前
scope :created_5day_ago, -> { where(created_at: 5.day.ago.all_day) } # 5日前
scope :created_6day_ago, -> { where(created_at: 6.day.ago.all_day) } # 6日前

コントローラー

users_controller

def show
    @user = User.find(params[:id])
    @books = @user.books
    @book = Book.new
    @today_book =  @books.created_today
    @yesterday_book = @books.created_yesterday
    @this_week_book = @books.created_this_week
    @last_week_book = @books.created_last_week
  end

ビュー

users/show.html.erb

<h4>7日間分の投稿数</h4>
  <table class='table table-bordered'>
    <thead>
      <tr> 
        <th>６日前</th>
        <th>５日前</th>
        <th>４日前</th>
        <th>３日前</th>
        <th>２日前</th>
        <th>１日前</th>
        <th>今日</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><%= @books.created_6day_ago.count %></td>
        <td><%= @books.created_5day_ago.count %></td>
        <td><%= @books.created_4day_ago.count %></td>
        <td><%= @books.created_3day_ago.count %></td>
        <td><%= @books.created_2day_ago.count %></td>
        <td><%= @books.created_yesterday.count %></td>
        <td><%= @books.created_today.count %></td>
      </tr>
    </tbody>

🏋🏻もっとコンパクトなコードにリファクタリングも可能だそう！

chart.jsを使って、過去7日分の投稿数グラフ化

Chart.jsをインストール！

Chart.jsとは

JavaScript でグラフ(チャート)を描画するためのライブラリ

Chart.jsを使用するために、npmもしくはCDNからライブラリを読み込む。

npmの場合

npm install chart.js

CDNを使って使用する場合

このリンクが必要

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Turbolinksの無効化

無効化にしないと、ログイン後にUserページが表示された際に
グラフが反映されなかったのでしっかり無効化する。

この部分でTurbolinksを個別で無効化
$(document).on('turbolinks:load', function() {

turbolinksについてわかりやすい記事

ビュー

<canvas id="myLineChart"></canvas>
  <script>
    $(document).on('turbolinks:load', function() {
      var ctx = document.getElementById("myLineChart");
      var myLineChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: ['6日前', '5日前', '4日前', '3日前', '2日前', '1日前', '今日'],
          datasets: [
            {
              label: '投稿した本の数',
              data: [
                <%= @books.created_6day_ago.count %>,
                <%= @books.created_5day_ago.count %>, 
                <%= @books.created_4day_ago.count %>, 
                <%= @books.created_3day_ago.count %>, 
                <%= @books.created_2day_ago.count %>, 
                <%= @books.created_yesterday.count %>, 
                <%= @books.created_today.count %>
              ],
              borderColor: "rgba(0,0,255,1)",
              backgroundColor: "rgba(0,0,0,0)",
              tension: 0.4
            }
          ],
        },
        options: {
          title: {
            display: true,
            text: '7日間の投稿数の比較'
          },
          responsive: true,
          scales: {
            y:{
              suggestedMin: 0,
              suggestedMax: 10
            },
            x:{
              stacked: true
            },
          },
        }
      });
    });
  </script>

グラフ描画エリア設定

公式の通り記載

<canvas id="myChart"></canvas>

canvas要素取得

先ほど設定した、canvas要素（ID ： myChart ）を取得し、変数 ctx に入力
（4行目）

var ctx = document.getElementById("myLineChart");

ちなみにctxとは "canvas context" の略で、canvas要素の描画コンテキストを指している。

Chart設定

描画するグラフを、「new Chart(　)」によって設定する。
（5行目）

var myLineChart = new Chart(ctx, {
        type: タイプ,
        data: データ,
	options: オプション
	}

グラフを表示するためには「type」「data」「options」の3項目を設定する必要がある。

🌱参考にさせていただいた記事

複数のグラフを描画することも可能！

ドキュメント
https://www.chartjs.org/docs/latest/
日本語ver

typeの種類でいろいろなグラフを指定できる！

設定項目	グラフ
bar	棒グラフ
line	折れ線グラフ
pie	円グラフ
radar	レーダーチャート
bubble	バブルチャート
scatter	散布図

最初は同じようなお手本があまり見つからず、どう曲線のグラフを作るか少し困ったが
他のグラフのフォーマットのオプションを変えていってなんとか完成！