👏
Railsでグラフを作成する(Chartkick 3本線)
はじめに
Railsでグラフを描画する必要がありました。調べると、Chartkickで描画している記事が多くあったため採用したのですが、複数線を日本時間で出力するのに苦労しました。復習と備忘録に書いておきます。
実行環境
'rails', '~> 5.2.8'
ruby:2.5.7
（Rails 6,7の場合は別の方法で導入すると公式サイトにあります)
Chartkick準備
Gemfile追加
gem 'chartkick'
シェルコマンド実行
bundle install
app/assets/javascripts/application.js追加
//= require chartkick
//= require Chart.bundle
Rails5の場合はこれで準備完了です。
グラフ描画(1本線)
test.html.erb
<%= javascript_include_tag 'application' %>
<%
@data = [['07/01', 10],
['07/02', 20],
['07/03', 30]]
%>
<%= line_chart @data %>
グラフ描画(３本線)
test.html.erb
<%= javascript_include_tag 'application' %>
<%
@data = [
{ name: "A", data: {'07/01' => 10,
'07/02' => 20,
'07/03' => 30,} },
{ name: "B", data: {'07/01' => 20,
'07/02' => 10,
'07/03' => 20,} },
{ name: "C", data: {'07/01' => 30,
'07/02' => 20,
'07/03' => 10,} },
]
%>
<%= line_chart @data %>
経緯
公式サイトを見ると、group_by_dayというコードでグラフ用データを用意していますが、このメソッドはRailsのタイムゾーンがUTCでないと動作しないです。
そのため、代わりにハッシュを使ってグラフ用データを用意しました。
以上参考になれば幸いです。
参考記事
Discussion