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], :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 -%> 從上面的代碼，我們知道了如何在視圖頁面中渲染圖表：

引入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', :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之後，按照如下步驟生成圖表：

控制器動作負責從數據庫中尋找所需數據。
根據當前數據編寫生成器。
在第一步提到的控制器動作所綁定的視圖中，開發者有兩種方式從生成器中取得XML，一種是直接將數據傳遞給生成器，或者讓生成器從控制器動作中獲取數據。
下一步，使用合理的參數（包括從第三步中得到的XML）調用render_chart函數。
通過一個計時器的講解，你已經學到了如何在Ruby on Rails中使用FusionCharts創建簡單的圖表。而且，只要對這個程序進行簡單的修改，你就能得到一個所有員工的工時圖表。或者，你甚至可以深入下去，繪製出某個特定員工的詳細工時表。當然，你也可以使用Ajax來獲取圖表。諸如此類的改進數不勝數。FusionCharts的下載包中就包含了很多值得深入研究的例子。本文講解的應用程序可以從這裏下載。

關於作者：

本文作者有着六年的IT諮詢從業經驗，並且對大量的Web技術感興趣，包括J2EE棧、Ruby on Rails和PHP。