CN106484408A - 一种基于html5的节点关系图显示方法及系统 - Google Patents

一种基于html5的节点关系图显示方法及系统 Download PDF

Info

Publication number
CN106484408A
CN106484408A CN201610860935.6A CN201610860935A CN106484408A CN 106484408 A CN106484408 A CN 106484408A CN 201610860935 A CN201610860935 A CN 201610860935A CN 106484408 A CN106484408 A CN 106484408A
Authority
CN
China
Prior art keywords
node
data
relationships
html5
mouse
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.)
Pending
Application number
CN201610860935.6A
Other languages
English (en)
Inventor
曹晟
蒋长红
毕丙伟
张刚林
孙博宇
常知常
李富祥
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
University of Electronic Science and Technology of China
Original Assignee
University of Electronic Science and Technology of China
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by University of Electronic Science and Technology of China filed Critical University of Electronic Science and Technology of China
Priority to CN201610860935.6A priority Critical patent/CN106484408A/zh
Publication of CN106484408A publication Critical patent/CN106484408A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明提出了一种基于HTML5的节点关系图显示方法及系统,该方法包括如下步骤:用户输入或网站服务器后台返回节点关系图的图形数据,该图形数据为特定的json格式；数据输入模块获取相应的json图形数据并临时存储；利用HTML5的新特性创建图形绘制模块并创建初始的空白画布；利用JavaScript脚本程序解析器解析json图形数据；图形绘制模块根据解析后的图形数据设置节点的初始位置并绘制节点；根据绘制好的节点图以及相应的图形数据,图形绘制模块绘制出对应的节点连接线；图形元素事件处理模块根据图形数据设置图形元素的鼠标事件；图形输出模块输出图形到网页上并显示出节点关系图给用户.本发明利用HTML5的canvas功能和html页面支持的图形各元素的鼠标事件,通过特定格式的图形数据,高效、清晰地将节点关系图显示在网页上。

Description

