blocks|key|296801|text|G‘’Day|type|unstyled|depth|inlineStyleRanges|entityRanges|data|296802|我就长话短说。不，没有。至少在Javascript中没有。您可能会发现http://www.cogmap.com/很有趣，但它不是您可以在自己的页面上用作控件的东西。|offset|length|296803|就我个人而言，我会关注一些丰富的嵌入式媒体，比如Silverlight或Flash。这对你来说是一个选择吗？|296804|凸轮|296805|entityMap|0|LINK|mutability|MUTABLE|url|http://www.cogmap.com/^0|0|Z|M|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

G'Day ooo

I'll keep this short. No there isn't. Not with Javascript anyway. You might find <a href="http://www.cogmap.com/" rel="nofollow">http://www.cogmap.com/</a> 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

blocks|key|294117|text|简而言之，@Cam是对的，但你不一定要看Silverlight或Flash。我建议您研究一下Raphael.js库。它比你想要的更低级，但是API非常简单。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|294118|特别是，Graffle+example将是一个很好的起点。|294119|entityMap|0|LINK|mutability|MUTABLE|url|http://raphaeljs.com/graffle.html|1^0|1A|A|0|0|4|F|1|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@$A|P|B|Q|1|R]]|C|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|F|3|-4|5|6|7|W|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|M]]]]

In short @Cam is right, but you don't necessarily need to look at Silverlight or Flash. I would recommend looking into the <a href="http://raphaeljs.com/graffle.html" rel="noreferrer">Raphael.js</a> library. It's more low-level than what you seem to be after, but the API is pretty simple.

In particular the <a href="http://raphaeljs.com/graffle.html" rel="noreferrer">Graffle example</a> would be a good place to start.

blocks|key|3017019|text|如果你正在寻找像谷歌那样可以作为服务工作的替代方案，我认为你没有。如果您正在寻找可以为您创建这些图表的库(js、php、flash)+(您可以在服务器上安装这些库，并创建一个简单的界面来创建图表对象)，您可以搜索older+posts+in+SO或by+searching+some+blog+posts+in+google。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3017020|如果您只对组织结构图创建者感兴趣，那么在我看来，没有什么比Creately's+solutions更好的了。如果你只需要创建一个图表，并且不想花钱，你可以使用Lovely+Charts。|3017021|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/2800259/what-good-alternatives-are-there-to-google-charts|1|http://tutorialblog.org/free-chart-and-graph-solutions/|2|http://creately.com/Draw-Organizational-Charts-Online|3|http://www.lovelycharts.com/^0|G|2|2Y|H|0|3J|Z|1|0|A|3|T|K|2|27|D|3|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@$9|Y|A|Z|1|10]|$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@$9|17|A|18|1|19]|$9|1A|A|1B|1|1C]]|E|$]]|$1|H|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]|P|$5|K|L|M|E|$N|Q]]|R|$5|K|L|M|E|$N|S]]|T|$5|K|L|M|E|$N|U]]]]

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 <a href="https://stackoverflow.com/questions/2800259/what-good-alternatives-are-there-to-google-charts">older posts in SO</a> or by <a href="http://tutorialblog.org/free-chart-and-graph-solutions/" rel="nofollow noreferrer">searching some blog posts in google</a>.

If you're only interested in an Org Chart creator, just to get the work done, nothing beats <a href="http://creately.com/Draw-Organizational-Charts-Online" rel="nofollow noreferrer">Creately's solutions</a> in my opinion. If you need to create just one diagram, and don't want to pay for it, you can use <a href="http://www.lovelycharts.com/" rel="nofollow noreferrer">Lovely Charts</a>.

blocks|key|294965|text|您可以使用Jit+(+JavaScript+Infoviz+Toolkit)、there's+a+good+example+here。这是我用来在我的公司创建组织结构图(由PHP脚本支持，将AD关系转换为JSON)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|294966|entityMap|0|LINK|mutability|MUTABLE|url|http://thejit.org/static/v20/Jit/Examples/Spacetree/example1.html^0|13|R|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

You could use Jit (The JavaScript Infoviz Toolkit), <a href="http://thejit.org/static/v20/Jit/Examples/Spacetree/example1.html" rel="noreferrer">there's a good example here</a>. This is what I used to create an org chart at my company (backed by a PHP script that turns AD relationships into JSON).

