質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

0回答

1111閲覧

Chartkickでtooltipと軸ラベルの表記を変更する

stimlocy

総合スコア11

Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2020/08/20 07:32

編集2022/01/12 10:55

目的

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のオプションで、ラベルを変更できるみたいですが、有効ではなかったようです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問