はじめに
Railsでchartkickを使った円グラフの導入で、値を割合（％）で表示する方法をご紹介します。
プログラミングの学習を2021年2月より始めた初学者です。
意外と検索しても求めていた記事がなく、苦労したので備忘録として投稿します。
お役に立てたら嬉しいです。
chartkickの導入
chartkickとは1行のコードで、円グラフや棒グラフ、散布図などが作成できます。
インストール
Gemfileに追記
gem 'chartkick'
Gemfile記述後、gemのインストールを行う。
bundle install
package.jsonのdependenciesに追記
yarn add chartkick chart.js
app/javascript/packs/application.jsに次を追加
import "chartkick/chart.js"
以上で導入準備は完了です。
目標物（円グラフ）
家計簿アプリの実装です。
カテゴリー別の合計金額を割合（％）で円グラフに表示しています。
※グラフにカーソルを合わせなくても値が表示されていてほしいです。。。
どなたかわかる方いましたら、教えてほしいです。
実装しよう
ビューに記述
表示したいviewsファイルにhtmlを1行追記
公式ドキュメントに基本のコードが記載されています。（ページ下部の参考文献を参照願います。）
<%= 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}
# 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