原文出处: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 代码
- 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">
-
- 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