论文部分内容阅读
摘要：提出使用FusionWidgets Gauges仪表盘套件展示高职院校人才培养工作状态数据量化指标的仪表盘方法，给出了实现原理，文末给出实现实例。
关键词：FusionWidgets Gauges；仪表盘；状态数据；XML；HTML
中图分类号：G632文献标识码：A文章编号：1009-3044(2012)07-2750-03
Gauge Panel Development of Construction about Status Data of Talent Cultivation in Higher Vocational Colleges Based on Fu sionWidgets Gauges
LIU Geng-long, SUI Wei-fang
（Xuzhou College of Industrial Technology, Xuzhou 221140, China）
Abstract: Proposed use FusionWidgets Gauges dashboard kit display the quantitative indicators of construction about status data of talent cultivation in higher vocational colleges,and realization of the principle is given,and an example is given finally.
Key words: FusionWidgets Gauges; gauge panel; status data; XML; HTML
高职院校人才培养工作状态数据采集工作（以下简称状态数据）是教育部主管，各高职院校负责本院校具体数据采集的学年度专项工作。采集的数据经分析后产生特定和具体的量化指标，其量化指标，高职院校人才培养工作评估有着重要的参考价值，也是高职院校各个项目建设与管理过程的重要参考依据之一。
对状态数据量化指标的分析，通常划分出“不合格-合格-优秀”或“红-黄-绿线”数据区。对量化指标的展示形式，采用仪表盘功能最为适合。在实际的开发和发布过程中，考虑到单点开发，多点运行的效率比，Web页面成为首选。
1 FusionWidgets Gauges仪表盘简介
FusionWidgets是FusionCharts公司推出的基于HTML-Flash的图表套件，其包含的Gauges组件提供了功能丰富、多样化的仪表盘图表功能，支持HTML脚本和各种流行Web开发语言，其图表的展示技术在全球Web图表界享有盛誉。
2 FusionWidgets Gauges仪表盘工作原理
FusionWidgets Gauges仪表盘支持单机和B/S（浏览器-服务器）模式开发。单机模式开发时，仪表盘数据源以XML文件存储，B/S模式开发时，数据源支持流行的后台数据库管理系统，如Access、SQL Server、Oracle等。FusionWidgets Gauges通过读取数据源-数据解析-Flash图表呈现展示实际仪表盘图表（如图1所示）。
图2单机FusionWidgets Gauges仪表盘实现原理
3.2数据源XML的编写规则
FusionWidgets Gauges采用XML数据库时，XML的编写要严格遵守XML和FusionWidgets Gauges语法规则，否则无法正常输出仪表盘图表。
3.3数据源XML开发
Color=’FFFFDD’ chartTopMargin=’25’ chartBottomMargin=’25’ chartLeftMargin=’25’ chartRightMargin=’25’ toolTipBgColor=’80A905’ gaugeFillMix=’{dark-10},FFFFFF,{dark-10}’ gaugeFillRatio=’3’ baseFont=’宋体’ baseFontSize=’15’ showTickMarks=’1’ showTickValues=’ 1’ showValue=’1’ valueBelowPivot=’1’ showPrintMenuItem=’1’ showAboutMenuItem=’1’ gaugeOriginX=’275’ gaugeOriginY=’300’ gauge? StartAngle=’165’ gaugeEndAngle=’15’ gaugeOuterRadius=’220’>
＜!--仪表盘各量化指标数据段标签colorRange定义--＞
＜colorRange＞
＜!--量化指标中的“红线”数据区--＞
＜color minValue=’23’ maxValue=’40’ code=’0BBA00’/＞
＜!--量化指标中的“黄线”数据区--＞
＜color minValue=’19’ maxValue=’22’ code=’FFFF00’/＞
＜!--量化指标中的“绿线”数据区--＞
＜color minValue=’0’ maxValue=’18’ code=’FF654F’/＞
＜/colorRange＞
＜!--仪表盘指针标签dials定义--＞
＜dials＞
＜dial value=’12’ showValue=’0’ rearExtension=’10’ valueX=’230’ valueY=’300’ borderColor=’000080’ borderThickness=’1’ /＞
＜/dials＞
＜!--仪表盘附注区域标签annotations定义--＞
＜annotations＞
＜annotationGroup id=’Grp1’ showBelow=’1’ ＞
＜annotation type=’rectangle’ x=’5’ y=’5’ toX=’550’ toY=’350’ radius=’10’ color=’009999,333333’ showBorder=’0’ /＞
＜/annotationGroup＞
＜/annotations＞
＜!--仪表盘样式标签styles定义--＞
＜styles＞
＜definition＞
＜style name=’RectShadow’ type=’shadow’ strength=’3’/＞
＜/definition＞
＜application＞
＜apply toObject=’Grp1’ styles=’RectShadow’ /＞
＜/application＞
＜/styles＞
＜!--当前状态数据量化指标值（理论值）标签trendpoints定义--＞
＜trendpoints＞
＜point startValue=’17’ displayValue=’理论值’ color=’555555’ thickness=’2’ alpha=’100’ /＞
＜/trendpoints＞
＜/chart＞
3.4 HTM文档开发
＜html＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=GB2312"＞
＜title＞XXX学校2011状态数据仪表盘·生师比指标＜/title＞
＜!--调用外部FusionWidgets Gauges专用JavaScript脚本读取和解析XML数据--＞
＜script language="JavaScript" src="JSClass/FusionCharts.js"> ＜/head＞
＜body bgcolor="#ffffff"＞
＜table width=’98%’ align=’center’ cellpadding=’2’ cellspacing=’0’＞
＜tr＞
＜!--仪表盘标题--＞
＜td align="center" class="textBold"＞XXX学校2011状态数据仪表盘·生师比指标＜/td＞
＜/tr＞
＜tr＞
＜td align="center"＞
＜!--仪表盘对象定义为ChartDiv1 --＞
＜div id="ChartDiv1" align="center"＞生师比指标＜/div＞
＜!--将XML数据解析后交给FusionWidgets Gauges的AngularGauge仪表盘输出Flash --＞
＜script type="text/javascript"＞
var myChart = new FusionCharts("Charts/AngularGauge.swf", "生师比", "550", "400", "0", "0");
＜!-- ShengShiBi.xml为XML数据库文件--＞
myChart.setDataURL("ShengShiBi.xml");
＜!--用render方法输出Flash --＞
myChart.render("ChartDiv1");
＜/script＞
＜/td＞
＜/tr＞
＜/table＞
＜/body＞
＜/html＞
3.5实例运行结果
实例在Windows XP SP3，IE 8.0，FusionWidgets Gauges 3.0环境下调试通过，运行结果如图3所示。
4结束语
FusionWidgets Gauges作为专业的图表套件，其灵活、轻量、多样式的图表特性对于高职院校直观地展示人才培养工作状态数据量化指标具有较大的优势，对于同类型的开发需求也具有一定的借鉴作用。
参考文献：
[1]刘耿龙,眭伟芳.C/S模式下FusionCharts图表设计与实现[J].电脑知识与技术,2010 (5).
[2]游娟,周艳兵,王纪华,等.基于FushionCharts与ArcIMS的统计制图与应用分析[J].地球信息科学学报,2010(2).
[3]杨凯.利用FusionCharts组件制作动态Web统计图表[J].微电脑世界,2009(7).
[4] W3C.ORG.Extensible Markup Language (XML) 1.0 (Second Edition) [EB/OL].(2000-08-14).http://www.w3.org/TR/2000/WD-xml-2e-20000814.
[5]杨应崧.高职高专院校人才培养工作水平评估实践回顾与思考[J].中国职业技术教育,2006(16).
[6]郭金宇.高职院校人才培养工作状态数据采集平台建设与规范管理探析[J].长沙通信职业技术学院,2011(4).
[7]教育部.关于印发高等职业院校人才培养工作评估方案的通知,(教高[2008]5号)[Z].
关键词：FusionWidgets Gauges；仪表盘；状态数据；XML；HTML
中图分类号：G632文献标识码：A文章编号：1009-3044(2012)07-2750-03
Gauge Panel Development of Construction about Status Data of Talent Cultivation in Higher Vocational Colleges Based on Fu sionWidgets Gauges
LIU Geng-long, SUI Wei-fang
（Xuzhou College of Industrial Technology, Xuzhou 221140, China）
Abstract: Proposed use FusionWidgets Gauges dashboard kit display the quantitative indicators of construction about status data of talent cultivation in higher vocational colleges,and realization of the principle is given,and an example is given finally.
Key words: FusionWidgets Gauges; gauge panel; status data; XML; HTML
高职院校人才培养工作状态数据采集工作（以下简称状态数据）是教育部主管，各高职院校负责本院校具体数据采集的学年度专项工作。采集的数据经分析后产生特定和具体的量化指标，其量化指标，高职院校人才培养工作评估有着重要的参考价值，也是高职院校各个项目建设与管理过程的重要参考依据之一。
对状态数据量化指标的分析，通常划分出“不合格-合格-优秀”或“红-黄-绿线”数据区。对量化指标的展示形式，采用仪表盘功能最为适合。在实际的开发和发布过程中，考虑到单点开发，多点运行的效率比，Web页面成为首选。
1 FusionWidgets Gauges仪表盘简介
FusionWidgets是FusionCharts公司推出的基于HTML-Flash的图表套件，其包含的Gauges组件提供了功能丰富、多样化的仪表盘图表功能，支持HTML脚本和各种流行Web开发语言，其图表的展示技术在全球Web图表界享有盛誉。
2 FusionWidgets Gauges仪表盘工作原理
FusionWidgets Gauges仪表盘支持单机和B/S（浏览器-服务器）模式开发。单机模式开发时，仪表盘数据源以XML文件存储，B/S模式开发时，数据源支持流行的后台数据库管理系统，如Access、SQL Server、Oracle等。FusionWidgets Gauges通过读取数据源-数据解析-Flash图表呈现展示实际仪表盘图表（如图1所示）。
图2单机FusionWidgets Gauges仪表盘实现原理
3.2数据源XML的编写规则
FusionWidgets Gauges采用XML数据库时，XML的编写要严格遵守XML和FusionWidgets Gauges语法规则，否则无法正常输出仪表盘图表。
3.3数据源XML开发
＜!--仪表盘各量化指标数据段标签colorRange定义--＞
＜colorRange＞
＜!--量化指标中的“红线”数据区--＞
＜color minValue=’23’ maxValue=’40’ code=’0BBA00’/＞
＜!--量化指标中的“黄线”数据区--＞
＜color minValue=’19’ maxValue=’22’ code=’FFFF00’/＞
＜!--量化指标中的“绿线”数据区--＞
＜color minValue=’0’ maxValue=’18’ code=’FF654F’/＞
＜/colorRange＞
＜!--仪表盘指针标签dials定义--＞
＜dials＞
＜dial value=’12’ showValue=’0’ rearExtension=’10’ valueX=’230’ valueY=’300’ borderColor=’000080’ borderThickness=’1’ /＞
＜/dials＞
＜!--仪表盘附注区域标签annotations定义--＞
＜annotations＞
＜annotationGroup id=’Grp1’ showBelow=’1’ ＞
＜annotation type=’rectangle’ x=’5’ y=’5’ toX=’550’ toY=’350’ radius=’10’ color=’009999,333333’ showBorder=’0’ /＞
＜/annotationGroup＞
＜/annotations＞
＜!--仪表盘样式标签styles定义--＞
＜styles＞
＜definition＞
＜style name=’RectShadow’ type=’shadow’ strength=’3’/＞
＜/definition＞
＜application＞
＜apply toObject=’Grp1’ styles=’RectShadow’ /＞
＜/application＞
＜/styles＞
＜!--当前状态数据量化指标值（理论值）标签trendpoints定义--＞
＜trendpoints＞
＜point startValue=’17’ displayValue=’理论值’ color=’555555’ thickness=’2’ alpha=’100’ /＞
＜/trendpoints＞
＜/chart＞
3.4 HTM文档开发
＜html＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=GB2312"＞
＜title＞XXX学校2011状态数据仪表盘·生师比指标＜/title＞
＜!--调用外部FusionWidgets Gauges专用JavaScript脚本读取和解析XML数据--＞
＜script language="JavaScript" src="JSClass/FusionCharts.js"> ＜/head＞
＜body bgcolor="#ffffff"＞
＜table width=’98%’ align=’center’ cellpadding=’2’ cellspacing=’0’＞
＜tr＞
＜!--仪表盘标题--＞
＜td align="center" class="textBold"＞XXX学校2011状态数据仪表盘·生师比指标＜/td＞
＜/tr＞
＜tr＞
＜td align="center"＞
＜!--仪表盘对象定义为ChartDiv1 --＞
＜div id="ChartDiv1" align="center"＞生师比指标＜/div＞
＜!--将XML数据解析后交给FusionWidgets Gauges的AngularGauge仪表盘输出Flash --＞
＜script type="text/javascript"＞
var myChart = new FusionCharts("Charts/AngularGauge.swf", "生师比", "550", "400", "0", "0");
＜!-- ShengShiBi.xml为XML数据库文件--＞
myChart.setDataURL("ShengShiBi.xml");
＜!--用render方法输出Flash --＞
myChart.render("ChartDiv1");
＜/script＞
＜/td＞
＜/tr＞
＜/table＞
＜/body＞
＜/html＞
3.5实例运行结果
实例在Windows XP SP3，IE 8.0，FusionWidgets Gauges 3.0环境下调试通过，运行结果如图3所示。
4结束语
FusionWidgets Gauges作为专业的图表套件，其灵活、轻量、多样式的图表特性对于高职院校直观地展示人才培养工作状态数据量化指标具有较大的优势，对于同类型的开发需求也具有一定的借鉴作用。
参考文献：
[1]刘耿龙,眭伟芳.C/S模式下FusionCharts图表设计与实现[J].电脑知识与技术,2010 (5).
[2]游娟,周艳兵,王纪华,等.基于FushionCharts与ArcIMS的统计制图与应用分析[J].地球信息科学学报,2010(2).
[3]杨凯.利用FusionCharts组件制作动态Web统计图表[J].微电脑世界,2009(7).
[4] W3C.ORG.Extensible Markup Language (XML) 1.0 (Second Edition) [EB/OL].(2000-08-14).http://www.w3.org/TR/2000/WD-xml-2e-20000814.
[5]杨应崧.高职高专院校人才培养工作水平评估实践回顾与思考[J].中国职业技术教育,2006(16).
[6]郭金宇.高职院校人才培养工作状态数据采集平台建设与规范管理探析[J].长沙通信职业技术学院,2011(4).
[7]教育部.关于印发高等职业院校人才培养工作评估方案的通知,(教高[2008]5号)[Z].