[发明专利]一种通过自定义图形组合在SVG中展示数据的方法

说明书

技术领域

本发明属于计算机应用领域，特别提供了一种通过自定义图形组合在SVG中展示数据的方法。

背景技术

目前，可缩放矢量图形SVG（Scalable Vector Graphics）作为一种扩展性较强的图形格式，在互联网、图形、可视化展示等领域的应用越来越广泛。SVG作为一种基于XML开放标准的文本式矢量图形描述语言，支持矩形、圆形、线条、路径等基本几何形状的绘制与组合，以及渐变、滤镜、动画、图层管理、人机交互等高级功能。实际上，SVG与传统图形格式相比，其突出的优势在于支持脚本代码以及DOM（一种处理XML的标准编程接口），因此用户能够按照DOM接口标准访问SVG文档中的各类图形元素，并能够动态改变各元素的属性、添加简单或复杂的动画，或者添加鼠标移入、鼠标移出、鼠标点击等交互事件的响应方法。

随着自动化技术的发展，爆炸性增长的信息量对数据展示方法的要求日益提高，图形化是进行数据展示的最佳思路。SVG优异的自身特性为此提供了无限的可能。然而，目前基于SVG的应用主要利用其矢量化的特点，集中在网络拓扑及空间关系的表达等方面；却忽略了SVG区别于其他图形格式的最大优势，即支持脚本与编程控制，从而很容易在SVG中通过DOM接口函数生成图形组合用以展示数据，并添加交互响应。发明专利200610033862.X利用SVG支持动画的特性，将SVG支持的动画类型进行组合，实现了若干类动画效果库。然而，目前仍未有通过自定义图形组合在SVG中进行数据展示的案例。

发明内容

本发明的目的在于为克服已有技术的不足之处，提供一种通过自定义图形组合在SVG中展示数据的方法，充分利用SVG图形格式的可编程优势，快速开发出形式多样、交互灵活的SVG数据展示界面。

本发明的技术方案如下：

1)将待展示数据按照拟采用的图形化展示形式（包括表格、指示灯、进度条、柱条形图、曲线图）的数据格式进行组织；

2)结合拟采用的图形化展示形式与数据格式，确定所应用的子图形组合，并计算各个子图形的坐标与属性；

3)采用DOM编程接口访问SVG文档，在SVG文档中根据设定的画布左上角坐标与画布大小新建画布；

4)在SVG画布上按照层次关系依次创建子图形组合中所包含的子图形；

5)对SVG画布上的子图形添加鼠标和键盘交互事件响应；

6)将SVG画布的更改应用到SVG文档，刷新界面显示。

上述步骤3)中还可包括在新建的SVG画布上绘制圆角矩形背景与文字标题。

本发明的特点及有益效果如下：

本发明根据拟采用的图形化展示形式，将数据按照类别、时间、数值等要素进行组织整理；通过若干子图形的组合来表现数据，计算这些子图形的坐标与属性；采用DOM编程接口在SVG文档中新建画布，按照层次关系创建这些子图形，并添加设定的交互事件响应，从而得到丰富美观的图形化数据展示界面。

本发明采用DOM编程接口在新建画布上动态绘制自定义的图形组合并添加交互事件，提供了多样化的在SVG中展示数据的图形形式以及统一的SVG自定义图形组合绘制框架。按照本发明所提供的方法，可以在具备DOM接口函数与SVG渲染器的编程语言平台上（如Java、C++）快速开发出表现形式丰富美观、交互方法灵活、可嵌入至B/S或C/S软件系统中的数据图形化展示界面，在本地应用或网络应用中均可实施。该方法所提出的实施步骤可适用于个性化的图形展示需求，扩展性强、开发难度小、开发效率高，具有很强的实用性。

附图说明

图1是本发明的一种通过自定义图形组合在SVG中展示数据的方法的实施例流程框图。

具体实施方式

下面结合附图及实施方式对本发明作进一步详细的说明。应当理解，此处所描述的具体实施方式可用以解释本发明，但并不限定本发明。

本发明基于SVG图形格式，提供了一种将数据转换为自定义的子图形组合，并结合界面控件与自定义交互事件进行展示的方法。

本发明的具体实施例流程如图1所示，包括以下步骤：

1)将待展示数据按照拟采用的图形化展示形式（包括表格、指示灯、进度条、柱条形图、曲线图）的数据格式进行组织；具体方法如下：

使用编程语言从数据库或文件查询或读入待展示的数据，对该数据进行重新组织，组织后的数据应至少包括如下部分：

(1)数据标题，即数据内容的说明文字；