使用rails制作图表

原文出处：http://www.railsontherun.com/2007/10/4/sexy-charts-in-less-than-5-minutes

我们的目标是使用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 代码

1. def population   
2.   @cities = City.find(:all)   
3.   @population_data_link = formatted_population_reports_url(:xml)   
4.   respond_to do |format|   
5.     format.html   
6.     format.xml  { render :action => "population.xml.builder", :layout => false }   
7.   end  
8. end  

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

ruby 代码

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

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

ruby 代码

1. <%= javascript_include_tag 'swfobject' %>  

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

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

population.html.erb

js 代码

1. <div id="population_chart" class='chart'>   
2.   <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>   
3.   <p> To see this page properly, you need to upgrade your Flash Player, please visit the Adobe web site</p>   
4. </div>   
5.   
6. <script type="text/javascript">   
7.   // <![CDATA[       
8.   var so = new SWFObject("/amcolumn/amcolumn.swf", "population_chart", "800", "380", "8", "#000000");   
9.   so.addVariable("path", "/amcolumn/");   
10.   so.addVariable("settings_file", escape("/amcolumn/column_settings.xml"));   
11.   so.addVariable("data_file", escape("<%= @population_data_link %>"));   
12.   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>");   
13.   so.addVariable("preloader_color", "#000000");   
14.   so.write("population_chart");   
15.   // ]]>   
16. </script>  

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

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

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

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

xml 代码

1. xml.instruct! :xml, :version=>"1.0", :encoding=>"UTF-8"   
2. xml.chart do   
3.   # xml.message "You can broadcast any message to chart from data XML file", :bg_color => "#FFFFFF", :text_color => "#000000"   
4.   xml.series do       
5.     @cities.each_with_index do |city, index|   
6.       xml.value city.name, :xid => index   
7.     end   
8.   end   
9.   
10.   xml.graphs do   
11.    #the gid is used in the settings file to set different settings just for this graph   
12.     xml.graph :gid => 'population' do   
13.       @cities.each_with_index do |city, index|   
14.         population = city.population   
15.         case population   
16.           # When the population is > 1 million, show the bar in red/pink   
17.           when > 100000   
18.             xml.value value, :xid => index, :color => "#ff43a8", :gradient_fill_colors => "#960040,#ff43a8", :description => level   
19.           else   
20.             xml.value value, :xid => index, :color => "#00C3C6", :gradient_fill_colors => "#009c9d,#00C3C6", :description => level   
21.           end   
22.       end   
23.     end   
24.   end   
25.   
26. end