一种基于HTML5的节点关系图显示方法及系统
技术领域
本发明涉及在线教育技术领域,具体涉及一种基于HTML5的节点关系图的显示方法及系统.
背景技术
随着互联网的迅速发展以及海量数据的快速出现,为海量数据提供一种高效、直观的可视化方法变得越来越重要.对于在线教育领域,以提高学习效率和学习路径导航为目的的知识地图如何绘制成为一个亟待解决的问题.目前,很多平台都提供了基于web的图形数据可视化技术.如Adobe公司的flash,Mcrosoft的Sliverlight都提供了基于web的图形绘制技术,但他们都需要客户端浏览器安装相应插件才能正常显示.另外,sun公司的JavaApplet平台也提供了基于web的图形绘制技术,但同样要求用户电脑上安装了JRE才能正常运行.由于需要用户客户端安装额外的插件才能正常显示绘制的图形,因此基于上述这些平台的图形数据可视化技术发展较为缓慢.
w3c组织推出的新一代HTML5标准的宗旨在于消除或降低脚本的复杂性，提供之前版本需要插件才能实现的功能,其中用于绘画的Canvas元素为网页绘图及图像处理带来了很大的便利.目前主流的浏览器如IE9,Firefox,chrome,Safari等都完成了对HTML5标准的支持.因此,基于新一代HTML5标准、Ajax和Web Service技术使得不使用任何插件便能在客户端的浏览器上绘制图形成为可能.
发明内容
本发明克服了需用客户端安装浏览器插件才能实现基于web的图形绘制的缺陷,提供了一种基于HTML5的节点关系图的显示方法及系统,能够高效、清晰地将节点关系图显示在网页上.
同时,由于使用了开源JavaScript脚本库arbor.js来对节点进行布局,有效地避免了因为节点连接线的之间交叉过多而使图形杂乱难于分析.另外,本发明使用鼠标事件处理模块对图形元素进行处理,节点关系图中的各种不同元素均能够响应鼠标的不同事件,这与传统整个图形响应鼠标事件大不相同.
为了实现本发明的上述目的,本发明提供了一种基于HMTL5的节点关系图的显示方法,其包括如下步骤:
S1:由用户输入或web服务器后台传入json格式的图形数据
S2:使用解析器解析图形数据并临时存储
S3:利用图形绘制模块创建空白画布
S4:根据解析过的图形数据使用图形绘制模块绘制相应的节点和节点连线
S5:利用图形元素事件处理模块为图形元素设置相应的鼠标事件响应程序
S6:将绘制好的图形输出并显示在html页面上
本发明基于HTML5的节点关系图的显示方法利用HTML5绘制图形的新特性和开源JavaScript库arbor.js,提出了一种简单有效的HTML5+JavaScript+json数据解析技术可以快速并稳定的在网页上显示节点关系图.
为了实现本发明的上述目的,根据本发明的第一个方面,本发明提供了一种节点关系图显示系统,其包括数据输入模块,解析器,图形绘制模块,图形元素鼠标事件处理模块以及图形输出模块；所述数据输入模块用于获取用于显示节点关系图的图形数据,格式为json格式,可以由用户直接输入并由JavaScript脚本转换为json,也可以由网站服务器后台直接返回json格式的图形数据；所述解析器用于把数据输入模块得到的json格式图形数据解析为JavaScript脚本可以识别的节点以及节点之间的联系；所述图形绘制模块根据解析过的图形数据绘制和arbor.js库绘制出相应的节点以及节点连接线；所述图形元素鼠标事件处理模块根据已经绘制出的节点和节点连接线设置相应的图形元素鼠标事件相应程序；图形输出模块用于将绘制完毕的节点关系图输出到html页面上.
本发明的有益效果主要表现在:
1)本发明使用了开源JavaScript脚本库arbor.js对图形中的节点进行布局,该布局算法可以根据节点的密度动态调节节点的位置以规避节点连接线之间的交叉,使节点关系图更有效地表现出节点之间的关系.当节点较多时,不至于图形的节点连接线交叉过多而杂乱.
2)本发明通过鼠标事件处理模块对节点关系图中的各种图形元素(包括节点,节点连接线以及节点连接线上的标签)设置不同的鼠标事件响应程序,而传统web页面上的图形只能在整个图形范围内响应鼠标事件.
3)本发明使用HTML5的新特性<canvas>标签来绘制节点关系图,不需要客户机浏览器安装任何插件就可以正常显示.
附图说明
图1是本发明一种基于HTML5的节点关系图显示方法及系统的一种实施例的结构示意图；
图2是本发明一种基于HTML5的节点关系图显示方法及系统的一种实施例的流程图.
具体实施方式
下面对本发明作进一步阐述.
下面将会详细阐述本发明的实施过程,所述示例将会在图示中示出,其中始终相同的元件或模块名称标示具有相同功能的元件.下面以附图描述的实施过程只是示例性的,仅用于解释和阐述本发明,不应理解为对本发明的限制.
如图1所示,本发明提供了一种节点关系图显示系统,该系统包括数据输入模块,解析器,图形绘制模块,输出模块,图形元素事件处理模块和图形输出模块.其中,数据输入模块用于接收由用户输入或者web服务器后台返回的图形数据,数据格式为json数据.解析器用于把数据输入模块得到的json格式图形数据解析为JavaScript脚本可以识别的节点以及节点之间的联系；所述图形绘制模块根据解析过的图形数据绘制和arbor.js库绘制出相应的节点以及节点连接线；所述图形元素鼠标事件处理模块根据已经绘制出的节点和节点连接线设置相应的图形元素鼠标事件相应程序；图形输出模块用于将绘制完毕的节点关系图输出到html页面上.
本发明还提供了一种基于HTML5的节点关系图的显示方法,其包括如下步骤:
第一步:由用户输入或web服务器后台传入json格式的图形数据.在本实施方式中,若采用用户输入的方式来获取节点关系图的图形数据,则在前端html页面上提供相应的输入控件,包括文本框<text>和添加点与边的按钮<input>.每次用户提交一次添加节点或边的操作时,则图形绘制模块根据arbor.js库的节点布局算法自动改变现有节点的位置,并绘制出新的节点或节点连接线.若采用后一种数据输入方式,JavaScript使用异步请求技术AJAX发送获取图形数据的请求,web服务器后台的动态页面(php,py,asp等脚本语言)通过查询数据库得到请求的图形数据,将查询结果(包含了节点关系图的节点以及节点关系等数据)生成相应的json格式数据返回给前台的JavaScript脚本程序.以下为用于描述节点关系图的json数据示例:
该json数据表示两个节点”节点1”和”节点2”,其中有一条连接线由”节点1”指向”节点2”.对于”data”键的内容可以根据图形的需要自定义添加,本例添加了对于节点的描述以及详细描述,同时添加了相关链接,以便实现页面跳转.
第二步:使用解析器解析图形数据并临时存储.在本实施方式中,所述解析器主要由JavaScript脚本程序构成.由于JavaScript程序能够使用内建的eval()函数来解析JSON格式的数据，并用JSON数据来生成原生的JavaScript对象,因此使用json格式的图形数据给图形绘制带来了极大的便利.
所述解析器通过第一次遍历JSON格式的图形数据,得到所有节点的相关信息,所述节点相关信息包括节点名称以及扩展data(第一步所述的data值)数据,并使用相应的结构把节点关系图的节点信息临时存储起来.所述结构可以为数组也可以为自定义的对象,它存储了节点关系图的所有节点的相关信息,但不包含节点关系信息.
所述解析器通过第二次遍历JSON格式的图形数据,此次遍历同样会使用相应的结构临时存储节点关系图中所有节点关系信息.所述节点关系信息包括目的节点名称,即节点连接线的起始位置(第一步示例中的from值)以及扩展数据.
通过所述解析器对JSON格式的图形数据的两次解析,得到了符合javascript脚本语言语法的数据结构,这两种结构分别包含了节点关系图的节点信息以及节点关系信息.
第三步:利用图形绘制模块创建空白画布.在本实施方式中,所述图形绘制模块主要包括两部分,第一部分为静态HTML页面中的<div>标签,第二部分为javascript脚本程序中图形处理程序.
所述<div>标签是HTML语法中的块级元素，它是可用于组合其他HTML元素的容器.在本发明中包含了一个<canvas id＝“diagram”>标签,Canvas对象表示一个HTML画布元素,它没有自己的行为，但是定义了一个API支持javascript脚本化客户端绘图操作.通过引入<canvas>标签,第二部分的javascript脚本程序可以通过id为”diagram”来识别出该标签,并以该<canvas>为画面来绘制图形.此后,所有javascript脚本程序的绘制过程都是以此画布为基础来绘制的.
第四步:根据解析过的图形数据使用图形绘制模块绘制相应的节点和节点连线.在本发明中,使用开源的javascript库来实现图形中节点位置的分布,它提供了高效的，力导向布局算法，图形组织抽象和屏幕重绘处理等功能，是一个基于jquery和Web多线程技术的可视化Javascript图形库.因此,它可以有效的避免因节点过多时而造成的连接线相互交叉,或是节点重合.
所述节点的绘制是指重写arbor.js库的eachNode方法,根据节点的相关信息来设计节点的绘制方法.在本实施方式中,节点的绘制方法为:
1.从临时存储的图形数据中读取节点的填充样式
2.通过canvas fillStyle属性设置节点的填充样式
3.从临时存储的图形数据中读取节点显示名称；
4.根据节点显示名称的字符长度以及字体大小,计算出节点的宽度和高度；
5.使用canvas rect()方法绘制矩形节点,矩形的宽度和高度为第4步的计算结果；
6.从临时存储的图形数据中读取节点显示名称的字体,包括字体样式；
7.通过canvas fillStyle属性设置节点显示名称的字体样式
8.使用canvas fillText()方法来绘制节点显示名称；
9.使用结构nodeBoxes存储节点信息,包括节点名称,节点中心坐标以及节点长度与宽度.
所述节点连接线的绘制是指重写arbor.js库的eachEdge方法,根据节点关系的相关信息来绘制节点连接线.在本实施方式中,节点连接线的绘制方法为:
1.使用arbor.js库的intersect_line_box()方法来计算起点和终点的坐标；
2.从临时存储的图形数据中读取节点连接线的颜色；
3.通过canvas fillStyle属性设置节点连接线的颜色；
4.根据第10步的计算结果使用canvas moveTo()方法和lineTo()方法绘制节点连接线；
5.使用结构edgeBoxes存储节点连接线信息,包括节点连接线的起始节点,目的节点以及节点连接线注释；
6.判断节点连接是否存在连接线注释.若存在,则转到第15步；否则直接跳转到第19步.
7.从临时存储的图形数据中获取连接线注释的字体样式；
8.通过canvas fillStyle属性设置节点连接线的字体样式；
9.用canvas fillText()方法来绘制节点连接线注释；
10.判断节点连接线是否为有向连接,若是有向连接则转到下一步；否则直接跳转到最后；
11.从临时存储的图形数据中获取箭头样式；
12.通过canvas fillStyle属性设置箭头样式；
13.绘制箭头.
第五步:利用图形元素事件处理模块为图形元素设置相应的鼠标事件响应程序.在本实施方式中,所述图形元素事件处理模块以及鼠标事件响应程序均为javascript脚本程序.所述图形元素鼠标事件的设置方法为重写arbor.js库的initMouseHandling方法.此外,还需要编写程序实现判断鼠标位置是否在节点显示名称上的isOnNode()方法,判断鼠标是否在节点连接线注释的isOnEdgeLabel()方法.
其中,isOnNode()方法依次通过以下步骤实现:
1.根据javascript库jQuery提供的方法offset()获取当前鼠标的坐标信息mouseX和mouseX；
2.读取存储节点信息的nodeBoxes结构中的节点中心的坐标nodeX和nodeY；
3.读取存储节点信息的nodeBoxes结构中的节点宽度width和高度height；
4.计算节点的坐标范围,在本系统中节点的坐标范围为:
i.
ii.
5.遍历nodeBoxes结构中的所有节点范围,判断当前鼠标位置是否满足上述范围；
isOnEdgeLabel()方法依次通过以下步骤实现:
1.读取存储节点连接线信息的edgeBoxes结构中节点连接线的中心坐标edgeX和edgeY以及节点连接线注释的宽度width和高度height；
2.计算节点连接线注释的坐标范围,在本系统中节点连接线注释的坐标范围为:
3.遍历nodeBoxes结构中的所有节点连接线的注释范围,判断当前鼠标位置是否满足上述范围.
所述图形元素包括节点显示名称和节点连接线注释以及其他空白部分.所述鼠标事件包括鼠标移动,按键按下和按键弹起三个事件.相应的鼠标事件响应处理程序具体实施步骤为:
1.绑定<canvas>的mousedown()事件和mousemove()事件；
2.判断用户是否按下鼠标.若用户按下鼠标,则清空鼠标移动标记,mousemoved并解绑mousemove()事件,绑定鼠标拖拽事件mousedrag()；
3.判断用户是否移动鼠标.若是,则设置鼠标移动标记mousemoved为true,转至下一步；否则,转至第7步.
4.使用isOnNode()方法判断当前鼠标位置是否在节点上,若是,则转入相应的鼠标移至节点事件处理程序；否则,转至下一步；
5.使用isOnEdge()方法判断当前鼠标位置是否在节点连接线注释上.若是,则转入相应的鼠标移至节点连接线事件处理程序；否则,转至下一步；
6.判断用户鼠标按键是否弹起,若是,则转至下一步；否则,结束此程序；
7.通过读取mousemoved的值判断鼠标是否移动过；若是,则识别为鼠标拖拽事件,转至相应的鼠标拖拽事件处理程序；否则识别为鼠标点击事件,转至相应的鼠标点击事件处理程序.
其中,对于本系统而言,由于采用了arbor.js库的节点布局算法,当用户使用鼠标拖拽图形时,默认的鼠标拖拽事件为动态设置节点的位置,目的在于使系统处于稳定的平衡状态.
所述的鼠标移至节点事件处理程序是指当用户鼠标置于节点上时,鼠标形状由箭头变为手形,并在鼠标右上方放置浮动的说明文本.该文本描述了节点的说明信息.
所述的鼠标移至节点连接线事件处理程序是指当用户的鼠标置于节点连接线上时,鼠标形状由箭头变为手形,并在鼠标右上方放置浮动的说明文本.该文本描述了节点连接线的说明信息.
所述的鼠标点击事件是指当用户鼠标点击节点上时,当前的web页面跳转至节点的详细说明页面,以便给用户提供更多的关于点击节点的说明信息.
第六步:将绘制好的图形输出并显示在html页面上.
本发明通过使用开源的javascript库的力导向节点布局算法来设定节点的坐标,然后绘制支持自定义格式的节点以及节点连接线,并设置相应的图形元素鼠标事件响应程序,最终将一个支持鼠标事件的节点关系图高效、清晰地显示在网页上.
与传统的节点关系图图片方式相比,本发明不需要后台服务器生成静态的节点关系图,将图形的处理操作转移到用户的浏览器上,大大的减少了后台服务器的压力；同时,后台服务器只需要传输轻量级的json数据到用户浏览器即可,降低了数据的传输延时,使得图形加载速度较静态图片方式提高了很多.同时,本发明还支持用户对图形的不同元素的鼠标事件,这是传统的静态图片方式所不具有的功能.
与HTML+javaapplet相比,本发明符合W3C组织的新一代HTML标准,使用了html5的新特性<canvas>标签的绘图功能,而HTML5标准中已不再支持<applet>标签,部分浏览器的新版本也不再对<applet>标签提供支持.
与HTML+flash相比,本发明简单易用,用户无需安装额外的浏览器插件,即可快速的显示节点关系图,并提供了丰富的鼠标事件响应功能.
在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中.在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例.而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合.
尽管已经示出和描述了本发明的实施例，本领域的普通技术人员可以理解：在不脱离本发明的原理和宗旨的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由权利要求及其等同物限定。

