2010-02-16
SVG技术在商业智能上的应用研究: 一、引 言 商业智能(BI)系统是业务和技术紧密结合的系统,对技术、业务和管理要求都非常高。它从许多来自不同的企业运作系统的数据中提取出有用的数据并进行清理,以保证数据的正确性,然后经过抽取(Extraction)、转换(Tranformation)和装载(Load),即ETL过程,合并到一个企业级的数据仓库里,从而得到企业数据的一个全局视图,在此基础上利用合适的查询和分析工具、数据挖掘工具、OLAP工具等对其进行分析和处理(这时信息变为辅助决策的知识),最后将知识呈现给管理者,为管理者的决策过程提供支持。 商业智能(BI)系统应能够多时段、多角度、多方法地对供应商、顾客和本企业的状况进行深入的剖析,了解供应商和顾客的行为,了解本企业存在的问题,从而对改进企业的经营和改进对顾客的服务提供帮助。商业智能(BI)系统不仅反映原始数据的情况,还应该应用现代数据模型的方法对原始数据进行加工处理,从而更进一步地揭示数据之间的内在联系,实现商业智能化的要求。 而在日新月异的市场竞争体系中、日益发展的企业业务,为了通过提高对市场的实时掌控能力、通过经营计划和经营预算的方式来达成集团公司管控的目的来提升企业的市场竞争力。而传统商业智能系统所拥有的模式和结构将无法满足未来市场发展的需要。因而迫切需要提高BI系统的商业分析能力。而对预算管控的实时分析能力也有更高的要求。 预算管控是一个整合的计划流程框架,它源自于战略性活动和经营性活动两大部分组成的全局性、集成性管理流程。在从战略性活动向经营性活动的转化过程中,战略计划逐步转化为经营计划和经营预算,战略管控也向预算管控迁移。这种程序性的转化意味着,战略计划中的第一年目标要被具体化为当年的经营预算计划,管控开始落地。整个程序并非是单方面的,其中存在大量的回馈通路。预算管控包括两大块内容:经营计划和经营预算。在战略计划的指导下先做出经营计划,在经营计划明朗后做出相应的预算计划。 在互联网发展迅速的今天以及更为迅速的未来,需要在系统中更好的体现出预算管控所能带来的市场价值,需要以更为直观的图型化技术来提供直观的数据分析效果。而在WEB的基础上无法到达实现的效果,进而SVG技术的运用将改变商业智能的整体分析能力和品牌价值。 SVG技术在商业智能上的应用研究: 二、相关概念及SVG简介 (一)相关概念 SVG技术是实现预算管控图形化展示的一门技术语言;预算管控指通过经营计划和经营预算的方式来达成集团公司管控目的的功能模块;商业智能是能够帮助用户对自身业务经营做出正确明智决定的系统工具。 (二)SVG技术 1.SVG概述。SVG(Scalable Vector Grapllics)是一种基于XML的用来描述二维矢量图形和矢量/点阵混合图形的置标语言,是一种全新的矢量图形规范。SVc的绘图可以通过动态和交互式方式进行,在实际操作中,则是以嵌入方式或脚本方式来实现的。SVG不仅提供超链接功能,还定义了丰富的事件。 由于SVG支持脚本语言(Scdpt),可以通过Script编程,访问SVG DOM的元素和属性,即可响应特定的事件,从而提高了SVG的动态和交互性能。SVG实现了图形、图像和文字的有机统一。SVG除了支持HTML中常用的标记,如文本、图像、链接、交互性、CSS的使用、脚本(Script)外,还提供了大量针对图形、图像、动画的特定标记。 2.什么是SVG。SVG是可升级矢量图形(Scalable Vector Graphics)的简称。(1)可升级(Scalable)意味着统一地增加或减少。对图像来说,可升级意味着图像尺寸并不限定固定的大小,对互联网(Web)来说,可升级意味着一个特殊的技术,它能够增加文件数量、用户数量和应用的种类。SVG作为Web上的一个技术之一,可升级含有这两方面的意思。SVG图像可升级到不同的显示的分辨率,例如:相同尺寸的SVG图像,打印输出使用高分辨率,而在屏幕显示时可以使用不同的分辨率。 同一个SVG图像能够以不同的尺寸放到同一页面上,也可以被不同的其它页面所使用。我们可以放大一个SVG图像,来了解其精美的细节信息。SVG是可升级的原因还在于:同一段SVG内容,既可以是独立的图像,也可以被引用到一个页面,也可以嵌入到另外的SVG图像中。因此,一个复杂的SVG图像可以有多部分组成,也可以由多人共同完成。符号、标记、字体能够重复利用图形的某些组成部分,这样可以充分利用HTTP的缓存优势。 矢量图像包含有诸如直线和曲线等几何对象。这相对于以象素保存信息的位图格式的图像(如PNG、JPEG)来说有更大的灵活性。矢量格式图像的最大好处就是,它可以和位图图像集成在一起,也可以把他们和矢量信息结合在一起以产生更加完美的图像。SVG也不例外。由于所有的显示器都是基于点阵的,位图图像和矢量图像的差别就归结为他们是在客户端还是在服务器端进行图像展现处理;SVG能够控制图像展现的过程,不至于出现租糙或带锯齿的图像。 同时,SVG还能够提供客户端的滤镜效果。大多数XML语法描绘的都是文字信息或原始数据,他们不能提供图像的能力,SVG能够提供丰富的、结构化的矢量和矢量与图像混合的图像信息。样式单能够很好地控制文字的外在表现方式,它的灵活性、快速下载和易于维护的特性早已被人们接受,SVG把这种技术扩展到了图像世界中。脚本编程、DOM对象和CSS样式单的组合常被人们称作Dynamic HTML,广泛应用在动画制作、交互性和外在的表现效果中,SVG也可以借助脚本语言进行操纵文档对象。 3.SVG展现的效果。许多web中使用的图像都是依靠图形工具包来创建模糊、阴影、光线等效果的,要在客户端展现这些效果是不可思义的。SVG可以单独地或以组合的方式对滤镜效果进行描述,这些效果可以用在客户端,当SVG图像展现的时候展现这些效果,而图像仍可以以图像的分辨率的进行缩放和显示。 SVG技术在商业智能上的应用研究: 三、SVG技术运用在预算管控中商业智能的价值 SVG技术解决了WEB实现不了的照片不能缩放和滚动,不能交互,不能很好地打印和调整比例的缺点。在预算管控的模块中加入了更加生动、直观的图形化效果。可运用线性、柱状、仪表板、刻度尺、地图实时反映企业业务扩展、资金分配、人员分配、各分公司销售业绩等各种企业信息。有利于企业领导掌控市场形势,调配整个企业资源起到引导的作用。实时监控企业各种信息,达到节省企业资源的目的。提高公司整体规划和动态控制的管理,对公司整体经营活动的一系列量化进行计划安排,提升企业在日趋白热化的市场竞争体系中,占据先机。SVG的动画效果更人性化,在系统品牌的价值提升上也起到了积极的促进作用。 (一)SVG技术分解 1.图形元素。SVG中图形元素(graphics element)是可以用来在目标画布上画出图形的元素,包括定义的标准形状,特别是矩形、圆形、椭圆形、直线、折线和多边形等。 (1)矩形。矩形用元素rect来表达 代码:<rect width=“200”height=“100”fill=“green”/> 含意:绘制宽200像素,高100像素,填充色为绿色的矩形。 (2)圆形。圆形用元素circle来表达 代码:<circler=“50”fill=“blue”/> 含意:绘制半径为50像素,填充色为蓝色的圆形。 (3)线段。线段用元素line来表达 代码:<line x1=“50”y1=“50”x2=“200”y2=“200”stroke=“blue”stroke-width=“10”/> 含意:从点(50,50)到点(200,200)绘制一条蓝色10像素宽的线段。 (4)椭圆。椭圆用元素ellipse来表达 代码:<ellipse rx=“100”ry=“50”stroke=“green”/> 含意:绘制x轴半径为100像素,y轴半径为50像素,边线为绿色的椭圆。 (5)折线。折线用元素polyline来表达 代码:<polyline points=“100,0 93,16 72,26 43,25 13,11 -11,-13 -25,-43 -26,-72 -16,-93 0,-100 16,-93 26,-72 25,-43 11,-13 -13,11 -43,25 -72,26 -93,16 -100,0”8stroke=“green”stroke-width=“1”fill=“none”/> 含意:从点(100,0)开始,经过点(93,16),(72,26),(43,25),(13,11),(-11,-13),(-16,-93),(0,-100),(16,-93),(26,72),(25,-43),(11,43),(-13,11),(-43,25),(-72,26),(-93,16),最后到点(-100,0)绘制一条线宽为1像素的绿色折线。 (6)多边形。多边形用元素polygon来表达 代码:<polygon points=“100,100 150,100 300,200 50,200”fill=“blue”/> 含意:以(100,100)(150,100)(300,200)(50,200)四个点为顶点绘制填充色为蓝色的多边形,该多边形是一个梯形。 (7)路径。路径用元素path来表达 代码:<path d=“m200,200 10,100 1200,0 10,-100 1 -200,0”fill=“green”/> 含意:按动作定义一条填充色为绿色的路径“移动原点到(200,200),向Y方向直线运动100,向X方向直线运动200,向Y的反方向直线运动100,向X的反方向直线运动200”,该路径表达了一个矩形。 2.容器元素。容器元素用于将不同的元素组合起来使用。 <defs>元素作为一个容器元素使用,可以将稍后要使用的元素集合起来。它通常和<use>元素结合使用。 <g>元素作为一个容器对象使用,将相关的图形对象组合起来。在一个大型或复杂的图形中使用<g>元素非常有用。 3.图形引用元素。图形引用元素(graphics referencing element)用对不同文档或元素的引用作为其图形内容的图形元素。 <image>元素用于将其它图像文件包括在一个已定义的矩形中。 <use>元素可以与<defs>这样的元素配合使用,来实例化前面定义但还没有表现的图形对象。 4.文本内容。元素文本内容元素(text content element)是一个可以定义文本串的画在画布上的SVG元素,SVG文本内容元素有:<text>,<tspan>,<tref>,<textPath>和<altGlyph>等。 5.SVG文档片断。SVG文档片断(SVG document fragment)是以<svg>元素开头的XML文档子树。SVG文档片断可以包含独立的SVG文档,或是另一个SVG文档片断。当一个<svg>元素是另一个<svg>元素的子元素,就会有两个SVG文档片断,每个<svg>元素拥有一个片断。以下用<svg>元素来代表SVG文档片断。 与<g>元素相比较,<svg>元素有一些特别有用的属性:(1)可以拥有自己的位置属性。即x和y属性,所有<svg>元素的子元素的位置完全相对于<svg>元素的位置。这样只要改变<svg>元素的x或y就可以让所有子元素同时发生偏移。 (2)可以拥有自己的高宽属性。即width和height属性,所有超出<svg>元素高宽的子元素是不会显示出来的。这样一些拉幕动画就可以实现了。(3)可以拥有显现属性。即display属性,修改该属性可以让所有<svg>元素的子元素一起出现或隐藏。这样整体一起的出现和消失就方便很多。 6.SVG属性动画。SVG动画一般通过更改对象属性值来实现。SVG工作组与W3C组织的SYMM(Synchronized MultiMedia WorkngGroup,同步多媒体工作组)合作推出了SVG动画元素的定义规范。SVG中用于定义动画的元素有5个<animate>,<set>,<animate-Motion>,<animateColor>,<animateTransform>。 其中<animate>元素允许数量属性或样式参数随时问而变化,<set>元素可设定非数量属性或样式参数随时间而变化,<animate-Motion>元素可以沿着指定的路径移动元素以产生动画效果;<animateColor>元素用来设定元素的某些与颜色有关的属性或样式参数随时间而变化;<animateTransform>元素可以控制对可视化元素进行坐标变换时的动画效果。 (1)移动和旋转动画。移动和旋转动画可以用<animateTransform>元素来实现。<animateTransform>元素用于可视化元素的动态坐标变换,其主要属性除通用属性外还有两个attributeName和type,其中attributeName属性值必须指明为“transform”,type属性指明动态坐标变化的类型,其值可以为“translate”(表示平移变换)、“scale”(表示拉伸变换)、“rotate”(表示旋转变换)、“skewX”及“skewY”(表示沿X和Y方向上的歪斜变换)。 (2)拉幕和缩放动画。拉幕和缩放动画都是对图形对象的宽度和高度进行改变而引起的动画效果,可以用<animate>元素来实现,利用如m和to属性来定义图形的起始和终止值。<animate>元素没有其特有的属性。 (3)色彩渐变动画。色彩渐变动画是由对象的填充色彩变化而引起的动画效果,可以用<animateColor>元素来实现。<animateColor>元素也没有其特有的属性,只是在使用from,to,by和values等属性时,其属性值必须是颜色值。 (4)沿路径动画。沿路径动画是指对象沿一定的路径移动,可以用SVG的<animateMotion>元素来实现。除了通用属性外,<animateMotion>元素还具有path、rotate及keyPoints属性,其中path指明动画路径,rotate指明可视化元素在沿着路径运动过程中是否随路径而转动,keyPoints表示各个关键点所在的位置在路径方向上与路径起点间的距离,它和key-Times属性共同决定一系列关键点以精确控制路径动画中时间与运动路程的关系。 (5)顺序与同步动画。同步动画就是多个对象同时进行动作,顺序动画则是根据时间上的先后顺序进行动作。两种动画根据不同的动画类型可以映射为不同的SVG动画元素,最关键的地方在于动画元素中的begin属性值的设定。设置动画顺序通常要将动画元素的id和be百n属性值结合起来,如果第二个对象动画(id=“anim1”)在第一个对象动画(id=“anim2”)结束后2秒才开始,那么可以设置第二个动画的begin属性为“anim1.end+2s”,如果是同步动画则设置为“anim1.begin”。 (二)SVG脚本动画 SVG标准允许将JavaScript脚本代码以两种方式来实现:一个是内嵌脚本方式;另一个是外部脚本方式。 (1)内嵌脚本。<script>元素用于在SVG文档中嵌入一段脚本,它的功能几乎和HTML中的<script>的标记一模一样。脚本语言的程序段不属于合法的xML语句,所以需要使用CDATA的嵌入方式,其一般格式是: <script type=“tex/JavaScript”><![CDATA[ <!—此处插入脚本程序段—> ]]</script> 元素内嵌脚本属性type=“countertype”用MIME的方式指明所用的Script语言的类型。 (2)外部脚本。<script>元素外部脚本属性xlink:href=“/<Uri>”指明一个引用外部脚本文件的URL。因为在SVG引用外部脚本文件时是以utf编码方式引入的,所以我们不能在待引用的脚本文件中使用中文,甚至在注释中使用中文也会使代码运行出现不确定的异常。 从脚本实现的功能上来说,这两种代码加载方式没有区别,我们可以将共享的脚本代码放在外部连接文件中,把SVG文件个性化的代码嵌在自身的文件中。SVG文档可以按照DOM接口,通过脚本语言访问各个元素,因此可以动态改变SVG元素的各种属性,包括动画属性,从而可以实现单纯依靠动画属性而无法完成的更为复杂的动画。更加让人叹为观止的是,SVG文档还支持DOM规范定义的大量的交互事件,如omnouseover、onclick等,而且都可以指派给任何一个SVG元素,从而实现对自身或对其它物件、图像的控制,完成SVG的交互式动画。 (三)SVG分析对比 SVG是一种用于XML中描述二维图形的语言。SVG允许三种图形对象:矢量图形(即由直线和曲线组成的路径)、图像和文字。图形对象可以被群组、样式化、变形及加入到先前提交的对象。 文字可以是适合应用程序的任何XML名称空间,它增强了SVG图形的可搜索性和可存取性。Mobile SVG规范可以实现的众多功能中包含嵌套变形、剪裁路径、透明度遮罩、滤镜效果、模板对象和可扩展性。 SVG与其它图像差异,SVG更是能提供高质量、高清晰的图片,如下图1: 图1 甲骨文作为世界上最古老的文字,没有被包含进现代汉字的编码体系中,所以在网页上显示甲骨文字较为困难。通常的做法是把甲骨文字变成图片插入到网页中。这样傲的缺点有三:一是数据量大;二是显示有问题,插入到网页的图片是通过超链接连接到图片文件的,当链接有问题时,图片就显示不出来;三是不能放大和编辑,因为位图在放大时容易变形失真。SVG很好的解决了这些不足,如图2所示。 <?xml version=“1.0”standalone=“yes”?> <svg width=“400”height=“300”> <title>帝</title> <path style=“fill:#000000;stroke:none”d=“M87.467 30.301 C88.665 29.969 89.229 30.135 89.229 30.551 C89.229 30.135 89.651 29.96990.497 30.301…….L78.94 33.872 L77.953 34.121 z”/> <!——End of RealDRAW generated image,http://www.mediachance.com——> </svg> 图2 SVG的渲染都是在—个矩形区域内发生的,这个有限的矩形区域在SVG中被称为“视口”,超出这个视口的图形将不被显示,所以视口也就是sVG的渲染区域,用户能看到的SVG内容的区域。SVG客户端在解析渲染一个SVG文件前,会根据实际显示设备的参数来确定视口的参数,比如视口的一个像素代表实际显示设备尺寸的多少毫米等。在获取这些有效参数后,SVG客户端就会初始化视口,建立以像素为单位的SVG坐标系统。 SVG的视口尺寸由<SVG>根标签的“width”和“height”两个属性来决定,也就是SVG整个图像在浏览器中显示的大小,使得视口的坐标系统同用户坐标系统相同。如果有若干个<svg>元素嵌套在一起,那么决定初始化视口的是最外层的都个<svg>元素。两种坐标系统的比较,如图3: 图3 SVG技术能实时动态反应各种数据信息,且美观效果和清晰效果是一般位图图形无法比拟的。如图4: 图4 SVG技术在商业智能上的应用研究: 四、结论及展望 通过研究和实验,我们利用SVG技术加强了预算管控在企业上的应用。解决了图形化显示的效果问题,极大的提高预算管控的商业价值。使得商业智能(BI)在使用的过程中更加的人性化、直观化和规范化,给予领导层的决策力提供了更加直观、准确、便捷的图形分析能力,帮助领导层运作这个市场和掌控信息,做到实时调整,实时监控的效果,为企业的战略性活动和经营性活动提供导向。相信SVG技术将会更为广泛的应用于各种系统、行业软件,SVG技术必将是扩充商业智能系统的品牌效应。商业智能系统也必将更为广泛的运用于电信、烟草、税务、以及各种大型的母子型公司,将成为企业发展壮大的中坚系统支柱。
|
信息化软件应用目录 OA 办公自动化系统
CRM 客户关系管理系统
PM 项目管理系统
SCM 供应链管理系统
CC 协同商务系统
BPM 业务流程管理
BI 商务智能
CMS 内容管理系统
KM/KBS 知识管理系统
电子商务系统
HRM 人力资源管理系统
ERP 企业资源计划
EAM 企业资产管理系统
|