こんにちわ。寒くなってきましたがみなさまお元気ですか?

さて、先日ちょっとしたグラフを描画したかったんですよ。それでなにか使いやすいライブラリ無いかなーと思っていたら railscast (revisedなので有料です) で Morris.js ってjQueryプラグインが紹介されてて良さげだったので使ってみました。google analytics みたいなツールチップも出してくれます。

使い方はとっても簡単です。

まず、jQuery (>=1.7) と Raphael (>=2.0) が必要です。あとは Morris.js があれば動作します。
これらを app/assets/javascripts/application.js に設定してください。この記事執筆時点での Morris.js のバージョンは 0.3.3 でした。

//= require jquery
//= require raphael.min
//= require morris.min

これでもう使えます。

表示したいデータをこのような形式にしましょう。今回は日付とアクティブ、非アクティブの割合をデータとして持つとします。X軸が日付、Y軸がアクティブ、非アクティブの割合のイメージです。

@user_infos = UserInfo.scoped.map do |user_info|
{
  :date => user_info.date,
  :active_rate => user_info.active_rate,
  :inactive_rate => user_info.inactive_rate
}

あとはview側で適当なid要素を定義してください。値もそのdata属性に持たせるとすっきりして良いかなーと思います。

= tag :div, :id => 'chart', :data => { :user_infos => @user_infos.to_json }

あとはグラフを描画する処理を記述するだけです。例えば単純な線グラフならこのようになります。あ、このファイルもapplication.jsに追加するのは忘れないでくださいね。

jQuery ($) ->
  Morris.Line(
    element: 'chart' // グラフを描画するid要素
    data: $.parseJSON($('#chart').data('user_infos'))
    xkey: 'date' // X軸として使う値
    ykeys: ['active_rate', 'inactive_rate'] // Y軸として使う値
    labels: ['アクティブ', '非アクティブ']
    ymin: 0
    ymax: 100
    postUnits: '%'
    lineWidth: '5px'
    xLabels: 'day'
    hideHover: true
    lineColors: ['red', 'blue']
  )

そしたらこういう結果が得られるわけです。ツールチップも何気に嬉しいですね。

jsのグラフ例

ちなみに、以前は Line charts しか描けなかったんですが、最近激しくバージョンアップしていて、0.3.0で Donut charts、0.3.2で Area charts、0.3.3で Bar chartsと続々と対応してきています。これは期待できそう!

なんかメソッド名もわかりやすいしw
Line charts  -> Morris.Line
Donut charts -> Morris.Donut
Area charts  -> Morris.Area
Bar charts   -> Morris.Bar

詳しくはこちらをご覧ください〜。 Morris.js oesmith/morris.js
このエントリーをはてなブックマークに追加