blocks|key|3231217|text|您可以使用Graphviz和Javascript实现解决方案。Graphviz可以轻松处理这三种情况。在graphviz中创建图形，并将其输出为SVG格式。从那里开始，抛出一些javascript在上面。例如，a+partial+family+tree+of+Charlemagne，它本质上是一个极其复杂的组织结构图。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3231218|entityMap|0|LINK|mutability|MUTABLE|url|http://www.graphviz.org/Gallery.php|1|http://familynexus.org/__graph_2000.svg^0|5|8|0|2X|10|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

You can implement a solution with <a href="http://www.graphviz.org/Gallery.php" rel="nofollow">Graphviz</a> 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 href="http://familynexus.org/__graph_2000.svg" rel="nofollow">a partial family tree of Charlemagne</a>, which is essentially an extraordinarily complex org chart.

blocks|key|295012|text|您可以使用trie：https://github.com/mikedeboer/trie或https://github.com/odhyan/trie+Mootools也有MIF.Tree：http://mootools.net/forge/p/mif_tree，它显示树结构|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|295013|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/mikedeboer/trie|1|https://github.com/odhyan/trie|2|http://mootools.net/forge/p/mif_tree^0|A|Y|0|19|U|1|2N|10|2|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]|$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|-4|5|6|7|Z|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]|N|$5|G|H|I|C|$J|O]]]]

You could use a trie: <a href="https://github.com/mikedeboer/trie" rel="nofollow">https://github.com/mikedeboer/trie</a> or <a href="https://github.com/odhyan/trie" rel="nofollow">https://github.com/odhyan/trie</a> Mootools also has MIF.Tree: <a href="http://mootools.net/forge/p/mif_tree" rel="nofollow">http://mootools.net/forge/p/mif_tree</a>, which displays tree structures

blocks|key|291852|text|对于那些正在寻找简单的开源Javascript组织图表库的人：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|291853|我刚刚发布了lib_gg_orgchart。它使用JSON输入，并使用Raphael绘制图表。|291854|这个库满足了原始问题的#1和#2要求。|291855|看看这个网站上的一些例子，然后下载：|291856|http://librerias.logicas.org/lib_gg_orgchart/index.html|offset|length|291857|如果你觉得有用，请让我知道。|291858|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|1J|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|X|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|Y|8|@]|9|@$J|Z|K|10|1|11]]|A|$]]|$1|L|3|M|5|6|7|12|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|I]]]]

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:

<a href="http://librerias.logicas.org/lib_gg_orgchart/index.html" rel="nofollow">http://librerias.logicas.org/lib_gg_orgchart/index.html</a>

If you find it useful, please let me know.

blocks|key|295037|text|D3+-+http://d3js.org/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|295038|下面是一个例子--它们有点难找|295039|http://bl.ocks.org/1061834|295040|entityMap|0|LINK|mutability|MUTABLE|url|http://d3js.org/|1^0|5|G|0|0|0|0|Q|1|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|H|3|-4|5|6|7|Z|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|G]]]]

D3 - <a href="http://d3js.org/" rel="noreferrer">http://d3js.org/</a> 

Here is an example - they are a bit hard to find 

<a href="http://bl.ocks.org/1061834" rel="noreferrer">http://bl.ocks.org/1061834</a>

blocks|key|295042|text|www.orgchartasp.net还将帮助您构建/查看组织结构图|type|unstyled|depth|inlineStyleRanges|entityRanges|data|295043|http://orgchartasp.net/Sample.aspx|offset|length|295044|http://orgchartasp.net/Sample1.aspx+(图像在顶部)|295045|http://orgchartasp.net/Sample1.aspx+(左边有图片)|295046|这是一个.net库，它将帮助你在后端构建层次结构，在客户端构建javascript。|295047|entityMap|0|LINK|mutability|MUTABLE|url|1|http://orgchartasp.net/Sample1.aspx|2^0|0|0|Y|0|0|0|Z|1|0|0|Z|2|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@$D|11|E|12|1|13]]|A|$]]|$1|H|3|I|5|6|7|14|8|@]|9|@$D|15|E|16|1|17]]|A|$]]|$1|J|3|K|5|6|7|18|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|C]]|S|$5|O|P|Q|A|$R|T]]|U|$5|O|P|Q|A|$R|T]]]]

