はじめに

Railsでchartkickを使った円グラフの導入で、値を割合（％）で表示する方法をご紹介します。
プログラミングの学習を2021年2月より始めた初学者です。
意外と検索しても求めていた記事がなく、苦労したので備忘録として投稿します。
お役に立てたら嬉しいです。

chartkickの導入

chartkickとは1行のコードで、円グラフや棒グラフ、散布図などが作成できます。

インストール

Gemfileに追記

Gemfile

gem 'chartkick'

Gemfile記述後、gemのインストールを行う。

ターミナル

bundle install

package.jsonのdependenciesに追記

ターミナル

yarn add chartkick chart.js

app/javascript/packs/application.jsに次を追加

application.js

import "chartkick/chart.js"

以上で導入準備は完了です。

目標物（円グラフ）

家計簿アプリの実装です。
カテゴリー別の合計金額を割合（％）で円グラフに表示しています。
※グラフにカーソルを合わせなくても値が表示されていてほしいです。。。
どなたかわかる方いましたら、教えてほしいです。

実装しよう

ビューに記述

表示したいviewsファイルにhtmlを1行追記
公式ドキュメントに基本のコードが記載されています。（ページ下部の参考文献を参照願います。）

index.html.erb

<%= pie_chart @variable_ratio, donut: true, suffix: "%" %>

※　@ variable_ratioは下記コントローラーにて定義したインスタンス変数

コントローラに記述

ハッシュ形式でグラフに表示したい項目を取得する記述を行います。

1,　whereメソッドを用いて、variable_costsテーブルのstart_timeカラムが今月のレコードを取得
2,　joinsメソッドとgroupメソッドを用いて、関連テーブルのvaricatesテーブルからnameカラムを種類毎にグループ化。
　　sum(:price)で合計金額を算出。
　　sort_by { |_, v| v }.reverse.to_hは値が大きい順に並び替え。
　　得られるハッシュ：{"日用品"=>6000, "食費"=>6000, "病院"=>3000}
3,　上記ハッシュの値を割合に変更する。
　　each文を用いて、（値×100）/今月の合計金額　で割合を出して、ハッシュに代入する。
　　代入後のハッシュ：{"日用品"=>40, "食費"=>40, "病院"=>20}

variables_controller.rb

# 1,データベースから今月のレコードを取得
@variable_costs = VariableCost.where('extract(year from start_time) = ? AND extract(month from start_time) = ?', Time.now.year, Time.now.month)
# 2,関連テーブルのカテゴリー名でグループ化して、金額を合計する
@variable_ratio = @variable_costs.joins(:varicate).group("varicates.name").sum(:price).sort_by { |_, v| v }.reverse.to_h
# {"日用品"=>6000, "食費"=>6000, "病院"=>3000}のハッシュが返される
# 3,ハッシュの値を下記each文で、割合に変更して代入する
@variable_ratio.each do |k,v| 
  ratio = (v * 100).to_f / @variable_costs.sum(:price)
  @variable_ratio[k] = ratio.round(1)
end
# {"日用品"=>40, "食費"=>40, "病院"=>20}にハッシュの値が変わる

DB

variable_costs テーブル

Column	Type	Options
varicate_id	references	foreign_key: true
variable_name	string	null: false
price	integer	null: false
date	date	null: false

Association

belongs_to :varicate

varicates テーブル

Column	Type	Options
name	string	null: false

Association

has_many :variable_costs

本番環境へデプロイする際の注意点

アセットパイプラインを通すために、アセットのプリコンパイルが必要。

アセットパイプラインとは、JavaScriptやCSSのアセットを最小化 (minify: スペースや改行を詰めるなど) または圧縮して連結するためのフレームワーク

※Railsガイド抜粋

開発環境上のターミナルで実行

ターミナル

% rake assets:precompile RAILS_ENV=production

AWSにデプロイした際、グラフが表示されず"No data"となり、？？？となりました。
その時に行った対処となります。

最後に

私がRubyの学習を初めて約3ヶ月、今回がQiita初投稿となりました。
右も左もわからなかった私が、少しは自分で考えてコードを書けるようになりました。
これからもアウトプットを意識して頑張っていきます。
Twitterアカウント:　https://twitter.com/pen_gin0316

間違っている点や改善点等ありましたら、ご連絡頂ければと思います。

最後までご覧頂きありがとうございました。

参考文献

chartkick/ドキュメント:https://www.rubydoc.info/gems/chartkick/4.0.4