fusion图标使用手册.docx
《fusion图标使用手册.docx》由会员分享,可在线阅读,更多相关《fusion图标使用手册.docx(14页珍藏版)》请在冰豆网上搜索。
![fusion图标使用手册.docx](https://file1.bdocx.com/fileroot1/2023-5/24/ff478744-946b-43b1-9c68-c7399c656bbf/ff478744-946b-43b1-9c68-c7399c656bbf1.gif)
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