Well www.orgchartasp.net will also help you build / view orgcharts 

<a href="http://orgchartasp.net/Sample.aspx" rel="nofollow">http://orgchartasp.net/Sample.aspx</a> 

<a href="http://orgchartasp.net/Sample1.aspx" rel="nofollow">http://orgchartasp.net/Sample1.aspx</a> (with images on the top)

<a href="http://orgchartasp.net/Sample1.aspx" rel="nofollow">http://orgchartasp.net/Sample1.aspx</a> (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.

blocks|key|3017130|text|http://librerias.logicas.org/lib_gg_orgchart是lib_gg_orgchart的新网站主页。我在这里提供了旧的信息:对于那些正在寻找一个简单的、开源的Javascript组织图库的人:我刚刚发布了lib_gg_orgchart。它使用JSON输入，并使用Raphael绘制图表。请查看该网站以获取一些示例和下载。如果你觉得有用，请让我知道。新版本很快就会发布，修复了一些bug，并集成了collaborator的更改。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3017131|entityMap|0|LINK|mutability|MUTABLE|url|http://librerias.logicas.org/lib_gg_orgchart^0|0|18|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

New web home for lib_gg_orgchart is <a href="http://librerias.logicas.org/lib_gg_orgchart" rel="nofollow">http://librerias.logicas.org/lib_gg_orgchart</a>. 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.

blocks|key|3231340|text|我也在使用谷歌组织结构图API来显示我们的组织结构图。https://developers.google.com/chart/interactive/docs/examples|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3231341|这工作得很好，但我们需要一些支持：|3231342|1)源是包含组织结构图数据的Google电子表格文档。2)当数据中添加新的人员时，会创建一个新的节点。3)第一层和第二层的水平布局以及较低级别的垂直布局。与此类似：http://google-visualization-api-issues.googlecode.com/issues/attachment?aid=8730161231813373288&name=orgchart.png&token=RT7QPbsD-WkveIgybTZyXi48g84%253A1361392544450&inline=1|3231343|1和2是由谷歌支持的，工作很好，但需要一些东西来满足3个要求(水平和垂直布局)|3231344|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/chart/interactive/docs/examples|1|http://google-visualization-api-issues.googlecode.com/issues/attachment?aid=8730161231813373288&name=orgchart.png&token=RT7QPbsD-WkveIgybTZyXi48g84%253A1361392544450&inline=1^0|R|1P|0|0|0|2A|4S|1|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]|R|$5|M|N|O|C|$P|S]]]]

I too am using google org chart API to display our org charts. 
<a href="https://developers.google.com/chart/interactive/docs/examples" rel="nofollow">https://developers.google.com/chart/interactive/docs/examples</a>

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:
<a href="http://google-visualization-api-issues.googlecode.com/issues/attachment?aid=8730161231813373288&amp;name=orgchart.png&amp;token=RT7QPbsD-WkveIgybTZyXi48g84%3A1361392544450&amp;inline=1" rel="nofollow">http://google-visualization-api-issues.googlecode.com/issues/attachment?aid=8730161231813373288&amp;name=orgchart.png&amp;token=RT7QPbsD-WkveIgybTZyXi48g84%3A1361392544450&amp;inline=1</a>

1 and 2 are supported by Google and working great, but need something for that 3 requirement (Horizontal and Vertical layouts)

blocks|key|295136|text|不知道你是不是还在看，考虑到这是两年前的事了，但我在同样的情况下发现了这一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|295137|yFILES+Interactive+OrgChart+Demo，Visualizing+Orgcharts+with+JavaScript|offset|length|295138|我还发现了一些其他的：|295139|jOrgChart+github.com/wesnolte/jOrgChart和github.com/dabeng/OrgChart|295140|使用JS+jvloenen.home.xs4all.nl/orgchart/的组织结构图|295141|我最终使用D3.js来做这件事。我使用他们的TreeLayout，并对其进行编辑以满足我的需求。下面是一些示例代码：|295142|var+tree+=+d3.layout.tree().nodeSize([70,+40]);
var+diagonal+=+d3.svg.diagonal()
++++.projection(function+(d)+{
++++return+[d.x+%2B+rectW+/+2,+d.y+%2B+rectH+/+2];
});

