Yet another chart plugin
韦嘉颖
图表的插件已经越来越多了，连google也提供了相应的api，今天我们再来折腾一个。这个插件基于
Open Flash Chart:http://teethgrinder.co.uk/open-flash-chart/
官方文档中提到了rails相关插件，其中有一个http://pullmonkey.com/写的，能用，但是感觉代码混乱，并且每次都会include一个swfobject.js，一个图还要写个action,不爽。于是乎想动手重写。
=====================================分割线===================================
分两步走：
第一：增加view相关的helper
第二：完全从写他的Grahp代码
今天先来说说第一步
首先new 一个 plugin
[code]
ruby script/generate plugin open_flash_chart
[/code]
下载 http://teethgrinder.co.uk/open-flash-chart/ 上最新的代码，将open-flash-chart.swf 和 swfobject.js 按下图放置
[img]http://mmm.iteye.com/upload/picture/pic/7223/f5b6e95b-5ca2-3859-ad95-278b2e192442.gif[/img]
新增task,用于将js,swf拷贝至public目录下,这个就很简单了，就是FileUtils cp 就可以了
file:/vendor/plugins/open_flash_chart/tasks/open_flash_chart_tasks.rake
[code]
namespace :chart do
desc 'Install the Open Flash Chart components'
task :install do
require 'fileutils'
FileUtils.rm_rf(File.join(File.join(RAILS_ROOT, 'public', 'javascripts', 'open_flash_chart')))
FileUtils.cp_r(File.join(File.dirname(__FILE__), '..', 'public', 'javascripts', 'open_flash_chart'),
File.join(RAILS_ROOT, 'public', 'javascripts'))
end
end
[/code]
增加javascript_include_tag，我们定义为:chart
file:/vendor/plugins/open_flash_chart/lib/open_flash_chart.rb
[code]
module ActionView::Helpers::AssetTagHelper
alias_method :old_javascript_include_tag, :javascript_include_tag
def javascript_include_tag(*sources)
main_sources, application_source = [], []
if sources.include?(:chart)
sources.delete(:chart)
sources.push('open_flash_chart/swfobject')
end
unless sources.empty?
main_sources = old_javascript_include_tag(*sources).split("\n")
application_source = main_sources.pop if main_sources.last.include?('application.js')
end
[main_sources.join("\n"), application_source].join("\n")
end
end
[/code]
增加view的helper方法，用于显示图片，这样就不用再新建一个action了
file:/vendor/plugins/open_flash_chart/lib/open_flash_chart.rb
[code]
module OpenFlashChart
module Helper
def open_flash_chart(width, height, url, background_color='#FFFFFF')
uuid = UUID.random_create.to_s
<<doc
<div id="#{uuid}">
Open Flash Chart.
</div>
<script type="text/javascript">
var so = new SWFObject("/javascripts/open_flash_chart/open-flash-chart.swf", "Open Flash Chart", "#{width}", "#{height}", "9", "#{background_color}");
so.addVariable("variable","true");
so.addVariable("data", "#{url}");
so.addParam("allowScriptAccess", "sameDomain");
so.write("#{uuid}");
</script>
doc
end
alias chart open_flash_chart
end
end
[/code]
这里我们采用UUID来生成DIV的ID。(关于UUID可以参考我很久以前写的一篇帖子：http://mmm.iteye.com/blog/24298)
目前还没有时间自己来写graph的代码，继续沿用pullmonkey的，我们拿到手修改之，删掉不需要的，这断没有太的意思，代码又长，就不写了。
require 和 include 我们上面的代码
file:/vendor/plugins/open_flash_chart/init.rb
[code]
require 'uuidtools'
require 'open_flash_chart'
require 'graph'
ActionView::Base.send :include, OpenFlashChart::Helper
[/code]
一个新的插件就诞生了，虽然现在还是基于pullmonkey写的，但是以后有时间一定会再次折腾：）
=====================================分割线===================================
我知道很多人对怎么折腾并不感兴趣，也许会跟我说:"别啰唆，告诉我怎么用就行了，烦死了"
OK
首先请忽略上面所有的内容，安装插件
[code]
ruby script/plugin install http://martinx.googlecode.com/svn/trunk/plugins/open_flash_chart
[/code]
执行task拷贝js和swf文件
[code]
rake chart:install
[/code]
在你的layout中添加javascript_include_tag :chart
[code]
<%= javascript_include_tag :defaults, :chart %>
[/code]
在视图中使用 open_flash_chart 或者 chart 显示图表
[code]
<%= chart width, height, url[,background]%>
[/code]
来个具体的例子吧：
我们采用http://pullmonkey.com/projects/open_flash_chart/view_source_code/candle中的代码
新建controller demo
[code]
ruby script/generate controller demo index
[/code]
修改：
/app/views/demo/index.html.erb
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%= javascript_include_tag :defaults, :chart %>
</head>
<body>
<%= chart 500, 250, '/demo/candle' %>
</body>
</html>
[/code]
新建action :candle
file:/app/controllers/demo_controller.rb
[code]
重复的代码没什么好拷贝的，请查阅http://pullmonkey.com/projects/open_flash_chart/view_source_code/candle 上的action:candle
[/code]
启动server,浏览一下 http://host:port/demo
来个截图：
[img]http://mmm.iteye.com/upload/picture/pic/7229/1491b1c7-5c6b-3fae-9afb-8194ff4f3296.gif[/img]
下一步，下一步，彻底放弃他的graph.rb。
TO BE CONTINUE....
Open Flash Chart:http://teethgrinder.co.uk/open-flash-chart/
官方文档中提到了rails相关插件，其中有一个http://pullmonkey.com/写的，能用，但是感觉代码混乱，并且每次都会include一个swfobject.js，一个图还要写个action,不爽。于是乎想动手重写。
=====================================分割线===================================
分两步走：
第一：增加view相关的helper
第二：完全从写他的Grahp代码
今天先来说说第一步
首先new 一个 plugin
[code]
ruby script/generate plugin open_flash_chart
[/code]
下载 http://teethgrinder.co.uk/open-flash-chart/ 上最新的代码，将open-flash-chart.swf 和 swfobject.js 按下图放置
[img]http://mmm.iteye.com/upload/picture/pic/7223/f5b6e95b-5ca2-3859-ad95-278b2e192442.gif[/img]
新增task,用于将js,swf拷贝至public目录下,这个就很简单了，就是FileUtils cp 就可以了
file:/vendor/plugins/open_flash_chart/tasks/open_flash_chart_tasks.rake
[code]
namespace :chart do
desc 'Install the Open Flash Chart components'
task :install do
require 'fileutils'
FileUtils.rm_rf(File.join(File.join(RAILS_ROOT, 'public', 'javascripts', 'open_flash_chart')))
FileUtils.cp_r(File.join(File.dirname(__FILE__), '..', 'public', 'javascripts', 'open_flash_chart'),
File.join(RAILS_ROOT, 'public', 'javascripts'))
end
end
[/code]
增加javascript_include_tag，我们定义为:chart
file:/vendor/plugins/open_flash_chart/lib/open_flash_chart.rb
[code]
module ActionView::Helpers::AssetTagHelper
alias_method :old_javascript_include_tag, :javascript_include_tag
def javascript_include_tag(*sources)
main_sources, application_source = [], []
if sources.include?(:chart)
sources.delete(:chart)
sources.push('open_flash_chart/swfobject')
end
unless sources.empty?
main_sources = old_javascript_include_tag(*sources).split("\n")
application_source = main_sources.pop if main_sources.last.include?('application.js')
end
[main_sources.join("\n"), application_source].join("\n")
end
end
[/code]
增加view的helper方法，用于显示图片，这样就不用再新建一个action了
file:/vendor/plugins/open_flash_chart/lib/open_flash_chart.rb
[code]
module OpenFlashChart
module Helper
def open_flash_chart(width, height, url, background_color='#FFFFFF')
uuid = UUID.random_create.to_s
<<doc
<div id="#{uuid}">
Open Flash Chart.
</div>
<script type="text/javascript">
var so = new SWFObject("/javascripts/open_flash_chart/open-flash-chart.swf", "Open Flash Chart", "#{width}", "#{height}", "9", "#{background_color}");
so.addVariable("variable","true");
so.addVariable("data", "#{url}");
so.addParam("allowScriptAccess", "sameDomain");
so.write("#{uuid}");
</script>
doc
end
alias chart open_flash_chart
end
end
[/code]
这里我们采用UUID来生成DIV的ID。(关于UUID可以参考我很久以前写的一篇帖子：http://mmm.iteye.com/blog/24298)
目前还没有时间自己来写graph的代码，继续沿用pullmonkey的，我们拿到手修改之，删掉不需要的，这断没有太的意思，代码又长，就不写了。
require 和 include 我们上面的代码
file:/vendor/plugins/open_flash_chart/init.rb
[code]
require 'uuidtools'
require 'open_flash_chart'
require 'graph'
ActionView::Base.send :include, OpenFlashChart::Helper
[/code]
一个新的插件就诞生了，虽然现在还是基于pullmonkey写的，但是以后有时间一定会再次折腾：）
=====================================分割线===================================
我知道很多人对怎么折腾并不感兴趣，也许会跟我说:"别啰唆，告诉我怎么用就行了，烦死了"
OK
首先请忽略上面所有的内容，安装插件
[code]
ruby script/plugin install http://martinx.googlecode.com/svn/trunk/plugins/open_flash_chart
[/code]
执行task拷贝js和swf文件
[code]
rake chart:install
[/code]
在你的layout中添加javascript_include_tag :chart
[code]
<%= javascript_include_tag :defaults, :chart %>
[/code]
在视图中使用 open_flash_chart 或者 chart 显示图表
[code]
<%= chart width, height, url[,background]%>
[/code]
来个具体的例子吧：
我们采用http://pullmonkey.com/projects/open_flash_chart/view_source_code/candle中的代码
新建controller demo
[code]
ruby script/generate controller demo index
[/code]
修改：
/app/views/demo/index.html.erb
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%= javascript_include_tag :defaults, :chart %>
</head>
<body>
<%= chart 500, 250, '/demo/candle' %>
</body>
</html>
[/code]
新建action :candle
file:/app/controllers/demo_controller.rb
[code]
重复的代码没什么好拷贝的，请查阅http://pullmonkey.com/projects/open_flash_chart/view_source_code/candle 上的action:candle
[/code]
启动server,浏览一下 http://host:port/demo
来个截图：
[img]http://mmm.iteye.com/upload/picture/pic/7229/1491b1c7-5c6b-3fae-9afb-8194ff4f3296.gif[/img]
下一步，下一步，彻底放弃他的graph.rb。
TO BE CONTINUE....
类似资料：