Claims (7)

1.一种基于HTML5的节点关系图的显示方法,其特征在于,包括如下步骤：
S1：由用户输入或web服务器后台返回特定json格式的数据；
S2：JavaScript脚本对该格式的json数据进行解析,得到相应的节点和节点关系；
S3：图形绘制模块绘制创建一个空白画布；
S4：图形绘制模块在空白画布上绘制节点和节点连接线；
S5：图形元素事件处理模块设置相应的鼠标事件相应程序；
S6：将图形输出到web页面上显示。
2.如权利要求1所述的基于HTML5的节点关系图的显示方法,其特征在于,所述以用户输入的方式传入节点关系图的图形数据,使用JavaScript脚本程序处理成json格式的数据并临时存储。
3.如权利要求1所述的基于HTML5的节点关系图的显示方法,其特征在于,所述以web服务器后台返回节点关系图的图形数据,使用异步请求技术ajax异步请求web服务器返回json格式数据。
4.如权利要求1所述的基于HTML5的节点关系图的显示方法,其特征在于,所述节点的绘制使用开源JavaScript库arbor.js的力导向节点布局算法来设定节点的坐标。
5.如权利要求1所述的基于HTML5的节点关系图的显示方法,其特征在于,所述图形元素包括节点关系图上所有的节点,几点连接线以及节点连接线的文字标签。
6.如权利要求1所述的基于HTML5的节点关系图的显示方法,其特征在于,所述鼠标事件包括鼠标滑过图形元素(包括节点,节点名称,节点连接线以及节点连接线名称),鼠标悬浮在图形元素上以及鼠标点击图形元素。
7.一种节点关系显示系统,其特征在于,包括数据输入模块,数据解析器,图形绘制模块和鼠标事件处理模块：
所述用户数据输入模块用于获取存储图形数据的json格式数据并临时存储；
所述数据解析器用于把json格式的图形数据解析为相应的节点和节点连接线；
所述图形绘制模块用于在canvas上绘制节点和节点连接线并显示到web页面上；
所述鼠标事件处理模块用于设置节点关系图上各个元素的鼠标事件响应方法。
CN201610860935.6A 2016-09-29 2016-09-29 一种基于html5的节点关系图显示方法及系统 Pending CN106484408A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610860935.6A CN106484408A (zh) 2016-09-29 2016-09-29 一种基于html5的节点关系图显示方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610860935.6A CN106484408A (zh) 2016-09-29 2016-09-29 一种基于html5的节点关系图显示方法及系统

