基于FusionWidgets Gauges开发高职院校人才培养工作状态数据仪表盘

刘耿龙 眭伟芳

摘要：提出使用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所示）。

3实例开发

实例以单机开发为例，使用FusionWidgets Gauges中的AngularGauge仪表盘图表样式输出量化指标中的“生师比”指标值。

前台为HTML+JavaScript脚本语言，后台数据源为XML文件，状态数据量化指标参照教育部相关人才培养工作评估方案确定。

3.1实现原理

HTML作为容器，载入FusionWidgets Gauges的JavaScript脚本，由JavaScript脚本负责读取和解析数据库源XML数据，解析完成后，交给AngularGauge仪表盘输出Flash文件（如图2所示）。

图2单机FusionWidgets Gauges仪表盘实现原理

3.2数据源XML的编写规则

FusionWidgets Gauges采用XML数据库时，XML的编写要严格遵守XML和FusionWidgets Gauges语法规则，否则无法正常输出仪表盘图表。

3.3数据源XML开发

仪表盘主标签chart定义

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">