【Rails】Chart.jsで１週間の投稿数をグラフ表示する

完成形

過去１週間で投稿された本をグラフにしてみます！

chart.jsをインストール

環境

• Ruby 3.1.2
• Rails 6.1.7
• yarn 1.22.19

手順

$ yarn add chart.js

Yarnでchart.jsをインストールします。

app/javascript/packs/application.js

import Chart from "chart.js/auto";
global.Chart = Chart;

application.jsに記述を追加し、インポートします。

グラフを表示

ここからは実際にグラフを表示していきます！

１週間に投稿された本の数を取得

今回はユーザーの詳細画面でグラフを表示するので、showアクションに記述します。

users_controller.rb

def show
    @user = User.find(params[:id])    # ユーザーを取得
    @books = @user.books              # ユーザーが投稿した本を全て取得
    @this_week_book_counts = []
    6.downto(0) do |n|
       @this_week_book_counts.push(@books.where(created_at: n.day.ago.all_day).count)
    end
end

見慣れない記述があるかと思いますので、詳しく見ていきましょう！

@this_week_book_counts = []

ここでは空の配列を定義しています。この配列には投稿された本の数を１日ずつ追加します。

users_controller.rb

6.downto(0) do |n|
   @this_week_book_counts.push(@books.where(created_at: n.day.ago.all_day).count)
end

downtoメソッドは初期値から１ずつ減らしながら引数の値になるまで処理をしてくれるメソッドです。
rails cを使って処理を確認してみます！

$ rails c
> 5.downto(2) do |n|
>   puts n
> end

# 結果
5
4
3
2

6.downto(0) do |n| とすることで、nに6から0までの数字を入れながら順に処理をしてくれます。

users_controller.rb

@this_week_book_counts.push(@books.where(created_at: n.day.ago.all_day).count)

pushメソッドは配列に要素を追加するメソッドです。
pushの引数にn日前に投稿された本の数を渡し、@this_week_book_counts配列に追加しています！


この時点で配列の中身はこのようになっています。

@this_week_book_counts => [0, 2, 0, 0, 0, 3, 4]     # [6日前, 5日前, 4日前, 3日前, 2日前, 1日前, 今日]

あとはこのインスタンス変数を使ってviewでグラフ表示させるだけです🔥

Viewファイルに記述を追加

公式サイトに元のテンプレートがあります。

users/show.html.erb

<canvas id="bookChart"></canvas>    # グラフを表示させたい場所に追加 

<script>
  const ctx = document.getElementById('bookChart');
  
  new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['6日前', '5日前', '4日前', '3日前', '2日前', '1日前', '今日'],
      datasets: [{
        label: '投稿した本の数',
        data: <%= @this_week_book_counts %>,
        borderColor: 'blue',
      }]
    },
    options: {
      plugins: {
        title: {
          display: true,
          text: '７日間の本の投稿数'
        }
      },
      y: {
        min: 0,
        max: 10,
      },
    },
  });
</script>

datasetsのdataに先程の配列を渡すことで、グラフを作成してくれます！

• type: 'line'で折れ線グラフ
• options: yで縦軸の最小値、最大値

を設定しています。
グラフの種類は他にもあるのでぜひ調べてみてください！

余談

今回は動きがわかりやすいためdowntoメソッドを使用しましたが、以下の記事のようにmapメソッドを使うと、空配列を用意せずに実装することができます。

参考記事