2017.07 «  - - 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 - - » 2017.09
TOP > Generatorを使ってみる【Sparklines Graph その2】

 ← Pluginを使ってみる【Embedded JavaScripts v.1.0】 | TOP | Generatorを使ってみる【Sparklines Graph その1】

スポンサーサイト 

--年--月--日 (--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


【広告】

[--.--.--(--) --:--] スポンサー広告 | Trackback(-) | Comment(-)
↑TOPへ

Generatorを使ってみる【Sparklines Graph その2】 

2007年10月14日 ()
前回、表示されるグラフがちっちゃすぎてツカエナイのかも?と書きましたが、本家サイトをよくよく読んでみるともともとちっちゃいグラフを表示する用のライブラリだったようです。

# script/generate controller graph_example

コントローラで、ライブラリをインクルードします。ヘルパも使うよ、と書いておきます。加えて、テキトーにアクション(今回は index としました)を指定します。

app/controllers/graph_example_controller.rb

require_dependency 'sparklines'
class GraphExampleController < ApplicationController
  helper :sparklines

  def index
  end
end



ビューで、いよいよグラフを表示させます。

app/views/graph_example/index.rhtml

<html>
<body>
<%= sparkline_tag [20], :type => 'pie', :diameter => 300 %>
</body>
</html>



そうすると、以下のような円グラフが表示されました。



いろんなグラフを描けるようですので、紹介しておきます。ちなみに現在使用しているこのライブラリのバージョンは 0.4.0 です。

API の詳細については、こちらの本家を参考にしてみてください。

円グラフの色を変えてみる。

<%= sparkline_tag [20], :type => 'pie', :diameter => 300, :share_color => '#555555', :remain_color => '#828282' %>



実際に使えそうなのは、この円グラフだけで、これより下に紹介しているグラフはあんまり使えなさそうです・・・・ガビーン



面グラフ

<%= sparkline_tag [100, 90, 80, 70, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100], :height => 90, :type => 'area' %>






線が途切れ途切れのグラフ

<%= sparkline_tag [10,20,30,40,50,60,50,40,30,20,10,0], :type => 'discrete', :height => 90 %>






折れ線グラフ

<%= sparkline_tag [10,20,30,40,50,60,50,40,30,20,10,0], :type => 'smooth', :height => 30 %>




あぁ、あんまり役に立ちそうも無いライブラリかもですね。ごめんなさいトホホのホ。

【広告】

[2007.10.14(Sun) 22:44] generator/pluginTrackback(0) | Comments(0)
↑TOPへ

 ← Pluginを使ってみる【Embedded JavaScripts v.1.0】 | TOP | Generatorを使ってみる【Sparklines Graph その1】

COMMENT

COMMENT POST















管理者にだけ表示

 ← Pluginを使ってみる【Embedded JavaScripts v.1.0】 | TOP | Generatorを使ってみる【Sparklines Graph その1】
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。