与Google Org Chart API相比,有没有更好的JavaScript org图表?

我们正在使用谷歌组织结构图API来显示我们的组织结构图 。 这工作得很好,但我们需要一些支持:

  1. 一个人向多个经理报告
  2. 一个职能领域的负责人。

有没有什么竞争的工具可以为上述提供更好的支持。


注:对于Gorka LLona,谁在下面的答案中提出了这个解决scheme,我发现了一些错误,这里是我正在使用你的testing示例运行的问题的屏幕截图。

在这里输入图像说明

您可以使用Jit(The JavaScript Infoviz Toolkit), 这里有一个很好的例子 。 这是我用来在我的公司创build组织结构图(由将AD关系转换为JSON的PHP脚本支持)。

D3 – http://d3js.org/

这是一个例子 – 他们有点难找

http://bl.ocks.org/1061834

不知道你是否还在考虑这是2岁,但我处于相同的情况,并发现这一点:

yFILES http://live.yworks.com/demobrowser/index.html#Organization-Charts

其他一些我发现:

jOrgChart http://dl.dropboxusercontent.com/u/4151695/html/jOrgChart/example/example.html

组织结构图使用JS http://jvloenen.home.xs4all.nl/orgchart/

我结束了使用D3.js来做到这一点。 我使用他们的TreeLayout并编辑它以适应我的需要。 这是一些示例代码:

var tree = d3.layout.tree().nodeSize([70, 40]); var diagonal = d3.svg.diagonal() .projection(function (d) { return [dx + rectW / 2, dy + rectH / 2]; }); var svg = d3.select("#body").append("svg").attr("width", 1000) .attr("height", 1000).append("g") .attr("transform", "translate(" + 350 + "," + 20 + ")"); 

这里是我开始的jsFiddle: http : //jsfiddle.net/augburto/YMa2y/

总之@Cam是正确的,但你不一定需要看Silverlight或Flash。 我会build议寻findRaphael.js库。 它比你看起来更低级,但是API非常简单。

特别是Graffle的例子将是一个很好的开始。

lib_gg_orgchart的新Web主页是http://librerias.logicas.org/lib_gg_orgchart 。 我在这里把旧的信息放在这里:对于那些寻找一个简单的,开源的Javascript组织结构图库:我刚刚发布了lib_gg_orgchart。 它使用JSONinput并使用Raphael绘制图表。 看看网站上的一些例子,并下载。 如果您觉得有用,请告诉我。 新版本即将推出,修复一些错误并整合协作者的变化。

对于那些寻找一个简单的,开源的Javascript组织结构图库:

我刚刚发布了lib_gg_orgchart。 它使用JSONinput并使用Raphael绘制图表。

该库符合原始问题的要求#1和#2。

看看这个网站的一些例子,并下载:

http://librerias.logicas.org/lib_gg_orgchart/index.html

如果您觉得有用,请告诉我。

我会build议orgplot.codeplex.com,但它依赖于HTML5canvas。

两个例子:

  • 组织树与图像节点
  • 简单的文本节点组织树

在站点上方的文档选项卡上查看他们的快速代码示例。

在商业场景中,HTML的yFiles当然提供了所需的灵活性:

在线有一个简单的组织结构图演示 ,展示了如何用库(这实际上是一个通用的graphics绘制库)来实现:

组织结构图演示截图

库中的自动布局algorithm既可以处理纯粹的分层树结构,也可以处理元素可以有多个父母的“近树”结构,例如pipe理团队或多个母公司的模型。

该库还具有可以处理具有任意循环复杂度的通用图的布局algorithm,并且可以使用边缘路由algorithm,甚至罕见的边缘情况可以很好地可视化,其中不属于严格的层次树结构的边可以被路由, (例如,表明一个额外的关系层) – 这不是上面链接的演示的一部分,但在撰写本文时。 更通用的布局演示,但是显示了几个布局algorithm和他们的许多选项的行动。

免责声明 :我为创build该图书馆的公司工作,但是因此我不代表我的雇主。 我的意见,想法和答案是我自己的。

如果你正在寻找像谷歌这样的服务的替代品,我不认为你有任何。 如果您正在寻找可以为您创build这些图表的库(js,php,flash)(您可以将库安装到服务器中,并创build一个简单的界面来创build图表对象),则可以在SO中search较早的post或通过在谷歌search一些博客文章 。

如果您只对Org Chart 创build者感兴趣,为了完成工作,我认为没有什么比创build解决scheme更胜一筹 。 如果您只需创build一个图表,而不想为此付费,则可以使用Lovely Charts 。

您可以使用Graphviz和Javascript实现解决scheme。 Graphviz可以轻松处理所有三种情况。 在graphviz中创buildgraphics,并以SVG格式输出。 从那里,扔一些JavaScript。 例如, 查理曼(Charlemagne)的部分家谱,实质上是一个非常复杂的组织结构图。

您可以使用trie: https : //github.com/mikedeboer/trie或https://github.com/odhyan/trie Mootools也有MIF.Tree: http ://mootools.net/forge/p/mif_tree,显示树结构

那么www.orgchartasp.net也将帮助您build立/查看orgcharts

http://orgchartasp.net/Sample.aspx

http://orgchartasp.net/Sample1.aspx (图片在上面)

http://orgchartasp.net/Sample1.aspx (左图)

这是一个.net库,它将帮助您在后端构build层次结构,在客户端构buildJavaScript。

G'Day噢

我会保持这个简短。 没有没有。 不用Javascript。 你可能会发现http://www.cogmap.com/有趣,但它不是你可以在自己的页面上用作控件的东西。;

就个人而言,我将会看到一些像Silverlight或Flash这样的丰富的embedded式媒体。 这是你的select吗?

凸轮

我也使用谷歌组织图API来显示我们的组织结构图。 https://developers.google.com/chart/interactive/docs/examples

这工作得很好,但我们需要一些支持:

1)来源是Google电子表格文档,其中包含组织结构图的数据。 2)当新的人被添加到数据中时,创build一个新的节点。 3)一级和二级水平布局,以及较低级别的垂直布局。 与此类似: http : //google-visualization-api-issues.googlecode.com/issues/attachment?aid=8730161231813373288&name=orgchart.png&token=RT7QPbsD-WkveIgybTZyXi48g84%3A1361392544450&inline=1

1和2是由谷歌支持和工作很好,但需要的东西3(水平和垂直布局)