与 Google 组织结构图 API 相比，有没有更好的 javascript 组织结构图？ [关闭]答案

【问题标题】：Are there any better javascript org charts compared with Google Org Chart API? [closed]与 Google 组织结构图 API 相比，有没有更好的 javascript 组织结构图？ [关闭]
【发布时间】：2011-04-24 19:20:35
【问题描述】：

我们正在使用google org chart API to display our org charts。这很好用，但我们需要一些支持：

一个人向多个经理汇报
一个职能领域的联席主管。

是否有任何竞争工具可以更好地支持上述内容。

注意：对于 Gorka LLona，他在下面的一个答案中建议了此解决方案，我发现了一些错误，这是我在使用您的测试示例时遇到的问题的屏幕截图。

【问题讨论】：

嗨，你最后用的是什么？你的标准符合我的标准。谢谢。
@ngen - 仍在使用 Google Org Chart API（并且仍然缺少上述功能:()
@leora - Llona 先生更新了他的图书馆。你应该再试一次。
让你说1.0.0beta1版本刚刚发布。这是第一个市长编号版本的发布。包括更多类型的节点、更好的渲染、解耦 JSON 定义的组织结构图（例如，用于动态生成结构）、更简单的调用形式、图表缩放、拖动和打印到 PDF（这样您就可以渲染固定宽度的 DIV 页面内的宽图表），以及同一页面上的多个不同结构的图表，以及其他一些次要功能。图书馆的新主页：librerias.logicas.org/lib_gg_orgchart
我使用 Jit JS 制作了这个：github.com/rlopez0689/OrgChartJit

标签： javascript google-visualization orgchart

【解决方案1】：

祝你好运

我会保持简短。不，没有。无论如何都不是Javascript。您可能会觉得 http://www.cogmap.com/ 很有趣，但它不是您可以在自己的页面上用作控件的东西。

就我个人而言，我会关注一些丰富的嵌入式媒体，例如 Silverlight 或 Flash。这对你来说是一个选择吗？

摄像头

【讨论】：

有什么好的silverlight或flash的例子吗？

【解决方案2】：

简而言之，@Cam 是对的，但您不一定需要查看 Silverlight 或 Flash。我建议查看Raphael.js 库。它比您所追求的要低级，但 API 非常简单。

尤其是Graffle example 将是一个很好的起点。

【讨论】：

这看起来不像谷歌组织结构图那么专业

【解决方案3】：

如果您正在寻找像 google 那样作为服务的替代品，我认为您没有。如果您正在寻找可以为您创建这些图表的库（js、php、flash）（您可以将库安装在服务器中，并创建一个简单的界面来创建图表对象）您可以搜索older posts in SO 或searching some blog posts in google.

如果您只对组织结构图创建者感兴趣，只是为了完成工作，我认为没有什么比 Creately's solutions 更好的了。如果您只需要创建一个图表，并且不想为此付费，您可以使用Lovely Charts。

【讨论】：

我想要一些可以以编程方式生成组织结构图的东西
好的，现在我知道您想以编程方式生成图表。您可以尝试 creately 的 API (developer.creately.com/creately/Creately_API) 看看是否有可能创建组织图，或者在 google 中搜索“组织图创建者”，例如 codeproject.com/KB/cs/Org_Chart_Generator.aspx

【解决方案4】：

您可以使用 Jit（JavaScript Infoviz 工具包）there's a good example here。这是我在公司创建组织结构图时使用的（由将 AD 关系转换为 JSON 的 PHP 脚本支持）。

【讨论】：

这看起来不像谷歌组织结构图那么专业
@ooo - 这是我做的样子：awesomescreenshot.com/0736a7o38 & awesomescreenshot.com/00f6a7p88
@Beau：你的链接好像失效了。
您可以重新托管您的组织结构图吗？我正在考虑使用 Jit，但需要更专业的外观。谢谢。
我重新托管了图片；给你：i.imgur.com/M99PA.png（我认为第二张图片是垂直而不是水平方向）

【解决方案5】：

您可以使用 Graphviz 和 Javascript 实现解决方案。 Graphviz 可以轻松处理您的所有三个条件。在 graphviz 中创建图形，并以 SVG 格式输出。从那里，扔一些javascript。例如a partial family tree of Charlemagne，它本质上是一个非常复杂的组织结构图。

【讨论】：

查理曼大树上的404

【解决方案6】：

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

【讨论】：

【解决方案7】：

对于那些正在寻找一个简单的开源 Javascript 组织图库的人：

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

此库满足原始问题的要求 #1 和 #2。

查看该站点以获取一些示例并下载：

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

如果你觉得有用，请告诉我。

【讨论】：

这很有趣，但我发现了一些错误。我有一个问题的屏幕截图，向您展示我遇到的问题
请您回复我上面提到的错误
lib_gg_orgchart 的新 Web 主页是 librerias.logicas.org/lib_gg_orgchart。新版本即将推出，修复一些错误并整合协作者的更改。

【解决方案8】：

D3 - http://d3js.org/

这是一个例子——它们有点难找

http://bl.ocks.org/1061834

【讨论】：

这是我用 d3.js robinl.github.io/d3_orgchart_yammer/website制作的一个例子
另一个链接直接有效：mbostock.github.io/d3/talk/20111018/tree.html
@RobinL，太漂亮了。。我一直在寻找你的确切图表。我能够得到树代码，但不知道如何显示用户详细信息悬停在他们身上..你是怎么做到的？
D3 将数据行绑定到节点。每行数据都由一个字典表示。为了使弹出窗口正常工作，我将此字典传递给把手以呈现为 html，然后写入 id 为“#profile-template”的 div。相关代码在这里：github.com/RobinL/d3_orgchart_yammer/blob/master/website/js/…
@RobinL，这是我的code，它从这个abc2.json 文件中读取数据。我需要在右侧显示电子邮件、电话和照片等详细信息，as such。我应该创建一个吗？我是 web-dev 的菜鸟，我意识到这要求很多，所以如果你有兴趣编码，我可以给你 stackoverflow 赏金或亚马逊礼品卡

【解决方案9】：

www.orgchartasp.net 也将帮助您构建/查看 orgcharts

http://orgchartasp.net/Sample.aspx

http://orgchartasp.net/Sample1.aspx（顶部有图片）

http://orgchartasp.net/Sample1.aspx（左侧有图片）

这是一个 .net 库，可帮助您在后端构建层次结构并在客户端构建 javascript。

【讨论】：

【解决方案10】：

lib_gg_orgchart 的新 Web 主页是 http://librerias.logicas.org/lib_gg_orgchart。我把旧信息放在这里：对于那些寻找简单的开源 Javascript 组织图库的人：我刚刚发布了 lib_gg_orgchart。它使用 JSON 输入并使用 Raphael 绘制图表。查看该站点以获取一些示例并下载。如果你觉得有用，请告诉我。新版本即将推出，修复一些错误并整合协作者的更改。

【讨论】：

我试过了，效果很好——作者反应灵敏，乐于助人，这是一个真正的优点！ +1
这是一个使用这个库的方法，它带有一个 Sharepoint List 而不是 json。我没试过，但我很感兴趣。 sharepoint.stackexchange.com/questions/89772/…

【解决方案11】：

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

这很好，但我们需要一些支持：

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

1 和 2 由 Google 支持并且运行良好，但需要满足这 3 个要求（水平和垂直布局）

【讨论】：

【解决方案12】：

不确定你是否还在考虑考虑这是 2 岁，但我处于同样的情况并发现了这个：

y文件 Interactive OrgChart Demo, Visualizing Orgcharts with JavaScript

我发现的其他一些：

jOrgChart github.com/wesnolte/jOrgChart 和 github.com/dabeng/OrgChart

使用 JS 的组织结构图 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 [d.x + rectW / 2, d.y + rectH / 2];
});

var svg = d3.select("#body").append("svg").attr("width", 1000)
    .attr("height", 1000).append("g")
    .attr("transform", "translate(" + 350 + "," + 20 + ")");

这是我开始的一个 jsFiddle： jsfiddle.net/augburto/YMa2y/

【讨论】：

感谢您的建议 .. 我最终围绕 google 组织结构图进行了一些自定义编码以获得我需要的东西（联合负责人，双重报告线），但我一直在寻找更清洁的解决方案
只是想说明我的情况，我最终使用了 D3.js，和你一样，我围绕它进行了自定义编码。
@BGM 刚刚用 3.4.3 测试了我的 jsFiddle，它工作正常。不确定为什么会出现该错误 - 检查 D3 并查看是否可以找到 nodeSize 函数？
@aug - 啊，我明白了 - 我添加了一个额外的脚本 [我感觉头晕 - 对不起！]。我通过将小提琴放在一个单独的 js 文件中并在主体之后加载它来使其工作。有用！谢谢！
@aug- 有没有像 yfiles 一样的开源库？

【解决方案13】：

在商业场景中，yFiles for HTML 无疑为drawing organization charts 提供了所需的灵活性：

有一个organization chart demo online 展示了如何使用该库（实际上是一个通用的绘图库）来实现这一点：

库中的自动布局算法既可以处理纯粹的层次树结构，也可以处理“近树”结构，其中元素可以有多个父级，例如为管理团队或多家母公司建模。

该库还具有可以处理具有任意循环复杂度的通用图的布局算法和可用的边缘路由算法，即使是罕见的边缘情况也可以很好地可视化，其中不属于严格分层树结构的边缘可以也被路由（例如，指示额外的关系层） - 但是，在撰写本文时，这不是上面链接的演示的一部分。然而，更通用的layout demo 显示了几种布局算法及其许多选项。

免责声明：我为创建该库的公司工作，但是我不代表我的雇主。我的想法、想法和答案都是我自己的。

【讨论】：