Publications (1)

Publication Number Publication Date
CN106484408A true CN106484408A (zh) 2017-03-08

Family

ID=58268939

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610860935.6A Pending CN106484408A (zh) 2016-09-29 2016-09-29 一种基于html5的节点关系图显示方法及系统

Country Status (1)

Country Link
CN (1) CN106484408A (zh)

Cited By (19)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107729006A (zh) * 2017-10-30 2018-02-23 南京唯实科技有限公司 一种基于pc端的页面信息智能采集工具及方法
CN108921914A (zh) * 2018-05-25 2018-11-30 北京石油化工学院 一种系谱图绘制方法、装置及电子设备
CN109388680A (zh) * 2017-08-07 2019-02-26 北京超图软件股份有限公司 一种提高浏览器端gis点数据渲染效率的方法和装置
CN109408042A (zh) * 2018-10-10 2019-03-01 高新兴科技集团股份有限公司 机器人可视化脚本配置方法、装置及计算机存储介质
CN109615210A (zh) * 2018-12-05 2019-04-12 山东浪潮通软信息科技有限公司 一种Web框架下的业务流程图展示方法及系统
CN109783568A (zh) * 2018-12-29 2019-05-21 咪咕文化科技有限公司 一种网络拓扑图的生成方法、装置及存储介质
CN109857388A (zh) * 2019-01-10 2019-06-07 北京城市网邻信息技术有限公司 代码生成方法、装置、服务器及计算机可读介质
CN109871206A (zh) * 2019-03-14 2019-06-11 杭州安恒信息技术股份有限公司 Json树的视图化方法、装置、设备及可读存储介质
CN110097612A (zh) * 2019-04-02 2019-08-06 北京大麦地信息技术有限公司 一种在线绘制图形元素的方法及装置
CN110489617A (zh) * 2019-08-27 2019-11-22 北京锐安科技有限公司 一种关系图绘制方法、装置、设备和存储介质
CN110728733A (zh) * 2019-10-21 2020-01-24 中国民航信息网络股份有限公司 一种用于绘制航线图的系统及方法
CN111179439A (zh) * 2019-12-24 2020-05-19 武汉理工光科股份有限公司 基于three.js的网页端三维空间内部物体交互操作方法
CN111240655A (zh) * 2020-01-07 2020-06-05 红有软件股份有限公司 一种基于GDI/GDI+美化WinForm组件的方法
CN111260752A (zh) * 2020-01-14 2020-06-09 北京明略软件系统有限公司 一种流程图绘制方法、装置及设备、存储介质
CN111435372A (zh) * 2019-01-11 2020-07-21 阿里巴巴集团控股有限公司 数据展示方法及系统、数据编辑方法及系统、设备、介质
CN111857375A (zh) * 2020-07-08 2020-10-30 国电南瑞科技股份有限公司 一种基于vue框架的大数据流图处理方法
CN111988175A (zh) * 2020-08-20 2020-11-24 国网湖北省电力有限公司信息通信公司 一种电力通信网络可视化的优化方法
CN112272163A (zh) * 2020-09-28 2021-01-26 中孚安全技术有限公司 一种基于浏览器端对网络流量的分析呈现方法
CN113268241A (zh) * 2021-07-20 2021-08-17 浩鲸云计算科技股份有限公司 一种基于html5的流程图自动布局方法

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103201739A (zh) * 2010-11-09 2013-07-10 日本电气株式会社 信息处理设备
CN103873277A (zh) * 2012-12-12 2014-06-18 中国科学院声学研究所 一种分层的网络拓扑可视化方法及系统

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103201739A (zh) * 2010-11-09 2013-07-10 日本电气株式会社 信息处理设备
CN103873277A (zh) * 2012-12-12 2014-06-18 中国科学院声学研究所 一种分层的网络拓扑可视化方法及系统

