js中常用的几款组织架构图

17,065 阅读2分钟

前几天在工作中拿到一个需要处理组织架构的业务需求,于是翻阅了在git上star数量较多的几款组织架构图插件进行对比。

jOrgChart

github.com/wesnolte/jOrgChart

  • 给定一个嵌套无序列表元素,容易使用。
  • 其中的拖放功能允许重新排序树和底层的结构。
  • 通过点击相应的节点来显示/隐藏树的特定分支。
  • 节点可以包含除和之外的任何数量的HTML。
  • 风格简单。
  • 子树折叠,对于大型组织架构有用。

OrgChart

github.com/dabeng/OrgChart

  • 支持本地数据和远程数据(JSON)。
  • 基于CSS3过渡的平滑展开/折叠效果。
  • 将图表对齐到4个方向。
  • 允许用户通过拖放节点更改组织结构。
  • 允许用户动态编辑组织图并将最终层次结构保存为JSON对象。
  • 支持将图表导出为图片。
  • 支持平移和缩放。
  • 用户可以采用多种解决方案构建庞大的组织图。
  • 适配移动端。

jquery-orgchart

github.com/caprica/jquery-orgchart 

  • HTML标记,在节点中拥有可点击的超链接;
  • 源列表中的所有属性都会被添加到相应的图表节点;
  • 用于将图表限制为所需级别数量,并在单个堆栈中显示剩余级别的选项;
  • 回调处理点击的图表节点;
  • 体积小,仅3K;
  • 通过覆盖CSS样式,很容易改变图表的外观;
  • 扩展性强;

GetOrgChart

www.getorgchart.com/ 

  • 允许开发人员创建复杂的树结构。
  • 与服务器端组件一起使用时,开发人员还可以使用特制界面和编辑图表。
  • 默认情况下,GetOrgChart包含各种皮肤和调色板,但开发人员也可以创建主题。
  • 如果GetOrgChart图表变得过大,内置的搜索字段允许用户搜索项目。
  • 如果GetOrgChart图表变得过大,用户可以使用表格模式查看原始数据
  • 而不需要视觉层次结构。
  • 免费。

D3.js

d3js.org/

  • D3允许您将任意数据绑定到文档对象模型(DOM)。
  • 提供了非凡的灵活性。
  • D3运算速率极快,支持大量数据和动态行为进行交互的动画。
  • 类似绘制svg的jQuery。