前几天在工作中拿到一个需要处理组织架构的业务需求,于是翻阅了在git上star数量较多的几款组织架构图插件进行对比。
jOrgChart
- 给定一个嵌套无序列表元素,容易使用。
- 其中的拖放功能允许重新排序树和底层的结构。
- 通过点击相应的节点来显示/隐藏树的特定分支。
- 节点可以包含除和之外的任何数量的HTML。
- 风格简单。
- 子树折叠,对于大型组织架构有用。
OrgChart
- 支持本地数据和远程数据(JSON)。
- 基于CSS3过渡的平滑展开/折叠效果。
- 将图表对齐到4个方向。
- 允许用户通过拖放节点更改组织结构。
- 允许用户动态编辑组织图并将最终层次结构保存为JSON对象。
- 支持将图表导出为图片。
- 支持平移和缩放。
- 用户可以采用多种解决方案构建庞大的组织图。
- 适配移动端。
jquery-orgchart
github.com/caprica/jquery-orgchart
- HTML标记,在节点中拥有可点击的超链接;
- 源列表中的所有属性都会被添加到相应的图表节点;
- 用于将图表限制为所需级别数量,并在单个堆栈中显示剩余级别的选项;
- 回调处理点击的图表节点;
- 体积小,仅3K;
- 通过覆盖CSS样式,很容易改变图表的外观;
- 扩展性强;
GetOrgChart
- 允许开发人员创建复杂的树结构。
- 与服务器端组件一起使用时,开发人员还可以使用特制界面和编辑图表。
- 默认情况下,GetOrgChart包含各种皮肤和调色板,但开发人员也可以创建主题。
- 如果GetOrgChart图表变得过大,内置的搜索字段允许用户搜索项目。
- 如果GetOrgChart图表变得过大,用户可以使用表格模式查看原始数据
- 而不需要视觉层次结构。
- 免费。
D3.js
- D3允许您将任意数据绑定到文档对象模型(DOM)。
- 提供了非凡的灵活性。
- D3运算速率极快,支持大量数据和动态行为进行交互的动画。
- 类似绘制svg的jQuery。