CN103019682B - 一种通过自定义图形组合在svg中展示数据的方法 - Google Patents

Abstract

本发明涉及一种通过自定义图形组合在SVG中展示数据的方法，属于计算机应用领域。该方法包括：将待展示数据按照拟采用的图形化展示形式的数据格式进行组织；结合拟采用的图形化展示形式与数据格式，确定所应用的子图形组合，并计算各个子图形的坐标与属性；采用DOM编程接口访问SVG文档，在SVG文档中根据设定的画布左上角坐标与画布大小新建画布；在新建的SVG画布上绘制圆角矩形背景、文字标题（可选）；在SVG画布上按照层次关系依次创建子图形组合中包含的子图形；对SVG画布上的子图形添加鼠标和键盘交互事件响应；将SVG画布的更改应用到SVG文档，刷新界面显示。本发明可适用于个性化的图形展示需求，扩展性强、开发难度小、开发效率高，具有很强的实用性。

Description

一种通过自定义图形组合在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)数据标题，即数据内容的说明文字；

(2)进行数据展示的SVG画布的左上角坐标与大小；

(3)按类别、数值或者时间要素区分的数据集；

其中第(3)部分与拟采用的图形化展示形式相关，分别为：表格所规定的格式为二维数据；指示灯所规定的格式为一组布尔型数据；进度条所规定的格式为一组浮点型数据；X轴为类别轴、Y轴为数值轴的柱条形图、曲线图所规定的格式为一组类别说明及对应的整型或浮点数值；X轴为时间轴、Y轴为数值轴的柱条形图、曲线图所规定的格式为一组时间序列及对应的整型或浮点数值；

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

本发明提供了表格、指示灯、进度条、柱条形图、曲线图共五种图形化展示形式，并且可以在本发明所提及的实施框架下进行扩展；各种图形化展示形式用以表现输入数据的自定义子图形组合不同，具体如下：

(1)表格所应用的子图形组合是若干个矩形（表格中每个单元格对应一个矩形）；

(2)指示灯所应用的子图形组合是若干个圆形（每个指示灯对应一个圆形）；

(3)进度条所应用的子图形组合是两个叠加的圆角矩形；

(4)柱条形图所应用的子图形组合是直线（坐标轴）和圆角矩形（每一个柱形或条形对应一个圆角矩形）；

(5)曲线图所应用的子图形组合是是直线（坐标轴）和路径（每一条曲线对应一条路径）；

根据步骤1)中得到的待展示数据，计算子图形组合中各个子图形（矩形、圆形、圆角矩形、直线、路径）的坐标与属性，包括如下内容：

(1)矩形的左上角坐标及宽高；

(2)圆形的圆心坐标及半径；

(3)直线的起点坐标、终点坐标；

(4)路径的各个折点坐标。

此步骤需实现计算坐标与属性的initParameters函数，Java示例代码如下：

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

根据步骤1)中得到的画布左上角坐标与大小，采用DOM编程接口在SVG文档中动态新建一块空白画布，即调用DOM函数新建一个g元素，其id由程序生成并确保唯一。

此步骤需实现新建画布的initComponentGroup函数，Java示例代码如下：

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

若设定背景可见，则在所新建的画布上绘制圆角矩形、填充背景色；若设定文字标题可见，则在圆角矩形内绘制文字标题；

需实现绘制背景的paintBackground与绘制文字标题的paintTitle函数，Java示例代码如下：

4)在SVG画布上按照层次关系依次创建子图形组合中所包含的子图形；具体方法如下：

根据步骤2)中计算得到的各子图形关键坐标与属性，以及子图形的组合关系，创建各个子图形并将其添加到步骤3)中新建的SVG画布当中，即实现绘制各个子图形的paintContent函数；由于各种图形化展示形式的表现方式不同，因此绘制子图形的具体方法也不同，具体如下：

(1)表格：在SVG画布上逐行、逐列地绘制各个单元格，然后逐行、逐列地在各个单元格上绘制文字内容；

