目的
Userモデルが作成された増加量を、Chartkickを使ってグラフ表示を目指しています。
created_atを月ごとにカウントし、グラフでは月でまとまった形で表示します。
環境
ruby 2.6.5p114 (2019-10-01 revision 67812) [x86_64-darwin18]
Rails 6.0.3.2
コード
ruby
1### users_contolloer 2def user_count_by_month(users, from, to) 3 result = {} 4 groups = users.group_by { |user| user.created_at.beginning_of_month } 5 6 range = (from.to_date..to.to_date).map{ |d| d.at_beginning_of_month }.uniq 7 range.each do |month| 8 month_t = month.in_time_zone 9 result[month_t] = groups.has_key?(month_t) ? groups[month_t].count : 0 10 end 11 12 return result 13end
### result {Tue, 01 Jan 2019 00:00:00 JST +09:00=>34, Fri, 01 Feb 2019 00:00:00 JST +09:00=>33, Fri, 01 Mar 2019 00:00:00 JST +09:00=>36, Mon, 01 Apr 2019 00:00:00 JST +09:00=>30, Wed, 01 May 2019 00:00:00 JST +09:00=>33, Sat, 01 Jun 2019 00:00:00 JST +09:00=>32, Mon, 01 Jul 2019 00:00:00 JST +09:00=>45, Thu, 01 Aug 2019 00:00:00 JST +09:00=>46, Sun, 01 Sep 2019 00:00:00 JST +09:00=>36, Tue, 01 Oct 2019 00:00:00 JST +09:00=>30, Fri, 01 Nov 2019 00:00:00 JST +09:00=>38, Sun, 01 Dec 2019 00:00:00 JST +09:00=>30, Wed, 01 Jan 2020 00:00:00 JST +09:00=>44, Sat, 01 Feb 2020 00:00:00 JST +09:00=>29, Sun, 01 Mar 2020 00:00:00 JST +09:00=>35, Wed, 01 Apr 2020 00:00:00 JST +09:00=>30, Fri, 01 May 2020 00:00:00 JST +09:00=>29, Mon, 01 Jun 2020 00:00:00 JST +09:00=>34, Wed, 01 Jul 2020 00:00:00 JST +09:00=>35, Sat, 01 Aug 2020 00:00:00 JST +09:00=>20}
erb
1<!-- partialで読み込むファイル --> 2<section> 3 <h3><%= User.model_name.human %></h3> 4 <%= line_chart month_group %> 5</section>
通常の状態で折れ線グラフを表示すると、以下のようなものになります。
見た目はそこまでおかしくないのですが、Tooltipには「2019年3月1日」と出ておりますが、月ごとに集計しているので「1日」の表記は不要でした。
また、X軸の表示も「3月2019年」となっており、これも「2019年3月」としたいです。
この時、TooltipとX軸ラベルの表記を修正するには、どのような方法がありますか?
試したこと
erb
1<%= line_chart month_group.map { |date, count| [date.strftime('%Y年%m月'), count] } %>
データ内のkeyを変えると以下になります
しかし、X軸のラベルが全て表示され、デフォルトのような丁度いい間隔で表示するようにはなりませんでした。
erb
1<%= line_chart month_group, library: { xLabel: { format: '%Y年%m月' } } %>
chart.jsのオプションで、ラベルを変更できるみたいですが、有効ではなかったようです。
あなたの回答
tips
プレビュー