现在位置首页 / 开源代码 /正文

Js jquery实现组织结构图、人物关系图代码

作者: IT小兵 | 2013年6月18日| 热度:℃ | 评论: |参与:

更新:

目前项目中,采用echarts完成了人物关系图,更多灵活方便。请参考:


http://www.suchso.com/UIweb/echarts-jiaochegn-forcechart-tuozhai-gundongtiao-click-tip-scroll.html

更多教程请 搜索: echarts教程,打开我的博客 suchso.com 即可

参考:

[Echarts asp.net+ashx项目部署及代码实例(附demo)]

[ECharts--基于力导向布局图功能更完善的人物关系图插件扩展-增加横纵滚动条]

[ECharts--完善的人物关系图-连线点击事件/样式/标注文字及源代码]

[ECharts--基于力导向布局图功能更完善的人物关系图插件扩展-节点样式和点击事件]

[ECharts教程--基于力导向布局图功能更完善的人物关系图插件扩展开发(1)]

[基于html5、js的超强报表控件Echarts系列教程(2)-使用及环境部署]

[基于html5、js的超强报表控件Echarts系列教程(1)-与其他报表的区别和介绍]


上周的一个项目中,涉及到需要做一个人物关系图,该项目组的同事,找不到可以使用的js插件,

又不想使用flex、silverlight等客户端插件。叫我去帮帮忙,找一个js或者jquery的插件,展示一下人物关系。

本着乐于助人的精神,我就去了(这可是加班啊)。


image

向雷锋同志学习!!


首先, 我也没有接触js写的人物关系图。以前做类似 的,也是用silverlight做的。而且不是很好用好看。上次也收到很多意见,

不过后来不再维护了,就落下了不管了。


讲讲我的思路。

最主要的是我们需要请教于搜索引擎。

1.向搜索要知识:除非没有办法了,或项目安全上的考虑,我们一般都会进行搜索,找一些代码进行功能的开发。

类似的,首先会到搜索引擎上,查找相关的代码。这里我推荐使用google,google搜技术类的,科技类的还是很靠谱的,不像百度,

基本上都不靠谱。

首先,我搜索  jquery 人物关系图。google出现的结果,还是比较贴近我的需求的


ggg22.jpg

经验:建议大家搜索的时候一定要多看几页,好东西可能就在后面。现在搜索不一定看你的文章好坏,关键还看排名。。。


,百度出现的网站就不咋地了,可能百度偏重于它的百度知道。不过人物关系图,做的最好的,我看还是百度风云榜的兴趣图谱。

可惜无法开源使用。

baidu550.jpg


经过,不管的筛选,有下面几个比较靠谱的:

1)、Jit

2)、jQuery插件的官方网址为:http://www.graphdracula.net/

和同事沟通后,认为,graphdracula还是在我们修改、阅读的能力范围内的,就采用这个插件。

使用jQuery插件可以很方便的实现人物或任务之间的关系,代码如下:
首先引用js文件

<script type="text/javascript" src="js/raphael-min.js"></script>
<script type="text/javascript" src="js/dracula_graffle.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/dracula_graph.js"></script>

关系图的代码为:

<script type="text/javascript">
  window.onload = function () {
       var width = 400;   //定义宽度,也可以为 var width=$('#div').width()
       var height = 500;  //定义高度
       var g = new Graph();
   g.edgeFactory.template.style.directed = true;  //设置链接之间是否有箭头
       //以下为定义任务关系
       g.addEdge("张三", "李四");
       g.addEdge("张三", "王五");
       g.addEdge("张三", "二麻子");

       g.addEdge("李四", "李颖");
       g.addEdge("李四", "李英");

       g.addEdge("王五", "李海男");
       g.addEdge("王五", "张笑");

       var layouter = new Graph.Layout.Spring(g);
       layouter.layout();

       var renderer = new Graph.Renderer.Raphael('canvas', g, width, height);
       renderer.draw();
   }
   </script>


代码运行后,效果图为:
image

源代码下载:http://www.1100w.com/wp-content/uploads/2012/09/graph.rar
jQuery插件的官方网址为:http://www.graphdracula.net/


2.向朋友圈、朋友群要经验:

然后,就是对加入项目进行修改。首先修改的是样式。分析现在graphdracula的js代码结构,使用svg。

和美工交流class样式的修改。


鉴于项目的保密,我就参与了部分修改工作。




点击阅读本文所属分类的更多文章: 开源代码 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询