読者です 読者をやめる 読者になる 読者になる

CaramelTrip

家族で海外を旅するフリーランス・プログラマーのログ

railsで簡単にグラフを作成できる!しかも3つのグラフライブラリから好きなものを選べる「chartkick」

f:id:parsetree:20170125203424p:plain


railsのプロジェクトでグラフを追加しようと試したところ、かなりお手軽に追加できるgemを発見。

使いやすく、3つのグラフライブラリから自分の好きなものを選べてしまう!

最高のグラフツールを、導入方法や設定をUI付きでご紹介します。


chartkick

グーグル先生によると、いくつかグラフ用のgemがある事がわかりました。


その中でも使いやすく、グラフのライブラリを選択できるというchartkickを試してみました。


chartkickのGithubはこちら


このReadmeページにインストール方法、データの表示方法、グラフの種類、グラフライブラリなど乗ってます。英語でね。


インストール

gemfileに以下の1行を追加

$ gem "chartkick"


で、bundle installですね。

$ bundle install --path=vendor/bundle


はい、インストール終了。


chartkickは、以下の3つのグラフライブラリから好きなものを選択して使用できます。

う〜ん素晴らしい!

  1. Chart.js

  2. Google Charts

  3. Highcharts

それぞれメリット・デメリットやUIが違ってきます。


なので、全部試してみました。


1. Chart.js

3つの中で一番簡単に設定できます。


ですが、UIがイマイチな気がします。

f:id:parsetree:20170125203516p:plain

特徴としては、

  • seriesの凡例が全部表示される。

  • 色が原色使い。

  • チャート本体にタイトルがない。


設定方法は、app/assets/javascript/application.jsに以下の2行を追加

//= require Chart.bundle
//= require chartkick


あとは、viewでデータを表示させて上げればOK。


データ表示は1行で出来てしまう!

<%= pie_chart (@graph_data) %>


2. Google Charts

色合いが好みではないですが、表示するseriesが多い場合はコレがオススメ。

f:id:parsetree:20170125203549p:plain


特徴としては、

  • seriesの凡例が多い場合はページネイションみたいな次へアイコン表示。

  • chat本体に数値が表示されている。(piechartでは勝手に%表示してくれるっ!)

  • マウスジェスチャーがある。


設定方法は、app/assets/javascript/application.jsに以下の1行を追加

//= require chartkick


次に、headタグ内のapplication.jsが呼ばれる手前に以下の1行を追加

<%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>


あとは、viewでデータを表示させて上げればOK。

<%= pie_chart (@graph_data) %>


3. Highcharts

最後はHighcharts。

私のはコレが一番好きです。

ただし、商用利用は有料になるそうなのでご注意下さい。

f:id:parsetree:20170125203424p:plain


特徴としては、

  • デフォルトでは、seriesの凡例がない。

  • chart本体に数値が表示されている。

  • ページロード時のジェスチャーと、マウスジェスチャーがある。


設定方法は、highchart.jsをDownloadして以下に保存。

vendor/assets/javascripts


次に、app/assets/javascript/application.jsに以下の2行を追加

//= require highcharts
//= require chartkick


あとは、viewでデータを表示させて上げればOK。

<%= pie_chart (@graph_data) %>


まとめ

もちろん、どのグラフライブラリもjs側で設定変更できるので、後から色々カスタマイズ出来ます。


ただ、デフォルトである程度やってくれた方が助かりますので、3つの中でお好きなグラフUIをチョイスして使ってみては如何でしょうか?


お疲れ様でした♪