こんにちは。tnです。

今回はCSSによってグラフ表示を実現するCSS Graphsというプラグインを紹介したいと思います。

まずは

ruby script/plugin install http://topfunky.net/svn/plugins/css_graphs

でインストールしましょう。自動的に標準のRailsヘルパーになるそうです。

続いて、グラフに使う画像イメージをgeneratorを使ってコピーします。

ruby script/generate css_graphs

<%= bar_graph  [['test1', 54],
                ['test2', 25],
                ['test3', 81]] %>

と記述すると、

こんなグラフを表示することが出来ます。

他に

<%= horizontal_bar_graph  [['test1', 54], 
                           ['test2', 25], 
                           ['test3', 81]] %>

<%= complex_bar_graph  [['test1', 54], 
                        ['test2', 25], 
                        ['test3', 81]] %>

といったグラフが生成できます。

また、ちょっと変り種として、multi_bar_graphというものもあります。

<% @data_for_graph = [
      [['James',175],['John',180],['Thom',168],['Taro',200]],
      [['James',60],['John',75],['Thom',52],['Taro',110]]
    ] %>
<%= multi_bar_graph @data_for_graph, {:width => 300,:height => 250}) do |index,variable|
  url_for( :action => 'show', :id => index)
end %>

赤が身長で黄色が体重というデータ…のつもりです。それぞれのグラフはリンクになっていますので、この例の場合、各個人の詳細なプロフィールページに飛ばしてみるのもいいでしょう。

multi_bar_graphの第2引数にはグラフのオプションを記述します。

• :width => 枠の横幅
• :height => 枠の高さ
• :display_value_on_bar => trueのとき、各グラフの数値を表示。
• :colors => グラフの色を指定
• :color_by => 色分けを、グラフの種類毎('dimension')か、個別のデータ毎('index')から選ぶ。

なお、このプラグインを扱う上での注意は、

• グラフは1ページに1つしか作れない
  表示位置がかぶったりするようです。
• グラフに用いる値は0-100の間
  基本的にパーセンテージを表すグラフのためでしょうか。

ちょっと改造してみる

ところで、ひとつ気になったのが、bar_graphのグラフ枠の横幅。

これは、どうやらグラフの棒が5本であること前提のようです。

6本で試すと、

この通り、なんとなく残念な表示になってしまいます。

そこで、vendor/plugins/css_graphs/lib/css_graphs.rbをエディタで開き、以下のように書き換えます(抜粋/12行目辺り)。

def bar_graph(data=[])
  width = 378
  height = 150
  colors = %w(#ce494a #efba29 #efe708 #5a7dd6 #73a25a)

after

def bar_graph(data=[])
  width =  76 * data.size
  height = 150
  colors = %w(#ce494a #efba29 #efe708 #5a7dd6 #73a25a) * (((data.size - 1)/5)+1)

そうすると、

いい感じになりました！

そのままの状態ではちょっと使いづらいなと思うプラグインも、ちょこっと手を加えてみるとより良くなりますね。それでは、また。

コメント (0)  |トラックバック (0)