使用rails制作图表

9esuLuciano

浏览: 244451 次

最近访客更多访客>>

wsbjwjt

wh1993125

mabusyao

maijiangde

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Rails XML jfreechart Flash Ruby

我们的目标是使用rails制作和显示类似于下面图表：

在rails中同样可以使用gurff或者jfreeChart，但是Gruff需要Rmagick来生成静态图片，假如你的图片是经常变化的，那么这个过程会非常痛苦，JFreeChart需要java，所以，我看我们还是寻找其他方法来解决这个问题吧。

什么方法？当然是flash。

我们使用xml/swf库来提供我们需要的功能，当然我们不需要懂得action script，因为已经有人为我们做好了插件-amCharts.

注意，amCharts不是开源的，甚至是需要收费的，价格大概是85欧一个站点（我靠，其实很贵啊）。当然，也有免费的版本，只不过所有图片的链接都会指向amcharts.com。

下载安装包：http://www.amcharts.com/column/download/

解压到public目录下，查看解压后的目录中是否包含.swf，xml文件和fonts目录。

使用：当在程序中被load之后，amCharts等待一个数据流，并将数据流解析和显示成为一个chart。可以静态或者动态的改变xml文件来配置amCharts的工作方式。

需要说明的是，amCharts接受的数据流实际上是一个xml文件，xml文件可以从action中得到

ruby 代码

def population
@cities = City.find(:all)
@population_data_link = formatted_population_reports_url(:xml)
respond_to do |format|
format.html
format.xml { render :action => "population.xml.builder", :layout => false }
end
end

正如我们看到的，数据流中包含两个数据：cities和population_data_link。populuation_data_link如何得到的？简单，一个路由而已。

ruby 代码

map.resources :reports, :collection => {:population => :get}

为了确保客户端安装flash，我们需要在视图中加入以下语句

ruby 代码

<%= javascript_include_tag 'swfobject' %>

现在我们要建立两个视图模板：population.html.erb和population.xml.builder

分别来看两个视图模板的内容。

population.html.erb

js 代码

<div id="population_chart" class='chart'>
<strong>Text displayed when the user doesn't have Flash. You might want to display a simple table with the population, search engines and visitor without flash would love that.</strong>
<p> To see this page properly, you need to upgrade your Flash Player, please visit the Adobe web site</p>
</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("/amcolumn/amcolumn.swf", "population_chart", "800", "380", "8", "#000000");
so.addVariable("path", "/amcolumn/");
so.addVariable("settings_file", escape("/amcolumn/column_settings.xml"));
so.addVariable("data_file", escape("<%= @population_data_link %>"));
so.addVariable("additional_chart_settings", "<settings><labels><label><x>250</x><y>25</y><text_size>18</text_size><text><![CDATA[<b>California Population as of <%= Time.now.to_s(:db) %></b>]]></text></label></labels></settings>");
so.addVariable("preloader_color", "#000000");
so.write("population_chart");
// ]]>
</script>

可以看到，基本上都是一些简单的js片段。

因为我将amChart column lib解压到public/amcolumn目录下，所以我设置path为"/amcolumn/"

同样，配置文件为"/amcolumn/column_setting.xml"，最重要的是要显示的数据data_file，我们需要显示@population_data_links，最后是一些额外的设置。

ok，这就是erb文件，下面看看xml.builder

xml 代码

xml.instruct! :xml, :version=>"1.0", :encoding=>"UTF-8"
xml.chart do
# xml.message "You can broadcast any message to chart from data XML file", :bg_color => "#FFFFFF", :text_color => "#000000"
xml.series do
@cities.each_with_index do |city, index|
xml.value city.name, :xid => index
end
end
xml.graphs do
#the gid is used in the settings file to set different settings just for this graph
xml.graph :gid => 'population' do
@cities.each_with_index do |city, index|
population = city.population
case population
# When the population is > 1 million, show the bar in red/pink
when > 100000
xml.value value, :xid => index, :color => "#ff43a8", :gradient_fill_colors => "#960040,#ff43a8", :description => level
else
xml.value value, :xid => index, :color => "#00C3C6", :gradient_fill_colors => "#009c9d,#00C3C6", :description => level
end
end
end
end
end

分享到：

给will_paginate加上ajax效果 | 如果定制attachment_fu上传文件的路径和文 ...

2007-10-31 19:21
浏览 2815
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论