使用 JavaScript 构建组织结构图

Posted 2023-02-16

【中文标题】使用 JavaScript 构建组织结构图

【英文标题】：Building Organizational chart using JavaScript

【发布时间】：2011-09-21 11:26:16

【问题描述】：

我有来自服务器的 JSON 数据。

我想以以下格式在 html 文件中显示组织结构图：

                       CEO
                        |
                        |
            #Manager             #Manager 

我正在使用 Dojo。我发现this link 非常有用。我想构建完全相同的东西。

我无法在该站点中找到所需的 dojo 文件。所以它可能是 IBM 专有的。

我试过this link，但觉得没用。

有人可以告诉我应该如何使用 dojo 或任何其他框架吗？

【参考方案1】：

你可以使用Basic Primitives Diagrams

它有各种图表和可选格式，也是开源的， 它是客户端 javascript 布局和渲染，不依赖第三方库。

也可以在线试用here

【参考方案2】：

您可能想尝试google org charts。觉得用起来相当容易。

【讨论】：

可以离线使用吗？例如。在无法访问 Internet 的企业网络中？

【参考方案3】：

我很高兴提供 jquery 解决方案。至于哪个最好用，就看你实际试用的结果了。 以下快照显示了 jquery 插件OrgChart 创建的树状层次结构@

如果你没有 svg、canvas 或 flex 背景，也许这个纯 dom 解决方案会是你的最爱 :)