Rails 中精彩的图表

阅读数:4216 2010 年 6 月 7 日 22:48

当分析完数据库中的数据,需要将结果以某种形式展示给用户的时候,有些 Web 应用程序比较偏好采用报告的形式。不过,图表的优点是能够根据报告,给出直观的视觉展现,并且可以帮助开发者观察趋势以及简化数据的综合分析过程。有很多技术能够帮助开发者构建出这类应用程序,Ruby on Rails 就是其中之一。在本文中,我们将会详细介绍如何使用 Ruby on Rails 创建图表。

优秀的软件能够从数据库中的数据或者报告中快速高效地生成图表。Gruff、JFreeChart、XML/SWF charts 和 FusionCharts 是 Ruby on Rails 上为数不多能满足我们需求的软件。不过你得明白,并不是所有这些软件我们都试用和测试过,所以下面的信息大部分是取自产品文档。

类型 Ruby 类 Java Class 文件 Flash 图表组件 Flash 图表组件 Flash 图表组件
操作系统平台 平台独立 平台独立 平台独立 平台独立 平台独立
是否需要 Adobe Flash 插件 不是 不是
是否可用于高级数据分析 不可以 可以 可以 不可以 可以
是否需要安装软件或者其他插件 需要,需要安装 RMagick,ImageMagick 和 Gruff 需要,JDK 1.3 版或更高 不需要 不需要 不需要
能否生成动态图表 不能
是否支持输出到图片 支持 支持 支持 不支持 支持
UTF8 支持 文档未提及
易用性 易用,但是需要写很多代码 并不易用。对用户较友好 很复杂,太多用于配置图表的 xml 标记 非常易用,开发者和用户都可以轻易上手 非常易用,开发者和用户都可以轻易上手
2D/3D 条形图支持
折线图支持
散点图支持
面状图支持
2D/3D 饼图支持
2D/3D 环状图支持 是,以环形图形式
甘特图支持 是(FusionWidgets v3 的一部分)
混合图支持
仪表图支持 是(XML/SWF 标准的一部分) 是(FusionWidgets v3 的一部分)
实时图支持 是(FusionWidgets v3 的一部分)
数据驱动地图 是(FusionWidgets v3 的一部分)

本文中,我们将会研究如何使用 FusionCharts 和 MySQL 在 Rails 中绘制图表。FusionCharts 是一个基于 Flash 的图表生成组件,它能够帮助开发者创建可交互的动态图表。同样,它也可以和任何一种 Web 脚本语言绑定,以最少的代码绘制出优秀的图表。不仅如此,FusionCharts 甚至可以封装成模块并在 RoR 中使用。易于使用、多种图表类型支持、优秀的文档以及良好的支持是本文我们介绍 FusionCharts 的原因。

这篇文章以一个应用程序为例,描述了在 RoR 下 FusionCharts 生成图表的机制。这个应用完整运行所需要的软件有:

•   FusionCharts 免费版 / v3:

FusionCharts 免费版可以从 www.fusioncharts.com/free 下载。而功能更全面的商业版可以从 www.fusioncharts.com 上下载。在本文中,我们使用的是免费版。

FusionCharts 的安装需要将安装包中的 SWF 和.rb 文件拷贝到合适的位置。.rb 文件是在 Download Package > Code > RoR > Libraries 目录下。

•   Ruby 1.8.6 或更高版本:

下载地址是 http://www.rubyonrails.org/down

•  Rails gem 2.0.2 或更高版本:

在 RubyGems 加载之后,如果要完整安装 Rails 以及其依赖包,你可以输入如下命令:

   gem install rails

Rails 也可以从此页面下载。

•   MySQL 4.0 或者更高版本:

MySQL 可以从此处下载。

这里我们以一个计时器为例。这个程序是为员工设计的,员工需要填写每周的上班时间,并且可以查看自己的工时表。本文将会从两个部分来讨论这个应用程序。第一个部分将处理开发上的问题,包括列举、编辑、展示和删除雇员以及工时表。如果你已经有一个需要集成图表的应用程序,你可以跳过这部分,然后直接进入下一个部分,下个部分将会阐述如何将图表和应用程序集成在一起。本文假设读者有基本的 Ruby on Rails 的知识。

创建基本的计时器程序

在脚手架框架(scaffolding framework)的帮助下,一些基本功能,例如列举、编辑、展示和删除雇员以及时间表,可以很简单地生成出来。生成基本的员工和时间表控制器的命令如下:(运行第一个命令后,在创建的 TimeTrackerApplication 目录下运行后面两个命令)

rails –d mysql TimeTrackerApplication
ruby script/generate scaffold Employee name:text
ruby script/generate scaffold Timesheet log_date:datetime hours_spent:integer employee_id:integer

下一步,你需要修改 config 文件夹里面的 database.yml,让其指向“timetrackerdb”,并且配置好用户名和密码。运行如下命令创建数据库:

rake db:create
rake db:migrate

在 mysql 中运行如下命令,创建 employees 和 timetables 表的外键。

