fusions charts jfreechat 等对比

原文：http://www.infoq.com/cn/articles/sharma-charts-in-rails

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

相关厂商内容
Martin Fowler演讲：21世纪的软件设计

Mary Poppendieck演讲：业务驱动的敏捷实施

8月31日前报名享受8折优惠，5人以上团购享有更多优惠

敏捷技术日之测试驱动开发9月4日北京举行，欢迎报名！

分享卓越软件研发管理实践（珠海 9.18-19）

相关赞助商

2010第五届敏捷中国大会四大主题：业务敏捷、技术实践、组织转型及管理实践，为技术团队搭建开放的交流平台。现在报名，8折优 惠！Powered by ThoughtWorks
优秀的软件能够从数据库中的数据或者报告中快速高效地生成图表。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],rder=>'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 -%> 从上面的代码，我们知道了如何在视图页面中渲染图表：

引入FusionCharts.js文件。
从生成器中获取xml数据.（生成器的数据来源是控制器）
使用合适的参数调用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',AxisName=>'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之后，按照如下步骤生成图表：

控制器动作负责从数据库中寻找所需数据。
根据当前数据编写生成器。
在第一步提到的控制器动作所绑定的视图中，开发者有两种方式从生成器中取得XML，一种是直接将数据传递给生成器，或者让生成器从控制器动作中获取数据。
下一步，使用合理的参数（包括从第三步中得到的XML）调用render_chart函数。
通过一个计时器的讲解，你已经学到了如何在Ruby on Rails中使用FusionCharts创建简单的图表。而且，只要对这个程序进行简单的修改，你就能得到一个所有员工的工时图表。或者，你甚至可以深入下去，绘制出某个特定员工的详细工时表。当然，你也可以使用Ajax来获取图表。诸如此类的改进数不胜数。FusionCharts的下载包中就包含了很多值得深入研究的例子。本文讲解的应用程序可以从这里下载。

关于作者：

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