Cited By (25)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109388680A (zh) * 2017-08-07 2019-02-26 北京超图软件股份有限公司 一种提高浏览器端gis点数据渲染效率的方法和装置
CN107729006B (zh) * 2017-10-30 2021-06-04 南京唯实科技有限公司 一种基于pc端的页面信息智能采集工具及方法
CN107729006A (zh) * 2017-10-30 2018-02-23 南京唯实科技有限公司 一种基于pc端的页面信息智能采集工具及方法
CN108921914A (zh) * 2018-05-25 2018-11-30 北京石油化工学院 一种系谱图绘制方法、装置及电子设备
CN108921914B (zh) * 2018-05-25 2022-10-28 北京石油化工学院 一种系谱图绘制方法、装置及电子设备
CN109408042A (zh) * 2018-10-10 2019-03-01 高新兴科技集团股份有限公司 机器人可视化脚本配置方法、装置及计算机存储介质
CN109615210A (zh) * 2018-12-05 2019-04-12 山东浪潮通软信息科技有限公司 一种Web框架下的业务流程图展示方法及系统
CN109783568A (zh) * 2018-12-29 2019-05-21 咪咕文化科技有限公司 一种网络拓扑图的生成方法、装置及存储介质
CN109857388A (zh) * 2019-01-10 2019-06-07 北京城市网邻信息技术有限公司 代码生成方法、装置、服务器及计算机可读介质
CN109857388B (zh) * 2019-01-10 2021-06-15 北京城市网邻信息技术有限公司 代码生成方法、装置、服务器及计算机可读介质
CN111435372A (zh) * 2019-01-11 2020-07-21 阿里巴巴集团控股有限公司 数据展示方法及系统、数据编辑方法及系统、设备、介质
CN109871206B (zh) * 2019-03-14 2022-05-03 杭州安恒信息技术股份有限公司 Json树的视图化方法、装置、设备及可读存储介质
CN109871206A (zh) * 2019-03-14 2019-06-11 杭州安恒信息技术股份有限公司 Json树的视图化方法、装置、设备及可读存储介质
CN110097612A (zh) * 2019-04-02 2019-08-06 北京大麦地信息技术有限公司 一种在线绘制图形元素的方法及装置
CN110489617A (zh) * 2019-08-27 2019-11-22 北京锐安科技有限公司 一种关系图绘制方法、装置、设备和存储介质
CN110728733A (zh) * 2019-10-21 2020-01-24 中国民航信息网络股份有限公司 一种用于绘制航线图的系统及方法
CN111179439A (zh) * 2019-12-24 2020-05-19 武汉理工光科股份有限公司 基于three.js的网页端三维空间内部物体交互操作方法
CN111179439B (zh) * 2019-12-24 2023-05-09 武汉理工光科股份有限公司 基于three.js的网页端三维空间内部物体交互操作方法
CN111240655A (zh) * 2020-01-07 2020-06-05 红有软件股份有限公司 一种基于GDI/GDI+美化WinForm组件的方法
CN111240655B (zh) * 2020-01-07 2023-11-07 红有软件股份有限公司 一种基于GDI/GDI+美化WinForm组件的方法
CN111260752A (zh) * 2020-01-14 2020-06-09 北京明略软件系统有限公司 一种流程图绘制方法、装置及设备、存储介质
CN111857375A (zh) * 2020-07-08 2020-10-30 国电南瑞科技股份有限公司 一种基于vue框架的大数据流图处理方法
CN111988175A (zh) * 2020-08-20 2020-11-24 国网湖北省电力有限公司信息通信公司 一种电力通信网络可视化的优化方法
CN112272163A (zh) * 2020-09-28 2021-01-26 中孚安全技术有限公司 一种基于浏览器端对网络流量的分析呈现方法
CN113268241A (zh) * 2021-07-20 2021-08-17 浩鲸云计算科技股份有限公司 一种基于html5的流程图自动布局方法