alter table timesheets add constraint fk_employee_id foreign key fk_employee_id(employee_id) references employees(id) on delete cascade 

当然,创建外键的方法有多种;不过如果要深入下去,那么就超出了本文的讨论范围。你需要在模型之间创建关联才能够在 Ruby on Rails 中表示外键。

在 Employee 模型中,在类声明语句后,加入如下语句:

has_many :timesheets 

而在 Timesheet 模型你需要加入:

belongs_to :employee 

运行 sql 脚本 db/sampledata.sql 将样例数据插入到数据库中。至此,基本的程序和数据已经就绪,你可以增加、查看、编辑和删除雇员。

在应用程序中集成图表

当程序就绪之后,下面我将介绍如何生成一名员工的工作时间图表:

•   将 FusionCharts 文件夹(Download Package > Code > FusionCharts)拷贝到 TimeTrackerApplication 的public目录下。

•   将Download Package > Code > FusionCharts 文件夹中的FusionCharts.js 拷贝到public/javascripts文件夹下。

•   将Download Package > Code > RoR > Libraries文件夹中的 fusioncharts_helper.rb 拷贝到 TimeTrackerApplication 的lib目录下。

至此,FusionCharts 的安装就已经完成了。

员工名单页中需要一个指向 Time Tracker Chart 的链接。这样,每个雇员都可以查看自己的工时图表。链接是在 app/views/employees/index.html.erb 文件中创建。列表 1 详细描述了链接创建的方法。这段代码是把这个链接加到此页面的其他链接之后。

列表 1

 <td><%= link_to 'Time Chart', {:action=>'view_timesheet_chart',:id=>employee.id} %></td>

图 1 展示的是员工名单页面。在设置完数据库之后,开发者使用 Ruby 脚手架框架,可以很容易地实现这个功能。我们可以访问“http://yourserver:port/employees”来查看此页面。图 1 是屏幕部分截图。

图 1

点击“Time Chart”链接将会调用 employees 控制器的 view_timesheet_chart 动作。列表 2 列出了它的代码。这个动作的作用是展示选中员工的工时表。它会向 Employee 模型查询指定员工在“2008-12-01”至“2008-12-07”这段时间的工时表,得到结果之后,渲染“view_timelog_chart.html.erb”文件。为了简单起见,在本文中,这个时间范围是固定的。当然,现实世界中,这个时间范围应该是可由员工指定。

列表 2

EmployeesController

def view_timesheet_chart    
   start_date= "2008-12-01"    
   end_date="2008-12-07"    
   @employee_id = params[:id]    
   employee_details_with_timesheets =  Employee.find_with_timesheets_in_date_range(@employee_id,start_date,end_date)
   if(!employee_details_with_timesheets.nil?)        
      @employee_details_with_timesheets =employee_details_with_timesheets[0]    
   else      
      @employee_details_with_timesheets =nil;    
   end    
   headers["content-type"]="text/html"

end

这个动作以员工 id 为参数,它向 Employee 模型查询指定员工在特定时间范围内的工时表。我们将在 Employee 模型中加入如列表 3 所示的函数:

列表 3

Employee.rb

def self.find_with_timesheets_in_date_range(id, start_date, end_date)    
   conditions="employees.id =? and log_date between ? and ?"    
   employee_details_with_timesheets=self.find(:all, :include=>'timesheets', :conditions=> [conditions,id,start_date,end_date], :order=>'log_date asc')    
   return employee_details_with_timesheets
end

最后,这个动作会渲染“view_time_chart.html.erb”文件。“view_time_chart.html.erb”模板使用的布局模板是“employee.html.erb”,所有 employees 控制器的视图都会采用这个布局模板。

列表 4

view_timesheet_chart.html.erb (在 app/views/employees 文件夹中)

<%= javascript_include_tag "FusionCharts"%>

<%
#xml 文件内容以字符串的形式从模板生成器中得到 
str_xml = render "employees/timesheet_data"
#创建图表 - 3D 柱状图,它的数据来自于 strXML
render_chart '/FusionCharts/Column3D.swf' , '' , str_xml , 'TimeChart' ,  650 ,  400 ,  false ,  false do -%>
<%  end -%> 

从上面的代码,我们知道了如何在视图页面中渲染图表:

  1. 引入 FusionCharts.js 文件。
  2. 从生成器中获取 xml 数据.(生成器的数据来源是控制器)
  3. 使用合适的参数调用render_chart函数渲染图表,

通常情况下,图表会以甘特图的形式表示,当然 FusionCharts 也支持这种形式。在此,简单起见,我们使用了柱状图。

第二步和 XML 的生成有关。FusionCharts 使用 XML(扩展标记语言)创建和操作图表。整个 FusionCharts 图表都是由 XML 控制。例如,你可以使用 XML 定义图表的外观,也可以定义图表的功能。每种图表都有大量特性可供选择。FusionCharts 也有自己的 XML 结构。现在讨论的图表是单系列图表(只有一个数据集),表示员工每周工作的天数和每天工作的时间。列表 5 是这个图表可以使用的一个 XML 例子。