var+svg+=+d3.select("#body").append("svg").attr("width",+1000)
++++.attr("height",+1000).append("g")
++++.attr("transform",+"translate("+%2B+350+%2B+","+%2B+20+%2B+")");|code-block|syntax|javascript|295143|这是我开始的一个jsFiddle：jsfiddle.net/augburto/YMa2y/|295144|entityMap|0|LINK|mutability|MUTABLE|url|https://live.yworks.com/demos/complete/interactiveorgchart/|1|https://www.yworks.com/pages/organization-chart-visualization-in-javascript|2|https://github.com/wesnolte/jOrgChart|3|https://github.com/dabeng/OrgChart|4|https://jvloenen.home.xs4all.nl/orgchart|5|https://d3js.org/|6|https://jsfiddle.net/augburto/YMa2y/^0|0|7|P|0|X|11|1|0|0|A|T|2|14|Q|3|0|5|X|4|0|5|5|5|0|0|H|S|6|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1F|8|@]|9|@$D|1G|E|1H|1|1I]|$D|1J|E|1K|1|1L]]|A|$]]|$1|F|3|G|5|6|7|1M|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1N|8|@]|9|@$D|1O|E|1P|1|1Q]|$D|1R|E|1S|1|1T]]|A|$]]|$1|J|3|K|5|6|7|1U|8|@]|9|@$D|1V|E|1W|1|1X]]|A|$]]|$1|L|3|M|5|6|7|1Y|8|@]|9|@$D|1Z|E|20|1|21]]|A|$]]|$1|N|3|O|5|P|7|22|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|6|7|23|8|@]|9|@$D|24|E|25|1|26]]|A|$]]|$1|U|3|-4|5|6|7|27|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]|12|$5|X|Y|Z|A|$10|13]]|14|$5|X|Y|Z|A|$10|15]]|16|$5|X|Y|Z|A|$10|17]]|18|$5|X|Y|Z|A|$10|19]]|1A|$5|X|Y|Z|A|$10|1B]]|1C|$5|X|Y|Z|A|$10|1D]]]]

Not sure if you're still looking considering this is 2 years old but I'm in the same situation and found this:

yFILES
<a href="https://live.yworks.com/demos/complete/interactiveorgchart/" rel="nofollow noreferrer">Interactive OrgChart Demo</a>, <a href="https://www.yworks.com/pages/organization-chart-visualization-in-javascript" rel="nofollow noreferrer">Visualizing Orgcharts with JavaScript</a>

Some other ones I have found:

jOrgChart
<a href="https://github.com/wesnolte/jOrgChart" rel="nofollow noreferrer">github.com/wesnolte/jOrgChart</a> and <a href="https://github.com/dabeng/OrgChart" rel="nofollow noreferrer">github.com/dabeng/OrgChart</a>

Organization Charts using JS
<a href="https://jvloenen.home.xs4all.nl/orgchart" rel="nofollow noreferrer">jvloenen.home.xs4all.nl/orgchart/</a>

I ended up using <a href="https://d3js.org" rel="nofollow noreferrer">D3.js</a> to do it. I use their TreeLayout and edited it to fit my needs. Here is some sample code:

<pre><code>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 + ")");
</code></pre>

Here is a jsFiddle of what I started:
<a href="https://jsfiddle.net/augburto/YMa2y/" rel="nofollow noreferrer">jsfiddle.net/augburto/YMa2y/</a>

