fusion图标使用手册.docx

fusion图标使用手册.docx

《fusion图标使用手册.docx》由会员分享，可在线阅读，更多相关《fusion图标使用手册.docx（14页珍藏版）》请在冰豆网上搜索。

fusion图标使用手册

ROR中图标FusionCharts的用法

作者杨海军2011年7月23日

一、安装FusionCharts

1.将FusionCharts文件夹（DownloadPackage>Code>FusionCharts）拷贝到TimeTrackerApplication的public目录下。

2.将DownloadPackage>Code>FusionCharts文件夹中的FusionCharts.js拷贝到public/javascripts文件夹下。

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

4.至此，FusionCharts的安装就已经完成了。

在application_helper.rb中添加包涵Fusion语句

require'fusioncharts_helper'

includeFusionChartsHelper

注意：

在某些fusioncharts_helper文件中没有定义get_FC_color方法。

如果没有就要自己定义。

二、指定一个到图表的链接

列表1

<%=link_to'TimeChart',{:

action=>'view_timesheet_chart',:

id=>employee.id}%>

图1展示的是员工名单页面。

在设置完数据库之后，开发者使用Ruby脚手架框架，可以很容易地实现这个功能。

我们可以访问“http:

//yourserver:

port/employees”来查看此页面。

图1是屏幕部分截图。

图1

点击“TimeChart”链接将会调用employees控制器的view_timesheet_chart动作。

列表2列出了它的代码。

这个动作的作用是展示选中员工的工时表。

它会向Employee模型查询指定员工在“2008-12-01”至“2008-12-07”这段时间的工时表，得到结果之后，渲染“view_timelog_chart.html.erb”文件。

为了简单起见，在本文中，这个时间范围是固定的。

当然，现实世界中，这个时间范围应该是可由员工指定。

三、编写相关方法

3.1编写控制器

列表2

EmployeesController

defview_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.2编写模型

列表3

Employee.rb

def

self.find_with_timesheets_in_date_range（id,start_date,end_date）

conditions="employees.id=?

andlog_datebetween?

and?

"

employee_details_with_timesheets=self.find（:

all,:

include=>'timesheets',:

conditions=>[conditions,id,start_date,end_date],:

order=>'log_dateasc'）

returnemployee_details_with_timesheets

end

最后，这个动作会渲染“view_time_chart.html.erb”文件。

“view_time_chart.html.erb”模板使用的布局模板是“employee.html.erb”，所有employees控制器的视图都会采用这个布局模板。

3.3编写视图文件

列表4

view_timesheet_chart.html.erb（在app/views/employees文件夹中）

<%=javascript_include_tag"FusionCharts"%>

<%

str_xml=render:

file=>"employees/timesheet_data"

render_chart'/FusionCharts/Column3D.swf','',str_xml,'TimeChart',650,400,false,falsedo-%>

<%end-%>

说明：

1．创建图表-3D柱状图，它的数据来自于strXML；

2．render_chart（chart_swf,str_url,str_xml,chart_id,chart_width,chart_height,debug_mode,register_with_js,&block）函数头部

3．Column3D.swf是柱状图，Doughnut3D.swf是圆圈饼形图，详细见文档后面；

4．参数解释：

chart_swf,使用突袭类型的路径（如饼形图Pie3D.swf）tr_url,一般为空。

str_xml,前面定义的从xml获取数据的字符串。

chart_id,图像的编号可以设置为任何的字符串（最好去一个和图像相关的名字；

5．chart_width,图形宽。

chart_height,图形高

6．debug_mode,设置为false。

register_with_js,&block设置为falsedo。

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

1引入FusionCharts.js文件。

2从生成器中获取xml数据.（生成器的数据来源是控制器）

3使用合适的参数调用render_chart函数渲染图表，

通常情况下，图表会以甘特图的形式表示，当然FusionCharts也支持这种形式。

在此，简单起见，我们使用了柱状图。

第二步和XML的生成有关。

FusionCharts使用XML（扩展标记语言）创建和操作图表。

整个FusionCharts图表都是由XML控制。

例如，你可以使用XML定义图表的外观，也可以定义图表的功能。

每种图表都有大量特性可供选择。

FusionCharts也有自己的XML结构。

现在讨论的图表是单系列图表（只有一个数据集），表示员工每周工作的天数和每天工作的时间。

3.4编写xml文件

列表5

单系列图表XML样例

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

生成器是如何生成图表XML的呢？

它会用到控制器动作中的@employee_details_with_timesheets变量来构建出图表XML。

列表6展示的是这个生成器的实现。

列表6

timesheet_data.builder（在app/views/employees文件夹中）

xml=Builder:

:

XmlMarkup.new（:

indent=>0）

options={

:

caption=>'TimeTrackerChart',

:

subcaption=>'ForEmployee'+@employee_details_with_timesheets.name,

:

yAxisName=>'HoursSpent',:

xAxisName=>'Day',

:

showValues=>'1',

:

formatNumberScale=>'0',

:

numberSuffix=>'hrs.'

}

xml.graph（options）do

fortimesheetin@employee_details_with_timesheets.timesheetsdo

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所示，引入

图2

如何生成图表概述：

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

1.控制器动作负责从数据库中寻找所需数据。

2.根据当前数据编写生成器。

3.在第一步提到的控制器动作所绑定的视图中，开发者有两种方式从生成器中取得XML，一种是直接将数据传递给生成器，或者让生成器从控制器动作中获取数据。

4.下一步，使用合理的参数（包括从第三步中得到的XML）调用render_chart函数。

4、图表名字对照表

Bar2D

Doughnut2D

FCF_Area2D

FCF_Column2D

FCF_column3D

FCF_Line/Line

Pie3D

Funnel

Pareto3D

Pareto2D

Pie2D

Pyramid

SSGrid