CCNA实验8:关于PPP的一些相关的实验:
2009-11-18 20:00
465 查看
图表的插件已经越来越多了,连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
下载 http://teethgrinder.co.uk/open-flash-chart/ 上最新的代码,将open-flash-chart.swf 和 swfobject.js 按下图放置
新增task,用于将js,swf拷贝至public目录下,这个就很简单了,就是FileUtils cp 就可以了
file:/vendor/plugins/open_flash_chart/tasks/open_flash_chart_tasks.rake
增加javascript_include_tag,我们定义为:chart
file:/vendor/plugins/open_flash_chart/lib/open_flash_chart.rb
增加view的helper方法,用于显示图片,这样就不用再新建一个action了
file:/vendor/plugins/open_flash_chart/lib/open_flash_chart.rb
这里我们采用UUID来生成DIV的ID。(关于UUID可以参考我很久以前写的一篇帖子:http://mmm.iteye.com/blog/24298)
目前还没有时间自己来写graph的代码,继续沿用pullmonkey的,我们拿到手修改之,删掉不需要的,这断没有太的意思,代码又长,就不写了。
require 和 include 我们上面的代码
file:/vendor/plugins/open_flash_chart/init.rb
一个新的插件就诞生了,虽然现在还是基于pullmonkey写的,但是以后有时间一定会再次折腾:)
=====================================分割线===================================
我知道很多人对怎么折腾并不感兴趣,也许会跟我说:"别啰唆,告诉我怎么用就行了,烦死了"
OK
首先请忽略上面所有的内容,安装插件
执行task拷贝js和swf文件
在你的layout中添加javascript_include_tag :chart
在视图中使用 open_flash_chart 或者 chart 显示图表
来个具体的例子吧:
我们采用http://pullmonkey.com/projects/open_flash_chart/view_source_code/candle中的代码
新建controller demo
修改:
/app/views/demo/index.html.erb
新建action :candle
file:/app/controllers/demo_controller.rb
启动server,浏览一下 http://host:port/demo
来个截图:
下一步,下一步,彻底放弃他的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
ruby script/generate plugin open_flash_chart
下载 http://teethgrinder.co.uk/open-flash-chart/ 上最新的代码,将open-flash-chart.swf 和 swfobject.js 按下图放置
新增task,用于将js,swf拷贝至public目录下,这个就很简单了,就是FileUtils cp 就可以了
file:/vendor/plugins/open_flash_chart/tasks/open_flash_chart_tasks.rake
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
增加javascript_include_tag,我们定义为:chart
file:/vendor/plugins/open_flash_chart/lib/open_flash_chart.rb
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
增加view的helper方法,用于显示图片,这样就不用再新建一个action了
file:/vendor/plugins/open_flash_chart/lib/open_flash_chart.rb
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
这里我们采用UUID来生成DIV的ID。(关于UUID可以参考我很久以前写的一篇帖子:http://mmm.iteye.com/blog/24298)
目前还没有时间自己来写graph的代码,继续沿用pullmonkey的,我们拿到手修改之,删掉不需要的,这断没有太的意思,代码又长,就不写了。
require 和 include 我们上面的代码
file:/vendor/plugins/open_flash_chart/init.rb
require 'uuidtools' require 'open_flash_chart' require 'graph' ActionView::Base.send :include, OpenFlashChart::Helper
一个新的插件就诞生了,虽然现在还是基于pullmonkey写的,但是以后有时间一定会再次折腾:)
=====================================分割线===================================
我知道很多人对怎么折腾并不感兴趣,也许会跟我说:"别啰唆,告诉我怎么用就行了,烦死了"
OK
首先请忽略上面所有的内容,安装插件
ruby script/plugin install http://martinx.googlecode.com/svn/trunk/plugins/open_flash_chart
执行task拷贝js和swf文件
rake chart:install
在你的layout中添加javascript_include_tag :chart
<%= javascript_include_tag :defaults, :chart %>
在视图中使用 open_flash_chart 或者 chart 显示图表
<%= chart width, height, url[,background]%>
来个具体的例子吧:
我们采用http://pullmonkey.com/projects/open_flash_chart/view_source_code/candle中的代码
新建controller demo
ruby script/generate controller demo index
修改:
/app/views/demo/index.html.erb
<!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>
新建action :candle
file:/app/controllers/demo_controller.rb
重复的代码没什么好拷贝的,请查阅http://pullmonkey.com/projects/open_flash_chart/view_source_code/candle 上的action:candle
启动server,浏览一下 http://host:port/demo
来个截图:
下一步,下一步,彻底放弃他的graph.rb。
TO BE CONTINUE....
相关文章推荐
- 关于Intent Flag相关的一些东西
- 关于相关系数的一些理解误区
- 关于初始化 degug 和Release 的一些相关问题
- 关于表格动态添加行并处理相关表单元素的一些修改----优化for重用(2)
- 关于java中的==,equal,new,= 的一些相关知识(有点乱)
- 关于java的一些相关知识点
- 关于css中的伪类first-child的一些相关知识点
- 关于就医的一些相关知识
- 关于协方差矩阵和相关系数矩阵的一些应用认识
- CCNA实验4:HDLC和PPP
- 关于内部类的一些实验,包括利用反射避开编译器的检查
- 关于Android23 及以上模拟器处理应用闪退的一些问题(权限相关)
- 关于Tensorflow实验相关资料整理
- 从一个coder的角度看一些关于计算机相关的争论
- 谈谈关于PHP的代码安全相关的一些致命知识
- web中使用到的一些关于坐标相关知识
- 关于客户端和服务端通信方式的一些实验
- 关于Jackson相关的一些常用注解
- 关于java的一些相关源码
- 关于Office 2010激活及一些相关知识