(2)指示灯：在SVG画布上直接绘制一个圆形，并设置填充色；

(3)进度条：在SVG画布上先绘制较长的圆角矩形，再根据进度条的百分比数值绘制较短的圆角矩形；

(4)柱条形图：在SVG画布上绘制横轴（X轴）直线、纵轴（Y轴）直线，然后逐个绘制数据集中的数值点所对应的矩形；

(5)曲线图：在SVG画布上绘制横轴（X轴）直线、纵轴（Y轴）直线，然后新建一条路径，并依据数据集中的各个数值点设定其折点坐标；

其中曲线图绘制曲线内容的paintChart函数Java示例代码如下：

5)对SVG画布上的子图形添加鼠标和键盘交互事件响应；具体方法如下：

对当前SVG画布上的各个子图形均可添加交互事件响应，可用的事件为鼠标按下（onmousedown）、释放（onmouseup）、单击（onclick）、悬停（onmouseover）、经过（onmousemove）、移出（onmouseout），以及键盘按下（onkeydown）、释放（onkeyup）、按下并释放（onkeypress）；例如，鼠标移入主体几何图形时显示提示文字（ToolTip），鼠标点击背景图形时关闭整个SVG画布；可以按照数据展示的具体交互要求，对各个子图形添加恰当的交互事件响应；

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

在SVG画布上将各图形元素绘制完毕后，最终通知SVG渲染器刷新界面显示，可选择是否添加淡入动画使得画布展现效果更为平滑；

此步骤实现的刷新界面显示displayComponentGroup函数Java示例代码如下：

至此，通过自定义图形组合在SVG中展示数据的步骤全部进行完毕。

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

显然，该方法所提出的实施步骤可适用于个性化的图形展示需求，可扩展性强、开发难度小、开发效率高，具有很强的实用性。因此，以上实施步骤仅用以说明而非限制本发明的技术方案。不脱离本发明精神和范围的任何修改或局部替换，均应涵盖在本发明的权利要求范围当中。

Claims (2)

1.一种通过自定义图形组合在SVG中展示数据的方法，其特征在于，该方法包括以下步骤：

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

2)结合拟采用的图形化展示形式与数据格式，确定所应用的子图形组合，各种图形化展示形式用以表现输入数据的自定义子图形组合不同，具体如下：表格所应用的子图形组合是若干个矩形，指示灯所应用的子图形组合是若干个圆形，进度条所应用的子图形组合是两个叠加的圆角矩形，柱条形图所应用的子图形组合是直线和圆角矩形，曲线图所应用的子图形组合是是直线和路径；

根据步骤1)中得到的待展示数据，计算子图形组合中各个子图形的坐标与属性，包括如下内容：矩形的左上角坐标及宽高，圆形的圆心坐标及半径，直线的起点坐标、终点坐标，路径的各个折点坐标；

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

4)在SVG画布上按照层次关系依次创建子图形组合中包含的子图形，并将子图形添加到步骤3)中新建的SVG画布当中，各种图形化展示形式的表现方式不同，因此绘制子图形的具体方法也不同，具体如下：

表格：在SVG画布上逐行、逐列地绘制各个单元格，然后逐行、逐列地在各个单元格上绘制文字内容；指示灯：在SVG画布上直接绘制一个圆形，并设置填充色；进度条：在SVG画布上先绘制较长的圆角矩形，再根据进度条的百分比数值绘制较短的圆角矩形；柱条形图：在SVG画布上绘制横轴直线、纵轴直线，然后逐个绘制数据集中的数值点所对应的矩形；曲线图：在SVG画布上绘制横轴直线、纵轴直线，然后新建一条路径，并依据数据集中的各个数值点设定其折点坐标；

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

6)将SVG画布的更改应用到SVG文档，刷新界面显示，选择是否添加淡入动画使得画布展现效果更为平滑。

2.根据权利要求1所述的方法，其特征在于，所述步骤3)中还包括在新建的SVG画布上绘制圆角矩形背景、文字标题。