列表 5

单系列图表 XML 样例

<graph xAxisName="Day" showValues="1" caption="Time Tracker Chart" numberSuffix=" hrs." subcaption="For Employee John Wilson" yAxisName="Hours Spent">    
   <set name="Monday" value="8" color="AFD8F8"/>   
   <set name="Tuesday" value="6" color="F6BD0F"/>    
   <set name="Wednesday" value="5" color="8BBA00"/>    
   <set name="Thursday" value="9" color="A66EDD"/>   
   <set name="Friday" value="9" color="F984A1"/>    
   <set name="Saturday" value="8" color="CCCC00"/>

</graph>

要用现有的数据生成和列表 5 类似的 xml 文件,那么就需要用到生成器。

生成器是如何生成图表 XML 的呢?它会用到控制器动作中的 @employee_details_with_timesheets变量来构建出图表 XML。列表 6 展示的是这个生成器的实现。

列表 6

timesheet_data.builder (在 app/views/employees 文件夹中)

xml = Builder::XmlMarkup.new(:indent=>0)
options = {
   :caption=>'Time Tracker Chart',
   :subcaption=>'For Employee '+ @employee_details_with_timesheets.name   ,
   :yAxisName=>'Hours Spent', :xAxisName=>'Day', 
   :showValues=>'1', 
   :formatNumberScale=>'0', 
   :numberSuffix=>' hrs.'
}
xml.graph(options) do  
   for timesheet in @employee_details_with_timesheets.timesheets do    
      log_day = timesheet.log_date.strftime('%a')     
      xml.set(
         :name=>log_day,
         :value=>timesheet.hours_spent,
         :color=>''+get_FC_color)  
   end
end

在生成器中,你首先要创建一个 XMLMarkup 对象,将其“indent”属性赋值为 0,然后可以开始使用这个对象来构建 XML 了。

配置图表的所有选项都被放到了一个名为 options 的散列表中。如果希望了解更多 options 的信息,可以参考完整的 FusionCharts 文档。XML 文件的 root 元素是“graph”,其子节点是“set”,一个“set”节点表示一个特定员工的工时表。每一个“set”元素都有 name 和 value 属性。name 字段表示一周的第几天,而 value 字段表示的是在这一天中,当前员工的工作小时数。生成器使用控制器动作中的@employee_details_with_timesheets变量来存储这些值。

最后,在视图页中,render_chart 函数将会渲染出图表。这个函数的参数是 swf 图表名称、url、width、height、debugMode 和 registerWithJS。它可以在 lib 文件夹的 fusioncharts_helper 模块中找到。正如列表 7 所示,引入 application_helper.rb 之后,就可以在所有的视图中使用这个函数。

列表 7

application_helper.rb

require 'fusioncharts_helper'include FusionChartsHelper 

展示图表的 swf 文件在 public/FusionCharts 文件夹中。这里我们已经使用了 Column3D.swf 这个文件名,但是也可以生成任意名字的其他任何单系列的图表。而且,数据不仅仅可以从 dataXML 方法得到,也可以从 dataURL 中获取。这种用法在 FusionCharts 的文档中有举例。

现在,在员工列表页面中点击一个员工的“Time Chart”链接,从 01/12/2008 到 07/12/2008 这一周的工作时间将会以图表的形式展现出来。就像图 2 一样。

图 2

如何生成图表概述:

设置完 FusionCharts,并且引入了 application_helper.rb 中的 FusionChartsHelper 之后,按照如下步骤生成图表:

  1. 控制器动作负责从数据库中寻找所需数据。
  2. 根据当前数据编写生成器。
  3. 在第一步提到的控制器动作所绑定的视图中,开发者有两种方式从生成器中取得 XML,一种是直接将数据传递给生成器,或者让生成器从控制器动作中获取数据。
  4. 下一步,使用合理的参数(包括从第三步中得到的 XML)调用 render_chart 函数。

通过一个计时器的讲解,你已经学到了如何在 Ruby on Rails 中使用 FusionCharts 创建简单的图表。而且,只要对这个程序进行简单的修改,你就能得到一个所有员工的工时图表。或者,你甚至可以深入下去,绘制出某个特定员工的详细工时表。当然,你也可以使用 Ajax 来获取图表。诸如此类的改进数不胜数。FusionCharts 的下载包中就包含了很多值得深入研究的例子。本文讲解的应用程序可以从这里下载。

关于作者:

本文作者有着六年的 IT 咨询从业经验,并且对大量的 Web 技术感兴趣,包括 J2EE 栈、Ruby on Rails 和 PHP。

查看英文原文 Amazing Charts In Rails


感谢李明对本文的审校。

给 InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家加入到 InfoQ 中文站用户讨论组中与我们的编辑和其他读者朋友交流。

收藏

评论

微博

用户头像
发表评论

注册/登录 InfoQ 发表评论