レイルズ ロゴ

Ruby on Railsでグラフ描画ライブラリ Chartkick を使用する方法

はじめに

Rails で使用することができるグラフ描画ライブラリはいくつかあるようだが、今回は簡単に利用できる Chartkick を使用する方法をまとめる。

環境

・Rails 5.0.2

手順

Gemfile を編集する

Gemfileに gem ‘chartkick’ を追加する。

bundle install を実行

JavaScript のライブラリを読み込む

Chartkick を使用するためには、JavaScript のライブラリを読み込む必要がある。

ここでは app/views/layouts/application.html.erb のheadタグに、ライブラリとして Google Charts を利用するためのコードを記述した。

※ Highchartsを使用する場合(商用利用は有償)

JavaScriptファイルが必要なので、ダウンロードページから落としてきて自分で設置するか、公式が提供するCDNアドレスを使用する。

ダウンロードページ:Download | Highcharts
CDNアドレス:code.highcharts.com

下記のコードはCDNアドレスを使用した場合(Highchartsを使用するためにはhighchart.jsが必要)。

データを用意する

グラフ描画用のデータには、配列かハッシュの形式が使用できる。

グラフを描画する

ビューの中のグラフを表示したい位置に、下記のヘルパーメソッドを記述する。

データを直接指定することも可能

グラフの種類ごとにヘルパーメソッドが用意されている。
・line_chart
・pie_chart
・column_chart
・bar_chart
・area_chart
・geo_chart

オプション等の詳しい説明は公式ドキュメントを参照。
Documentation for chartkick (2.2.3)

おわりに

ヘルパーメソッドにデータを渡すだけでグラフが描画できる手軽さが魅力。

参考ページ

Chartkick 公式
http://chartkick.com/

Documentation for chartkick (2.2.3)
http://www.rubydoc.info/gems/chartkick

Chartkick – GitHub
https://github.com/ankane/chartkick

Ruby on Rails で使えるグラフ・チャート用ライブラリまとめ
http://easyramble.com/graph-libraries-for-rails.html

シェアしていただけると嬉しいです

スポンサーリンク