blocks|key|3017334|text|在商业场景中，yFiles+for+HTML当然为drawing+organization+charts提供了所需的灵活性|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3017335|有一个organization+chart+demo+online展示了如何使用库(实际上是一个通用的图形绘制库)来实现这一点：|3017336|​|3017337|📷|atomic|3017338|3017339|库中的自动布局算法既可以处理纯粹的分层树结构，也可以处理“近树”结构，其中元素可以具有多个父级，例如对管理团队或多个母公司进行建模。|3017340|该库还具有布局算法，可以处理具有任意循环复杂度的通用图，并且使用可用的边路由算法，即使是罕见的边情况也可以很好地可视化，其中也可以路由不属于严格分层树结构的边(例如，指示额外的关系层)-尽管在撰写本文时，这不是上面链接的演示的一部分。然而，更通用的layout+demo显示了几种布局算法及其许多实际选项。|3017341|免责声明:我为创建该库的公司工作，但我并不代表我的雇主。我的评论、想法和答案都是我自己的。|3017342|entityMap|0|LINK|mutability|MUTABLE|url|https://www.yworks.com/yfileshtml|1|https://www.yworks.com/pages/organization-chart-visualization-in-javascript|2|https://live.yworks.com/demos/complete/interactiveorgchart/|3|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/6705e3fa46c6da84408d2c56e49c3716.png|imageAlt|4|https://live.yworks.com/demos/layout/layoutstyles/^0|7|F|0|P|R|1|0|3|U|2|0|0|0|1|3|0|0|0|3G|B|4|0|0^^$0|@$1|2|3|4|5|6|7|1B|8|@]|9|@$A|1C|B|1D|1|1E]|$A|1F|B|1G|1|1H]]|C|$]]|$1|D|3|E|5|6|7|1I|8|@]|9|@$A|1J|B|1K|1|1L]]|C|$]]|$1|F|3|G|5|6|7|1M|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|1N|8|@]|9|@$A|1O|B|1P|1|1Q]]|C|$]]|$1|K|3|G|5|6|7|1R|8|@]|9|@]|C|$]]|$1|L|3|M|5|6|7|1S|8|@]|9|@]|C|$]]|$1|N|3|O|5|6|7|1T|8|@]|9|@$A|1U|B|1V|1|1W]]|C|$]]|$1|P|3|Q|5|6|7|1X|8|@]|9|@]|C|$]]|$1|R|3|-4|5|6|7|1Y|8|@]|9|@]|C|$]]]|S|$T|$5|U|V|W|C|$X|Y]]|Z|$5|U|V|W|C|$X|10]]|11|$5|U|V|W|C|$X|12]]|13|$5|14|V|15|C|$16|17|18|-4]]|19|$5|U|V|W|C|$X|1A]]]]

In a commercial scenario <a href="https://www.yworks.com/yfileshtml" rel="nofollow noreferrer">yFiles for HTML</a> certainly provides the required flexibility for <a href="https://www.yworks.com/pages/organization-chart-visualization-in-javascript" rel="nofollow noreferrer">drawing organization charts</a>:

There is an <a href="https://live.yworks.com/demos/complete/interactiveorgchart/" rel="nofollow noreferrer">organization chart demo online</a> that shows how this can be implemented with the library (which is in fact a general purpose graph drawing library):

<a href="https://live.yworks.com/demos/complete/interactiveorgchart/" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5md71.png" alt="Organization Chart Demo Screenshot"></a>

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 <a href="https://live.yworks.com/demos/layout/layoutstyles/" rel="nofollow noreferrer">layout demo</a> 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.

We are using <a href="http://code.google.com/apis/visualization/documentation/gallery/orgchart.html" rel="noreferrer">google org chart API to display our org charts</a>. This works well but we need something that supports:

<ol>
<li>One person reporting to multiple managers</li>
<li>Co heads of a functional areas.</li>
</ol>

Are there any competing tools that give better support for the above.

<hr>

NOTE: For Gorka LLona, who suggested this solution below in one of the answers, i found a few bugs, here is a screenshot of the issue i am running into using your test example.

<img src="https://i.stack.imgur.com/RqcI8.png" alt="enter image description here">

Are there any better javascript org charts compared with Google Org Chart API?

服务器

路由

JSON

我们使用的是。这工作得很好，但我们需要一些支持：一个人向多个经理汇报工作Co主管一个职能领域。有没有竞争对手的工具可以更好地支持上面的内容。注意:对于Gorka LLona，他在下面的一个答案中建议了这个解决方案，我发现了一些错误，这是我使用您的测试示例遇到的问题的屏幕截图。​​

问有没有比Google组织结构图API更好的javascript组织结构图？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有比Google组织结构图API更好的javascript组织结构图？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有比Google组织结构图API更好的javascript组织结构图？
EN