专利名称：一种通过自定义图形组合在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数据展示界面。本发明的技术方案如下I)将待展示数据按照拟采用的图形化展示形式(包括表格、指示灯、进度条、柱条形图、曲线图)的数据格式进行组织；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所示，包括以下步骤I)将待展示数据按照拟采用的图形化展示形式(包括表格、指示灯、进度条、柱条形图、曲线图)的数据格式进行组织；具体方法如下使用编程语言从数据库或文件查询或读入待展示的数据，对该数据进行重新组织，组织后的数据应至少包括如下部分(I)数据标题，即数据内容的说明文字；(2)进行数据展示的SVG画布的左上角坐标与大小；(3)按类别、数值或者时间要素区分的数据集；其中第(3)部分与拟采用的图形化展示形式相关，分别为表格所规定的格式为ニ维数据；指示灯所规定的格式为ー组布尔型数据；进度条所规定的格式为ー组浮点型数据；X轴为类别轴、Y轴为数值轴的柱条形图、曲线图所规定的格式为ー组类别说明及对应的整型或浮点数值；X轴为时间轴、Y轴为数值轴的柱条形图、曲线图所规定的格式为ー组时间序列及对应的整型或浮点数值；2)结合拟采用的图形化展示形式与数据格式，确定所应用的子图形组合，并计算各个子图形的坐标与属性；具体方法如下本发明提供了表格、指示灯、进度条、柱条形图、曲线图共五种图形化展示形式，并且可以在本发明所提及的实施框架下进行扩展；各种图形化展示形式用以表现输入数据的自定义子图形组合不同，具体如下
(I)表格所应用的子图形组合是若干个矩形(表格中每个单元格对应ー个矩形)；(2)指示灯所应用的子图形组合是若干个圆形(每个指示灯对应ー个圆形);(3)进度条所应用的子图形组合是两个叠加的圆角矩形；(4)柱条形图所应用的子图形组合是直线(坐标轴)和圆角矩形(每ー个柱形或条形对应ー个圆角矩形)；(5)曲线图所应用的子图形组合是是直线(坐标轴)和路径(每一条曲线对应一条路径)；根据步骤I)中得到的待展示数据，计算子图形组合中各个子图形(矩形、圆形、圆角矩形、直线、路径)的坐标与属性，包括如下内容
(I)矩形的左上角坐标及宽高；(2)圆形的圆心坐标及半径；(3)直线的起点坐标、終点坐标；(4)路径的各个折点坐标。此步骤需实现计算坐标与属性的initParameters函数，Java示例代码如下
Il计算表格各单元格的关键坐标与属性protected void initParameters() tsuper.1nitParameters();int widthRatioSum = 0;for (int i = 0; i < columnCount; i++) {widthRatioSum += CelIWidthRatio[i];
}
avgCeIIWidth = contentffidth / widthRatioSum;
int heightRatioSum = 0;
for (int i = 0; i < rowCount; i++) {
heightRatioSum +ニ CelIHeightRatio[i];
}
avgCeIIHeight = contentHeight / heightRatioSum;
}3)采用DOM编程接ロ访问SVG文档，在SVG文档中根据设定的画布左上角坐标与画布大小新建SVG画布；具体方法如下根据步骤I)中得到的画布左上角坐标与大小，采用DOM编程接ロ在SVG文档中动态新建ー块空白画布，即调用DOM函数新建ー个g元素，其id由程序生成并确保唯一。此步骤需实现新建画布的initComponentGroup函数，Java示例代码如下
权利要求
1.一种通过自定义图形组合在SVG中展示数据的方法，其特征在于，该方法主要包括以下步骤1)将待展示数据按照拟采用的图形化展示形式的数据格式进行组织；2)结合拟采用的图形化展示形式与数据格式，确定所应用的子图形组合，并计算各个子图形的坐标与属性；3)采用DOM编程接口访问SVG文档，在SVG文档中根据设定的画布左上角坐标与画布大小新建SVG画布；4)在SVG画布上按照层次关系依次创建子图形组合中包含的子图形；5)对SVG画布上的子图形添加鼠标和键盘交互事件响应；6)将SVG画布的更改应用到SVG文档，刷新界面显示。
2.根据权利要求1所述的方法，其特征在于，所述步骤3)中还包括在新建的SVG画布上绘制圆角矩形背景、文字标题。
全文摘要
本发明涉及一种通过自定义图形组合在SVG中展示数据的方法，属于计算机应用领域。该方法包括将待展示数据按照拟采用的图形化展示形式的数据格式进行组织；结合拟采用的图形化展示形式与数据格式，确定所应用的子图形组合，并计算各个子图形的坐标与属性；采用DOM编程接口访问SVG文档，在SVG文档中根据设定的画布左上角坐标与画布大小新建画布；在新建的SVG画布上绘制圆角矩形背景、文字标题(可选)；在SVG画布上按照层次关系依次创建子图形组合中包含的子图形；对SVG画布上的子图形添加鼠标和键盘交互事件响应；将SVG画布的更改应用到SVG文档，刷新界面显示。本发明可适用于个性化的图形展示需求，扩展性强、开发难度小、开发效率高，具有很强的实用性。
文档编号G06F9/44GK103019682SQ20121047299
公开日2013年4月3日 申请日期2012年11月20日 优先权日2012年11月20日
发明者陈启鑫, 赖晓文, 夏清, 康重庆 申请人:清华大学