65

我们正在使用google org chart API 来显示我们的组织结构图。这很好用,但我们需要一些支持:

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

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


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

在此处输入图像描述

4

13 回答 13

26

D3 - http://d3js.org/

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

http://bl.ocks.org/1061834

于 2012-08-03T11:25:50.363 回答
26

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

于 2011-01-19T00:47:44.283 回答
18

不确定您是否仍在考虑考虑这是 2 岁,但我处于同样的情况并发现了这一点:

yFILES Interactive OrgChart Demo ,使用 JavaScript 可视化组织结构图

我发现的其他一些:

jOrgChart github.com/wesnolte/jOrgChartgithub.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/

于 2013-06-19T18:29:46.530 回答
6

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

特别是Graffle 示例将是一个很好的起点。

于 2010-10-27T01:33:07.990 回答
4

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

于 2013-02-04T14:50:45.770 回答
4

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

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

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

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

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

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

于 2012-05-16T02:50:18.380 回答
2

在商业场景中,yFiles for HTML确实为绘制组织结构图提供了所需的灵活性:

网上有一个组织结构图演示,展示了如何使用该库(实际上是一个通用绘图库)来实现这一点:

组织结构图演示截图

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

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

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

于 2013-10-11T15:43:00.687 回答
2

如果您正在寻找像谷歌一样作为服务工作的替代品,我认为您没有。如果您正在寻找可以为您创建这些图表的库(js、php、flash)(您可以将库安装在服务器中,并创建一个简单的界面来创建图表对象),您可以在 SO中搜索较早的帖子或通过在 google 中搜索一些博客文章

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

于 2010-10-27T03:17:04.493 回答
1

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

http://orgchartasp.net/Sample.aspx

http://orgchartasp.net/Sample1.aspx(顶部有图片)

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

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

于 2012-10-18T16:54:08.427 回答
1

G'Day 哦哦

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

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

凸轮

于 2010-10-21T06:45:58.423 回答
1

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

于 2011-05-31T10:40:21.410 回答
1

您可以使用Graphviz和 Javascript实现解决方案。Graphviz 可以轻松处理您的所有三个条件。在 graphviz 中创建图形,并以 SVG 格式输出。从那里,扔一些javascript。例如,查理曼大帝的部分家谱,它本质上是一个非常复杂的组织结构图。

于 2011-05-30T23:54:23.247 回答
-2

我也在使用谷歌组织结构图 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 的要求(水平和垂直布局)

于 2013-02-20T20:57:55.857 回答