Ruby on Railsでグラフを作成する方法

お使いのシステムにRuby on Railsがインストールされていることを確認してください。このチュートリアルでは、GemfileにChartkickとGroupdateのgemを追加する必要もあります。

#Gemfile
gem 'chartkick'
gem 'groupdate'

次に、bundle installコマンドを実行してgemをインストールします。

bundle install

まだRailsプロジェクトがない場合は、Rails 7で次のコマンドを使って作成できます:

rails new chart_app -d postgresql (Rails 7 uses Importmap by default)

注: 使用するデータベースに応じて、postgresqlをmysqlまたはsqlite3に置き換えてください。

Importmapを使ったChartkickの設定

config/importmap.rbに以下を追加します:

pin "chartkick", to: "chartkick.js"
pin "Chart.bundle", to: "Chart.bundle.js"

さらに、app/javascript/application.jsに以下を追加します:

import "chartkick"
import "Chart.bundle"

esbuild、Webpacker、その他のJSバンドラーを使う場合は、Chartkickのドキュメントを参照してください。

ChartkickとGroupdateでグラフを作成する

モデルとデータの準備:

created_atタイムスタンプを持つUserモデルがあるとします。日ごとに作成されたユーザー数をグラフにします。

class UsersController < ApplicationController
  def index
    @users_by_day = User.group_by_day(:created_at).count
  end
end

User.group_by_day(:created_at).countは、1日あたりに作成されたユーザー数をカウントするシンプルなSQLクエリを生成します。

Indexビューの作成:

ビューで、Chartkickが提供するline_chartヘルパーを使ってグラフを作成します:

<!-- app/views/users/index.html.erb -->
<h1>Users Registered Over Time</h1>
<%= line_chart @users_by_day %>

rails sでサーバーを起動してページを開くと、日ごとに作成されたユーザー数を示す折れ線グラフが表示されます。

グラフを改善する

Chartkickでは、色やメッセージなどさまざまなオプションでグラフをカスタマイズできます。先ほどのグラフをカスタマイズする例を示します:

<%= line_chart @users_by_day, colors: ["#b00"], message: "Loading...", library: { backgroundColor: "transparent" } %>

さまざまな種類のグラフを作成する

Chartkickはさまざまな種類のグラフに対応しています。以下は実装できるグラフの例です。

円グラフ

アプリケーション内のユーザーロールの分布を可視化する円グラフを作成するには:

Ruby:

@user_roles = User.group(:role).count

erb:

<%= pie_chart @user_roles %>

縦棒グラフ

ユーザーが毎月作成した投稿数を可視化するには:

Ruby:

@posts_by_month = Post.group_by_month(:created_at).count

erb:

<%= column_chart @posts_by_month %>

面グラフ

折れ線グラフに似た、塗りつぶしのある面グラフを作成するには:

erb:

<%= area_chart @users_by_day %>

まとめ

Chartkickを使えば、Ruby on Railsアプリケーションでわずか数行のコードで動的なグラフをすばやく簡単に作成できます。これらのグラフをアプリケーションに組み込むことで、データから洞察を得るための可視化を提供し、ユーザーの意思決定を支援できます。

こちらの記事もおすすめです:

• Railsマイグレーションを生成する方法
• Railsマイグレーションをロールバックする方法