BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

Rails中精彩的图表

| 作者 Srividya Sharma 关注 0 他的粉丝 ,译者 杨晨 关注 0 他的粉丝 发布于 2010年6月9日. 估计阅读时间: 24 分钟 | GMTC大前端的下一站,PWA、Web框架、Node等最新最热的大前端话题邀你一起共同探讨。

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

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

  Gruff JFreeChart XML/SWF FusionCharts免费版 FusionCharts v3 (商业版)
类型 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账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

fusion chart的广告? by xu huisheng

fusion chart的广告?fusion chart不是flash图表吗?和rails有啥关系?看标题还以为是rails上出了报表框架呢。

Cavas的一些图表不错 by Colder Xihk

看过最近关于HTML5只使用Cavas产生的图表
表现力真的不错
还支持简单的交互

open flash chart 2也很不错 by l liang

完全基于flash + json 几乎包含了所有主流平台语言的 调用api

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

3 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT