[发明专利]一种基于HTML5的节点关系图显示方法及系统

摘要

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

主权项

一种基于HTML5的节点关系图的显示方法,其特征在于,包括如下步骤：S1：由用户输入或web服务器后台返回特定json格式的数据；S2：JavaScript脚本对该格式的json数据进行解析,得到相应的节点和节点关系；S3：图形绘制模块绘制创建一个空白画布；S4：图形绘制模块在空白画布上绘制节点和节点连接线；S5：图形元素事件处理模块设置相应的鼠标事件相应程序；S6：将图形输出到web页面上显示。