html5jp_graphs

HTML5.jpのグラフライブラリーをRailsから簡単に使えるプラグインです。githubで公開しています。垂直棒グラフ、レーダーチャート、円グラフ、折れ線グラフをサポートしています。日本語をグラフのなかに表示できるのがこのライブラリの特徴です。

インストール方法

gitをインストールした環境で、以下を実行してください。

git clone git://github.com/nay/html5jp_graphs.git vendor/plugins/html5jp_graphs

セットアップ

必要なJavaScriptをレイアウトなどでインクルードしてください。public/javascripts下をすべて読み込むようにすると便利です。

<%= javascript_include_tag :all %>

個々にJavaScriptファイルを指定する場合は、利用するグラフによって以下をインクルードしてください。

共通・・・・・・・ excanvas.js、excanvas-compressed.js
垂直棒グラフ・・・・ vbar.js
レーダーチャート・・・radar.js
円グラフ・・・・・・・circle.js
折れ線グラフ・・・・ line.js

また、グラフを表示したいコントローラのヘルパーに :htmltjp_graphs を加えてください。

class GraphsController < ApplicationController
  helper :html5jp_graphs
end

垂直棒グラフを表示するには

<%= vertical_bar_chart [['accesses', 520, 340, 804, 602], ['clicks', 101, 76, 239, 321]] %>

または、eachなど、必要なメソッドを備えた独自のモデルオブジェクトを与えることもできます。

<%= vertical_bar_chart access_click_summaries %>

独自のオブジェクトを渡す方法についての詳細は、RDocを参照してください（RDocは、vender/plugins/htmltjp_graphs下で rake rdocを実行するか、アプリケーションのルートディレクトリで rake doc:plugins:html5jp_graphs を実行すると作成できます）。

レーダーチャートを表示するには

<%= radar_chart [['review1', 5, 4, 3], ['review2', 3, 5, 2]],
       :aCap => ['price', 'style', 'sound'] %>

<%= radar_chart reviews %>

折れ線グラフを表示するには

<%= line_chart [['accesses', 520, 340, 804, 602], ['clicks', 101, 76, 239, 321]] %>
  
<%= line_chart access_click_summaries %>

円グラフを表示するには

<%= pie_chart([["very good", 400], ["good", 300], ["bad", 100], ["very bad", 300]]) %>

<%= pie_chart opinions %>

オプションを指定するには

HTML5.jpで用意されているすべてのオプションが利用できます。オプションはヘルパーメソッドにハッシュで与えます。文字列型のオプション値を与えるときは、文字列を''で囲むように気をつけてください。囲まれていない文字列は、JavaScriptコードとして扱われます。

例えば、レーダーチャートで backgroundColor オプションを指定するには次のように記述します。

<%= radar_chart reviews, :backgroundColor => "'red'" %>