`

HTML5流程图之复杂关系网

阅读更多

关系网图的呈现方式多种多样,今天我们给大家分享的是和弦式的关系网图,先来看看效果:



例子中我们展示的是各部门员工之间的复杂关系图。在公司内部,不仅部门内部员工之间发生着关系往来,部门和部门之间的员工也在发生这各种往来关系。如果你还是用原先的那种表格来呈现,显然很难直观看出各种关系,用图形化的拓扑呈现就会显得一目了然。好了,我们就来分析一下这张图如何用twaver实现它。
首先我们要定义部门的网元,twaver矢量减少了我们很多定制UI的繁琐,我们直接用矢量来描述这个小圆点部分,注意小圆点的颜色需要区分鼠标滑过时的效果,这里我们定义了是否需要高亮的属性:highlighted,代码如下:

twaver.Util.registerImage('circle_node', {		
	w: 200,
	h: 200,
	lineWidth:1,
	lineColor: 'black',	
	v: [{
		shape: 'circle',		
		r: 6,
		fill: function(data, view){
			if(data.getClient('highlighted')){
				return highlightedNodeColor;
			}else{				
				return normalNodeColor;
			}
		}
	}]
});



第一步,小圆点描述好了,接下来就需要为圆点加上文字的显示,文字如果按照默认的显示方式显然不太好,因为我们是要让文字进行旋转,而文字所处的位置需要根据角度来计算对其方式和偏移值,当然文字也需要鼠标滑过的效果:

{
	shape: 'text',
	text: '<%=getClient("text")%>',
	textAlign: function(data, view){
		var angle=data.getClient('angle'	)+ball.angle;
		angle=angle%360;
		if(angle<0){
			angle=angle+360;
		}
		if(angle>90 && angle<270){
			return 'right';
		}
		return 'left';
	},
	textBaseline: 'middle',
	font: '12px "Microsoft Yahei"',
	fill: function(data, view){
		if(data.getClient('highlighted')){
			return highlightedNodeColor;
		}else{				
			return 'black';
		}
	},
	x: function(data, view){
		var angle=data.getClient('angle'	)+ball.angle;
		angle=angle%360;
		if(angle<0){
			angle=angle+360;
		}
		if(angle>90 && angle<270){
			return -10
		}
		return 10;
	},			
}



好了,第三步需要让整个节点能旋转起来,因此我们还需要为node加上旋转的矢量描述:

rotate: function(data, view){
	var angle=data.getClient('angle')+ball.angle;
	angle=angle%360;
	if(angle<0){
		angle=angle+360;
	}
	if(angle>90 && angle<270){
		angle+=180;
	}
	return angle;
}



至此部门的节点就定制好了,是不是感觉复杂了一下,没关系,如果想要这样的功能,直接使用我们封装好的这个就可以了。
接着我们还需要来定制连线,上图中连线走向的那种方式在twaver产品中已经是很常见了,这里我们就不多描述了。
OK,准备好节点和连线的矢量描述之后就可以来填充数据了,创建好公司的所有部门以及员工之间的关系后,我们还需要给部门设置上旋转的度数:

for(var i=0;i<size;i++){
	var angle=Math.PI*2/size*i;
	var x=ball.cx+ball.width*Math.cos(angle);
	var y=ball.cy+ball.height*Math.sin(angle);
	var id='n'+i;
	var degree=parseInt(angle/Math.PI*180);
	var node=createNode(box, id, x, y, '部门'+i, degree);
}



这样我们上面的那张图的功能就差不多了。也许有人会觉得怎么都是呈现的是部门,如何才能看到部门下哪些员工和另外的部门有关系呢。是的,到此我们还只完成了一半,还有更精彩的内容呈现给大家。
双击部门后,可以展开这个部门,并显示部门下所有的员工。



是不是很帅,注意这里是有动画效果的,双击某个部门,这个部门会转到顶部,然后展开这个部门。这个用twaver新增的动画功能很容易来实现,这里就不多说了。下面录制了一个视频供大家欣赏。这样我们就能更清楚的知道这个部门下的员工和哪个部门下的员工有业务往来关系了。下图是一个gif图片,下载有点慢,请耐心等待。

 

 

或者直接点击看视频:

http://player.youku.com/embed/XOTM2MzE1ODE2

 

 

分享到:
评论

相关推荐

    基于HTML5流程图绘制代码

    HTML5流程图绘制技术是一种利用现代浏览器的Canvas或者SVG元素,结合JavaScript库来实现动态、交互式的图形绘制功能。在本项目中,我们将探讨如何基于HTML5实现流程图和拓扑图的绘制,以及如何利用丰富的图形选项...

    jQuery网页在线流程图

    流程图的结构可以被编码为JSON对象,包含每个节点的信息(如ID、文本、连接关系等)。PHP后端可以处理这些数据,然后返回给前端的jQuery代码。 7. **绘制库的集成**:为了更高效地创建流程图,可以考虑集成现有的绘...

    GoJS的流程图

    这个库由Northwoods Software公司开发,提供了丰富的功能和灵活性,使得开发者能够轻松构建各种复杂的图形用户界面,如工作流、组织结构图、流程图等。在你的描述中提到的“GoJS的流程图”是一个基于GoJS的定制化...

    在web页面画流程图V1.0

    - 拓扑图是一种特定类型的流程图,通常用于表示网络、系统或程序之间的关系。在Web页面上创建拓扑图,有助于理解复杂系统的结构。 5. **HTML与Web服务器**: - HTML(超文本标记语言)是网页的基础,负责结构化...

    js生成流程图

    - 定义数据结构:通常以JSON格式存储流程图的信息,包括节点的位置、类型和连接关系。 - 加载库:根据选择的库,引入相应的JavaScript文件。 - 创建画布:在HTML中添加canvas元素或者使用SVG元素作为绘图区域。 ...

    将代码JS转换为图形graphviz美人鱼流程图

    "将代码JS转换为图形graphviz美人鱼流程图"的主题涉及使用JavaScript编程语言以及两个特定的开源工具:Graphviz和Mermaid。这两个工具可以帮助开发者将JavaScript代码转化为易于理解的图形表示。 Graphviz是一个...

    基于 HTML5 快速构建拓扑图1

    工作流程图和思维脑图则是利用 HTML5 的图形化能力,将复杂的流程或思维结构以直观的方式展现,帮助用户理解和规划任务。 总的来说,HTML5 技术与 HT 结合为快速构建拓扑图提供了强大支持,无论是在企业级应用还是...

    jsplumb 流程图

    - **布局管理**:内置自动布局算法,如树状布局、网格布局等,可帮助优化复杂流程图的显示。 - **连接样式**:支持箭头、曲线、直线等多种连接样式,以及自定义线条宽度、颜色、透明度等。 - **事件系统**:提供丰富...

    递进关系PPT流程图素材下载.rar

    本资源是一个关于“递进关系”的PPT流程图素材,适用于讲解一系列逐步深入或逐层展开的概念或过程。以下是对这个主题的详细解读: 1. **递进关系**:在逻辑或层次结构中,递进关系指的是一个概念或步骤建立在前一个...

    基于HTML5 Canvas的关系、拓扑图形化界面开发工具包,完全开源,参照于jtopo.zip

    基于HTML5 Canvas的关系和拓扑图形化界面开发工具包,如jtopo,为网络应用提供了构建网络拓扑图、流程图、组织结构图等复杂图形的能力。jtopo是一个JavaScript库,它完全开源,使得开发者可以自由地使用、修改和分发...

    利用Go.js实现在线的多节点流程图设计 本版本已经祛除了水印,而且是全本地运行的

    Go.js 是一个强大的JavaScript库,专门用于创建交互式的、可拖动的图形界面,尤其适合构建复杂的流程图和网络图表。在本项目中,我们利用Go.js实现了在线的多节点流程图设计,允许用户自由地布局和编辑流程图,且...

    js流程可视化设计myflow

    这使得流程图能够更准确地反映复杂的工作流程。 5. **工作流程图表样式**:myflow.js提供了一套样式代码,可以用来美化流程图,包括线条样式、节点样式等。这使得流程图在视觉效果上更加专业和吸引人。 在"myflow-...

    励志图书馆html5网站模板是一款适合书本图书在线销售网站模板下载。.zip

    【前端开发与HTML5的关系】 前端开发是指构建网站或应用的客户端部分,包括界面设计、交互逻辑和用户体验。HTML5作为前端开发的核心语言,与CSS3和JavaScript一起构成了前端的“三位一体”。开发者利用HTML5来构造...

    基于HTML5工程图学考试自动阅卷系统的研究.docx

    HTML5中的`&lt;canvas&gt;`元素是一种用于绘制图形的强大工具,它可以支持动态生成复杂的矢量图形,非常适合用来绘制工程图。通过结合JavaScript编程语言,开发者可以创建出交互性强、响应迅速的在线绘图工具,这为工程图...

    js画图 webvisio-js2.5

    它可以支持各种形状、线条和连接器,用于构建复杂的流程图或拓扑结构。绘图区具有缩放和平移功能,以便用户能够轻松查看和编辑大图。此外,该区域还具备动态响应设计,能在不同屏幕尺寸和设备上保持良好的显示效果。...

    echarts关系图

    在这些图表类型中,关系图(Graph)是一种特殊的数据展示方式,用于呈现数据之间的复杂关联和网络结构。 关系图在ECharts中通过`echarts.init()`初始化图表后,使用`series`配置项来创建。它能够帮助我们理解数据...

    HTML5前端技术

    HTML5的设计目的是为了更好地适应现代网络应用的需求,简化网页开发流程,提升用户体验,并减少对外部插件如Flash等的依赖。 #### 二、HTML5的新特性 1. **基于现有技术:**HTML5的新特性应该基于HTML、CSS、DOM...

    流程 节点自定义 连接线

    5. **网状流程**:节点之间的关系复杂,没有固定的顺序或结构,适用于表示自由流动的逻辑。 **dist文件夹** 在提供的文件列表中,"dist"通常包含编译后的jsPlumb库文件,可能包括minified(压缩)和未压缩版本。在...

    GoJs关系图谱动态添加节点图片头像等实例

    GoJs是一个强大的JavaScript库,专为创建交互式和可视化图表设计,如流程图、树图、关系图和力导向图。这个库提供了丰富的功能和灵活性,使得开发者能够轻松构建复杂的数据展示应用。在"GoJs关系图谱动态添加节点...

    JS插件绘制树状图

    4. GoJS:专为交互式图表设计,提供了丰富的API和示例,支持自定义行为和样式,特别适合构建业务流程图或流程图。 四、使用步骤 1. 引入库:在HTML文件中引入对应的JS库及其CSS文件。 2. 准备数据:根据插件要求,...

Global site tag (gtag.js) - Google Analytics