CN103019682A - 一种通过自定义图形组合在svg中展示数据的方法 - Google Patents
一种通过自定义图形组合在svg中展示数据的方法 Download PDFInfo
- Publication number
- CN103019682A CN103019682A CN2012104729952A CN201210472995A CN103019682A CN 103019682 A CN103019682 A CN 103019682A CN 2012104729952 A CN2012104729952 A CN 2012104729952A CN 201210472995 A CN201210472995 A CN 201210472995A CN 103019682 A CN103019682 A CN 103019682A
- Authority
- CN
- China
- Prior art keywords
- svg
- canvas
- spirte
- graphics
- painting canvas
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Landscapes
- Processing Or Creating Images (AREA)
Abstract
本发明涉及一种通过自定义图形组合在SVG中展示数据的方法,属于计算机应用领域。该方法包括:将待展示数据按照拟采用的图形化展示形式的数据格式进行组织;结合拟采用的图形化展示形式与数据格式,确定所应用的子图形组合,并计算各个子图形的坐标与属性;采用DOM编程接口访问SVG文档,在SVG文档中根据设定的画布左上角坐标与画布大小新建画布;在新建的SVG画布上绘制圆角矩形背景、文字标题(可选);在SVG画布上按照层次关系依次创建子图形组合中包含的子图形;对SVG画布上的子图形添加鼠标和键盘交互事件响应;将SVG画布的更改应用到SVG文档,刷新界面显示。本发明可适用于个性化的图形展示需求,扩展性强、开发难度小、开发效率高,具有很强的实用性。
Description
技术领域
本发明属于计算机应用领域,特别提供了一种通过自定义图形组合在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)结合拟采用的图形化展示形式与数据格式,确定所应用的子图形组合,并计算各个子图形的坐标与属性;
3)采用DOM编程接口访问SVG文档,在SVG文档中根据设定的画布左上角坐标与画布大小新建SVG画布;
4)在SVG画布上按照层次关系依次创建子图形组合中包含的子图形;
5)对SVG画布上的子图形添加鼠标和键盘交互事件响应;
6)将SVG画布的更改应用到SVG文档,刷新界面显示。
2.根据权利要求1所述的方法,其特征在于,所述步骤3)中还包括在新建的SVG画布上绘制圆角矩形背景、文字标题。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201210472995.2A CN103019682B (zh) | 2012-11-20 | 2012-11-20 | 一种通过自定义图形组合在svg中展示数据的方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201210472995.2A CN103019682B (zh) | 2012-11-20 | 2012-11-20 | 一种通过自定义图形组合在svg中展示数据的方法 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN103019682A true CN103019682A (zh) | 2013-04-03 |
CN103019682B CN103019682B (zh) | 2015-09-30 |
Family
ID=47968321
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201210472995.2A Active CN103019682B (zh) | 2012-11-20 | 2012-11-20 | 一种通过自定义图形组合在svg中展示数据的方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN103019682B (zh) |
Cited By (15)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN104699483A (zh) * | 2015-03-16 | 2015-06-10 | 东方电子股份有限公司 | 一种web组件的高效实现方法 |
CN106681706A (zh) * | 2016-08-09 | 2017-05-17 | 腾讯科技(深圳)有限公司 | 应用进度处理方法及终端 |
WO2017080085A1 (zh) * | 2015-11-12 | 2017-05-18 | 小米科技有限责任公司 | 图形用户界面绘制方法及装置 |
CN107608729A (zh) * | 2017-09-14 | 2018-01-19 | 光锐恒宇(北京)科技有限公司 | 一种在应用中展示动态效果的方法和装置 |
CN108228286A (zh) * | 2016-12-14 | 2018-06-29 | 北京国双科技有限公司 | 绘制元素跟踪方法及装置 |
CN108958877A (zh) * | 2018-08-15 | 2018-12-07 | 北京无线电计量测试研究所 | 一种实时更新采集图像数据的绘图***和方法 |
CN108984608A (zh) * | 2018-06-08 | 2018-12-11 | 江苏中威科技软件***有限公司 | 基于文件底版的信息排版和交互***及方法 |
CN109144655A (zh) * | 2018-09-05 | 2019-01-04 | 北京京东金融科技控股有限公司 | 图像动态展示的方法、装置、***及介质 |
CN109636887A (zh) * | 2018-11-29 | 2019-04-16 | 北京宇航***工程研究所 | 一种二维电子技术图纸格式转换及矢量化交互*** |
CN109828806A (zh) * | 2018-12-24 | 2019-05-31 | 苏州蜗牛数字科技股份有限公司 | 一种基于ui自定义多样化组合控件的优化方法 |
CN110035124A (zh) * | 2019-04-15 | 2019-07-19 | 重庆天蓬网络有限公司 | 一种基于web端的ivr流程自定义配置方法及*** |
CN110263301A (zh) * | 2019-06-27 | 2019-09-20 | 北京百度网讯科技有限公司 | 用于确定文字的颜色的方法和装置 |
CN110516221A (zh) * | 2019-08-29 | 2019-11-29 | 苏州朗动网络科技有限公司 | 提取pdf文档中图表数据的方法、设备和存储介质 |
CN113111280A (zh) * | 2020-01-09 | 2021-07-13 | 福建天泉教育科技有限公司 | 流程图形式显示日志内容的方法、存储介质 |
CN113781604A (zh) * | 2021-09-26 | 2021-12-10 | 杭州安恒信息技术股份有限公司 | 一种多维点状图的生成方法、生成***及相关装置 |
-
2012
- 2012-11-20 CN CN201210472995.2A patent/CN103019682B/zh active Active
Non-Patent Citations (5)
Title |
---|
刘遵雄 等: "《基于SVG的电力图形***的实现》", 《继电器》 * |
梁先勇: "《基于SVG的图表组件设计与实现》", 《中国优秀硕士学位论文全文数据库(电子期刊)信息科技辑》 * |
沈国辉 等: "《SVG技术在电网调度自动化中的应用》", 《电网技术》 * |
解雅坤: "《基于XML的电力***图形信息表示的应用研究》", 《中国优秀硕士学位论文全文数据库(电子期刊)工程科技II辑》 * |
赖晓文 等: "《基于SVG技术的电力***可视化平台集成与方法库开发》", 《电力***自动化》 * |
Cited By (21)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN104699483A (zh) * | 2015-03-16 | 2015-06-10 | 东方电子股份有限公司 | 一种web组件的高效实现方法 |
US10108323B2 (en) | 2015-11-12 | 2018-10-23 | Xiaomi Inc. | Method and device for drawing a graphical user interface |
WO2017080085A1 (zh) * | 2015-11-12 | 2017-05-18 | 小米科技有限责任公司 | 图形用户界面绘制方法及装置 |
CN106681706B (zh) * | 2016-08-09 | 2020-08-11 | 腾讯科技(深圳)有限公司 | 应用进度处理方法及终端 |
CN106681706A (zh) * | 2016-08-09 | 2017-05-17 | 腾讯科技(深圳)有限公司 | 应用进度处理方法及终端 |
CN108228286A (zh) * | 2016-12-14 | 2018-06-29 | 北京国双科技有限公司 | 绘制元素跟踪方法及装置 |
CN107608729A (zh) * | 2017-09-14 | 2018-01-19 | 光锐恒宇(北京)科技有限公司 | 一种在应用中展示动态效果的方法和装置 |
CN108984608A (zh) * | 2018-06-08 | 2018-12-11 | 江苏中威科技软件***有限公司 | 基于文件底版的信息排版和交互***及方法 |
CN108958877A (zh) * | 2018-08-15 | 2018-12-07 | 北京无线电计量测试研究所 | 一种实时更新采集图像数据的绘图***和方法 |
CN109144655B (zh) * | 2018-09-05 | 2021-03-30 | 京东数字科技控股有限公司 | 图像动态展示的方法、装置、***及介质 |
CN109144655A (zh) * | 2018-09-05 | 2019-01-04 | 北京京东金融科技控股有限公司 | 图像动态展示的方法、装置、***及介质 |
CN109636887A (zh) * | 2018-11-29 | 2019-04-16 | 北京宇航***工程研究所 | 一种二维电子技术图纸格式转换及矢量化交互*** |
CN109636887B (zh) * | 2018-11-29 | 2023-06-06 | 北京宇航***工程研究所 | 一种二维电子技术图纸格式转换及矢量化交互*** |
CN109828806A (zh) * | 2018-12-24 | 2019-05-31 | 苏州蜗牛数字科技股份有限公司 | 一种基于ui自定义多样化组合控件的优化方法 |
CN110035124A (zh) * | 2019-04-15 | 2019-07-19 | 重庆天蓬网络有限公司 | 一种基于web端的ivr流程自定义配置方法及*** |
CN110035124B (zh) * | 2019-04-15 | 2020-06-09 | 重庆天蓬网络有限公司 | 一种基于web端的ivr流程自定义配置方法及*** |
CN110263301A (zh) * | 2019-06-27 | 2019-09-20 | 北京百度网讯科技有限公司 | 用于确定文字的颜色的方法和装置 |
CN110263301B (zh) * | 2019-06-27 | 2023-12-05 | 北京百度网讯科技有限公司 | 用于确定文字的颜色的方法和装置 |
CN110516221A (zh) * | 2019-08-29 | 2019-11-29 | 苏州朗动网络科技有限公司 | 提取pdf文档中图表数据的方法、设备和存储介质 |
CN113111280A (zh) * | 2020-01-09 | 2021-07-13 | 福建天泉教育科技有限公司 | 流程图形式显示日志内容的方法、存储介质 |
CN113781604A (zh) * | 2021-09-26 | 2021-12-10 | 杭州安恒信息技术股份有限公司 | 一种多维点状图的生成方法、生成***及相关装置 |
Also Published As
Publication number | Publication date |
---|---|
CN103019682B (zh) | 2015-09-30 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN103019682B (zh) | 一种通过自定义图形组合在svg中展示数据的方法 | |
US20230334222A1 (en) | System and method for extended dynamic layout | |
CN106021211A (zh) | 一种智能表单***及其生成方法 | |
US8001476B2 (en) | Cellular user interface | |
CN106354786A (zh) | 一种可视分析方法及*** | |
CN102360288B (zh) | 实时数据驱动的脚本化全组态hmi*** | |
CN101593209A (zh) | 一种交互式在线统计地图生成与发布装置及方法 | |
CN116225429A (zh) | 基于拖拽式组件框架的ipage网页式低代码开发平台 | |
CN104007967B (zh) | 一种基于可扩展标记语言的用户界面生成方法和装置 | |
CN109254771B (zh) | 一种监控页面生成方法和装置 | |
CN102609256A (zh) | 一种基于网页的动态图表生成方法 | |
CN101944027A (zh) | 一种用户界面生成方法 | |
CN103677789A (zh) | 基于grid组件的列表数据展现方法及*** | |
CN104951996A (zh) | 基于可缩放矢量图形的配电网运行监测方法 | |
CN102902545A (zh) | 为动画化分解标记语言元素 | |
CN114003621A (zh) | 用于区域碳排放的动态可视化方法及*** | |
CN107707965A (zh) | 一种弹幕的生成方法和装置 | |
CN104616099A (zh) | 一种电网潮流数据对比与分析的图形展示方法 | |
CN116402937A (zh) | 一种基于web的复杂数据3D可视化简化开发方法 | |
CN115827811A (zh) | 一种工厂二维地图设备状态可视化的配置展示*** | |
CN115691772A (zh) | 运营可视化***及相应计算机设备和存储介质 | |
CN112417346A (zh) | 渲染方法、装置、电子设备及存储介质 | |
CN111538878A (zh) | 一种基于qt的数据采集平台数据的展示方法及装置 | |
CN115185509B (zh) | 一种指标画面组态方法 | |
CN113900614B (zh) | 一种移动端控制的可视化大屏展示*** |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
C06 | Publication | ||
PB01 | Publication | ||
C10 | Entry into substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
C14 | Grant of patent or utility model | ||
GR01 | Patent grant |