`

使用rails制作图表

    博客分类：
  • RoR
RailsXMLjfreechartFlashRuby 
阅读更多

原文出处：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  
分享到：
| 如果定制attachment_fu上传文件的路径和文 ...
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics