You could use Jit (The JavaScript Infoviz Toolkit), there's a good example here. This is what I used to create an org chart at my company (backed by a PHP script that turns AD relationships into JSON).
In short @Cam is right, but you don't necessarily need to look at Silverlight or Flash. I would recommend looking into the Raphael.js library. It's more low-level than what you seem to be after, but the API is pretty simple.
In particular the Graffle example would be a good place to start.
New web home for lib_gg_orgchart is http://librerias.logicas.org/lib_gg_orgchart. I put here the old info: For those looking for a simple, open-source Javascript Organizational Chart library: I've just published lib_gg_orgchart. It uses a JSON input and draws the chart using Raphael. Take a look at the site for some examples and download. If you find it useful, please let me know. New version will come soon, fixing some bugs and integrating collaborator's changes.
If you're looking for alternatives that works as a service like google does, I don't think you have any. If you're looking for libraries (js, php, flash) that can create these charts for you (you can install the libs in a server, and create a simple interface to create the chart objects) you can search for older posts in SO or by searching some blog posts in google.
If you're only interested in an Org Chart creator, just to get the work done, nothing beats Creately's solutions in my opinion. If you need to create just one diagram, and don't want to pay for it, you can use Lovely Charts.
There is an organization chart demo online that shows how this can be implemented with the library (which is in fact a general purpose graph drawing library):
The automatic layout algorithms in the library can both deal with purely hierarchic tree structures, but can also deal with "near-tree" structures, where elements can have multiple parents, e.g. to model a management team or multiple parent companies.
The library also has layout algorithms that can deal with generic graphs with arbitrary cyclic complexity and with the edge routing algorithms available, even rare edge cases can be visualized nicely, where edges that do not belong to the strict hierarchical tree-structure can be routed, too (e.g. to indicate an additional layer of relationships) - this is not part of the demo linked above, though, at the time of writing. The more generic layout demo however shows several of the layout algorithms and many of their options in action.
Disclaimer: I work for the company that creates that library, however on SO I do not represent my employer. My comments, thoughts, and answers are my own.
I'll keep this short. No there isn't. Not with Javascript anyway. You might find http://www.cogmap.com/ interesting but it's not something you can use as a control on your own pages.
Personally, I'd be looking at some of the rich embedded media like Silverlight or Flash. Is that an option for you?
You can implement a solution with Graphviz and Javascript. Graphviz easily handles all three of your conditions. Create the graph in graphviz, and have it output in SVG format. From there, throw some javascript on it. For example, a partial family tree of Charlemagne, which is essentially an extraordinarily complex org chart.
发布评论
评论（13）
D3 - http://d3js.org/
这是一个示例 - 它们有点难找到
http://mbostock.github.io/d3/talk/20111018/tree.html
D3 - http://d3js.org/
Here is an example - they are a bit hard to find
http://mbostock.github.io/d3/talk/20111018/tree.html
您可以使用 Jit（JavaScript Infoviz 工具包），这里有一个很好的示例< /a>.这就是我在公司创建组织结构图时使用的方法（由 PHP 脚本支持，可将 AD 关系转换为 JSON）。
You could use Jit (The JavaScript Infoviz Toolkit), there's a good example here. This is what I used to create an org chart at my company (backed by a PHP script that turns AD relationships into JSON).
不确定你是否仍在寻找，考虑到这已经是 2 年前的事了，但我处于同样的情况并发现了这个：
yFILES
交互式 OrgChart 演示，使用 JavaScript 可视化 Orgcharts
我发现的其他一些：
jOrgChart
github.com/wesnolte/jOrgChart 和 github.com/dabeng/OrgChart
使用 JS 的组织结构图
jvloenen.home.xs4all.nl/orgchart/
我最终使用了D3.js 来做到这一点。我使用他们的 TreeLayout 并对其进行编辑以满足我的需要。这是一些示例代码：
这是我开始的 jsFiddle：
jsfiddle.net/augburto/YMa2y/
Not sure if you're still looking considering this is 2 years old but I'm in the same situation and found this:
yFILES
Interactive OrgChart Demo, Visualizing Orgcharts with JavaScript
Some other ones I have found:
jOrgChart
github.com/wesnolte/jOrgChart and github.com/dabeng/OrgChart
Organization Charts using JS
jvloenen.home.xs4all.nl/orgchart/
I ended up using D3.js to do it. I use their TreeLayout and edited it to fit my needs. Here is some sample code:
Here is a jsFiddle of what I started:
jsfiddle.net/augburto/YMa2y/
简而言之，@Cam 是对的，但您不一定需要查看 Silverlight 或 Flash。我建议查看 Raphael.js 库。它比您想象的要低级，但 API 非常简单。
特别是 Graffle 示例 将是一个很好的起点。
In short @Cam is right, but you don't necessarily need to look at Silverlight or Flash. I would recommend looking into the Raphael.js library. It's more low-level than what you seem to be after, but the API is pretty simple.
In particular the Graffle example would be a good place to start.
lib_gg_orgchart 的新网站主页为 http://librerias.logicas.org/lib_gg_orgchart。我把旧信息放在这里：对于那些寻找简单、开源 Javascript 组织图表库的人：我刚刚发布了 lib_gg_orgchart。它使用 JSON 输入并使用 Raphael 绘制图表。查看该网站的一些示例并下载。如果您觉得它有用，请告诉我。新版本即将推出，修复了一些错误并集成了合作者的更改。
New web home for lib_gg_orgchart is http://librerias.logicas.org/lib_gg_orgchart. I put here the old info: For those looking for a simple, open-source Javascript Organizational Chart library: I've just published lib_gg_orgchart. It uses a JSON input and draws the chart using Raphael. Take a look at the site for some examples and download. If you find it useful, please let me know. New version will come soon, fixing some bugs and integrating collaborator's changes.
对于那些寻找简单、开源 Javascript 组织图表库的人：
我刚刚发布了 lib_gg_orgchart。它使用 JSON 输入并使用 Raphael 绘制图表。
该库满足原始问题的要求#1 和#2。
查看该网站上的一些示例并下载：
http://librerias.logicas.org/lib_gg_orgchart /index.html
如果您觉得有用，请告诉我。
For those looking for a simple, open-source Javascript Organizational Chart library:
I've just published lib_gg_orgchart. It uses a JSON input and draws the chart using Raphael.
This library satisfies requirements #1 and #2 of the original question.
Take a look at the site for some examples and download:
http://librerias.logicas.org/lib_gg_orgchart/index.html
If you find it useful, please let me know.
如果您正在寻找像谷歌一样作为服务的替代品，我认为您没有。如果您正在寻找可以为您创建这些图表的库（js、php、flash）（您可以在服务器中安装库，并创建一个简单的界面来创建图表对象），您可以搜索 SO 中的旧帖子 或 在 google 中搜索一些博客文章。
如果您只对组织结构图创建器感兴趣，只是为了完成工作，那么没有什么比我认为Creately的解决方案。如果您只需要创建一张图表，并且不想付费，则可以使用Lovely Charts。
If you're looking for alternatives that works as a service like google does, I don't think you have any. If you're looking for libraries (js, php, flash) that can create these charts for you (you can install the libs in a server, and create a simple interface to create the chart objects) you can search for older posts in SO or by searching some blog posts in google.
If you're only interested in an Org Chart creator, just to get the work done, nothing beats Creately's solutions in my opinion. If you need to create just one diagram, and don't want to pay for it, you can use Lovely Charts.
在商业场景中 yFiles for HTML 无疑为 绘制组织结构图：
有一个 在线组织图表演示，展示了如何使用该库（实际上是一个通用图形绘制库）来实现这一点：
库中的自动布局算法既可以处理纯层次树结构，也可以处理“近树”结构，其中元素可以有多个父级，例如对一个管理团队或多个管理团队进行建模。母公司。
该库还具有布局算法，可以处理具有任意循环复杂度的通用图，并且通过可用的边缘路由算法，甚至可以很好地可视化罕见的边缘情况，其中可以路由不属于严格分层树结构的边缘，太（例如，指示额外的关系层） - 不过，在撰写本文时，这不是上面链接的演示的一部分。然而，更通用的 布局演示 显示了几种布局算法及其许多选项在行动中。
免责声明：我为创建该库的公司工作，但是我并不代表我的雇主。我的评论、想法和答案都是我自己的。
In a commercial scenario yFiles for HTML certainly provides the required flexibility for drawing organization charts:
There is an organization chart demo online that shows how this can be implemented with the library (which is in fact a general purpose graph drawing library):
The automatic layout algorithms in the library can both deal with purely hierarchic tree structures, but can also deal with "near-tree" structures, where elements can have multiple parents, e.g. to model a management team or multiple parent companies.
The library also has layout algorithms that can deal with generic graphs with arbitrary cyclic complexity and with the edge routing algorithms available, even rare edge cases can be visualized nicely, where edges that do not belong to the strict hierarchical tree-structure can be routed, too (e.g. to indicate an additional layer of relationships) - this is not part of the demo linked above, though, at the time of writing. The more generic layout demo however shows several of the layout algorithms and many of their options in action.
Disclaimer: I work for the company that creates that library, however on SO I do not represent my employer. My comments, thoughts, and answers are my own.
你好，
我就长话短说吧。不，没有。反正 JavaScript 不行。您可能会发现 http://www.cogmap.com/ 很有趣，但它不是您可以用作控件的东西在您自己的页面上。
就我个人而言，我会考虑一些丰富的嵌入式媒体，例如 Silverlight 或 Flash。这是你的选择吗？
凸轮
G'Day ooo
I'll keep this short. No there isn't. Not with Javascript anyway. You might find http://www.cogmap.com/ interesting but it's not something you can use as a control on your own pages.
Personally, I'd be looking at some of the rich embedded media like Silverlight or Flash. Is that an option for you?
Cam
您可以使用 Graphviz 和 Javascript 实现解决方案。 Graphviz 可以轻松处理您的所有三种情况。在 graphviz 中创建图形，并以 SVG 格式输出。从那里开始，在上面添加一些 javascript。例如，查理曼大帝的部分家谱，它本质上是一个极其复杂的组织结构图。
You can implement a solution with Graphviz and Javascript. Graphviz easily handles all three of your conditions. Create the graph in graphviz, and have it output in SVG format. From there, throw some javascript on it. For example, a partial family tree of Charlemagne, which is essentially an extraordinarily complex org chart.
您可以使用特里树： https://github.com/mikedeboer/trie 或 https://github.com/odhyan/trie Mootools 也有 MIF.Tree：http://mootools.net/forge/p/mif_tree，显示树结构
You could use a trie: https://github.com/mikedeboer/trie or https://github.com/odhyan/trie Mootools also has MIF.Tree: http://mootools.net/forge/p/mif_tree, which displays tree structures
那么 www.orgchartasp.net 还将帮助您构建/查看 orgcharts
http://orgchartasp.net/Sample.aspx
http://orgchartasp.net/Sample1.aspx（图像位于顶部）
http://orgchartasp.net/Sample1.aspx（左侧有图像）
这是一个 .net 库，它将帮助您在后端构建层次结构并在客户端构建 JavaScript。
Well www.orgchartasp.net will also help you build / view orgcharts
http://orgchartasp.net/Sample.aspx
http://orgchartasp.net/Sample1.aspx (with images on the top)
http://orgchartasp.net/Sample1.aspx (with images on the left)
this is a .net library which will help you build the hierarchy at the backend and javascript at the client side.
我也在使用 google 组织结构图 API 来显示我们的组织结构图。
https://developers.google.com/chart/interactive/docs/examples
这很有效，但我们需要一些支持：
1）源是一个 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 要求（水平和垂直布局）
I too am using google org chart API to display our org charts.
https://developers.google.com/chart/interactive/docs/examples
This works well but we need something that supports:
1)Source is a Google Spreadsheet document that houses the data for the org chart.
2)When a new person is added to the data, an new node is created.
3) Horizontal layout for 1st and 2nd level as well as vertical layouts lower levels. Similar to this:
http://google-visualization-api-issues.googlecode.com/issues/attachment?aid=8730161231813373288&name=orgchart.png&token=RT7QPbsD-WkveIgybTZyXi48g84%3A1361392544450&inline=1
1 and 2 are supported by Google and working great, but need something for that 3 requirement (Horizontal and Vertical layouts)