Similar Documents

Publication Publication Date Title
CN106484408A (zh) 一种基于html5的节点关系图显示方法及系统
CN111475163B (zh) 视图模板的代码文件生成方法、装置、设备及存储介质
JP5209051B2 (ja) データシステム及び方法
US8665274B2 (en) Method and system for generating and displaying an interactive dynamic view of bi-directional impact analysis results for multiply connected objects
US8194075B2 (en) Method and system for generating and displaying an interactive dynamic list view of multiply connected objects
CN101201832B (zh) 优化网页图像的方法和系统
US8711148B2 (en) Method and system for generating and displaying an interactive dynamic selective view of multiply connected objects
CN106095437B (zh) 用户界面从右到左rtl的布局方式的实现方法及装置
KR101494844B1 (ko) 메타 데이터를 이용한 차트 변환 시스템 및 그 방법
CN106776939A (zh) 一种图像无损标注方法及系统
CN103176954A (zh) 一种基于HTML5 canvas的数学公式显示方法及系统
CN111459501A (zh) 基于SVG的Web组态画面存储与展示系统和方法及介质
CN109815451A (zh) 一种pdf生成方法、装置及设备
CA2714228C (en) Complex input to image transformation for distribution
CN113536179A (zh) 页面的生成方法、装置、电子设备和存储介质
CN114647409A (zh) 大屏可视化应用创建平台、方法、计算设备和存储介质
CN117093386B (zh) 页面截图方法、装置、计算机设备和存储介质
CN111858595B (zh) 一种电力工程验评记录表动态配置方法与系统
CN112306619A (zh) 一种截图方法和装置
Dengler et al. Scalable vector graphics (SVG) 1.1
CN112269960B (zh) 基于关联报表的网页更新方法、系统、设备及存储介质
CN106910250A (zh) 用于在虚拟现实场景中操作页面的方法和装置
JP2013161454A (ja) グラフ情報表示装置及びプログラム
Delorme Exam Ref 70-480 Programming in HTML5 with JavaScript and CSS3 (MCSD)
CN117370388A (zh) 数据匹配方法、装置、电子设备及存储介质

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20170308