今天使用orgChart没有找到合适的，所以今天来写篇使用文档。 OrgChart.js是什么？ 基于ES6的组织结构图插件。 特征 支持本地数据和远程数据（JSON）。. OrgChart JS is visual tool used by managers to help illustrate the roles and an organization’s hierarchy. Whether you’re a business, nonprofit, or government organization, a chart can help your employees understand the chain of command, with clear information on which people report to which manager. 8) OrgChart JS (BalkanGraph) OrgChart JS is a powerful and at the same time easy-to-use JS widget that allows you to clearly illustrate the reporting relationships and chains of command within the company of any size and complexity by means of intuitive and interactive organizational charts. A Vue wrapper for OrgChart.js. First of all, thanks a lot for dabeng's great work - OrgChart.js; If you prefer the Vue.js Wrapper for Orgchart.js,you could try my project; Links. Documentation; Feature. Support import and export JSON; Supports exporting chart as a picture; draggable Orgchart; Editable Orgchart. Install npm install vue. If you also want to create a better pretty organization chart, you can consider trying this OrgChart small business organizational chart. Which looks like an organizational flow chart, and also can act as a hospital organizational chart. Effect preview OrgChart Organizational Chart. Support for local data and remote data (JSON).
OrgChart.js是什么
什么是OrgChart.js，organization chart plugin based on ES6
- OrgChart.js官网：官网
- OrgChart.js文档：文档
- OrgChart.js源码仓库：源码仓库
- OrgChart.js下载地址：点此下载点此下载2
OrgChart.js介绍、OrgChart.js使用
Foreword
- First of all, thanks a lot for wesnolte's great work😊-- jOrgChart. The thought that using nested tables to build out the tree-like orgonization chart is amazing. This idea is more simple and direct than its counterparts based on svg.
- Unfortunately, it's long time not to see the update of jOrgChart. on the other hand, I got some interesting ideas to add, so I choose to create a new repo.
- Font Awesome provides us with administration icon, second level menu icon and loading spinner.
Features
- Supports both local data and remote data (JSON).
- Smooth expand/collapse effects based on CSS3 transitions.
- Align the chart in 4 orientations.
- Allows user to change orgchart structure by drag/drop nodes.
- Allows user to edit orgchart dynamically and save the final hierarchy as a JSON object.
- Supports exporting chart as a picture.
- Supports pan and zoom
- Users can adopt multiple solutions to build up a huge organization chart(please refer to multiple-layers or hybrid layout sections)
- touch-enabled plugin for mobile divice
Getting started
Build
Serve
Now, you can try out all the demos on http://localhost:3000.
Note: your nodejs version should be 4+.
Demo
Note: when users use ajaxURL option to build orghchart, they must use json datasource(both local and remote are OK) and set the relationship property of datasource by themselves. All of these staff are used to generate the correct expanding/collapsing arrows for nodes.
Here, we need the help from html2canvas.
Here, we fall back on OpenLayers. It's the most aewsome open-source js library for Web GIS you sholdn't miss.
With the help of exposed core methods(addParent(), addSiblings(), addChildren(), removeNodes()) of orgchart plugin, we can finish this task easily.
Users are allowed to drag & drop the nodes of orgchart when option 'draggable' is assigned to true(Note: this feature doesn't work on IE due to its poor support for HTML5 drag & drop API).
Furthermore, users can make use of option dropCriteria to inject their custom limitations on drag & drop. As shown below, we don't want an manager employee to be under a engineer under no circumstance.
That's where getHierarchy() comes in.
It's a so easy task, we just need to append id or className property to node data.
In fact, this is a wonderful solution to display a orgchart which includes a huge number of node data.
This feature is inspired by the issues(Aligning Children Vertical, Hybrid(horizontal + vertical) OrgChart). Thank mfahadi and Destructrix for their constructive suggestions😊
From now on, users never have to worry about how to align a huge of nodes in one screen of browser. The option 'verticalDepth' allows users to align child nodes vertically from the given depth.
Note: currently, this option is incompatible with many other options or methods, like direction, drag&drop, addChildren(), removeNodes(), getHierarchy() and so on. These conflicts will be solved one by one in the later versions.
Usage
Instantiation Statement
Structure of Datasource
Options
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| chartContainer | string | yes | selector usded to query the wrapper element of orgchart. It could be an id or an unique className. | |
| data | json or string | yes | datasource usded to build out structure of orgchart. It could be a json object or a string containing the URL to which the ajax request is sent. | |
| pan | boolean | no | false | Users could pan the orgchart by mouse drag&drop if they enable this option. |
| zoom | boolean | no | false | Users could zoomin/zoomout the orgchart by mouse wheel if they enable this option. |
| direction | string | no | 't2b' | The available values are t2b(implies 'top to bottom', it's default value), b2t(implies 'bottom to top'), l2r(implies 'left to right'), r2l(implies 'right to left'). |
| verticalDepth | integer | no | Users can make use of this option to align the nodes vertically from the specified depth. | |
| toggleSiblingsResp | boolean | no | false | Once enable this option, users can show/hide left/right sibling nodes respectively by clicking left/right arrow. |
| ajaxURL | json | no | It inclueds four properites -- parent, children, siblings, families(ask for parent node and siblings nodes). As their names imply, different propety provides the URL to which ajax request for different nodes is sent. | |
| depth | positive integer | no | 999 | It indicates the level that at the very beginning orgchart is expanded to. |
| nodeTitle | string | no | 'name' | It sets one property of datasource as text content of title section of orgchart node. In fact, users can create a simple orghcart with only nodeTitle option. |
| parentNodeSymbol | string | no | 'fa-users' | Using font awesome icon to imply that the node has child nodes. |
| nodeContent | string | no | It sets one property of datasource as text content of content section of orgchart node. | |
| nodeId | string | no | 'id' | It sets one property of datasource as unique identifier of every orgchart node. |
| createNode | function | no | It's a callback function used to customize every orgchart node. It recieves two parament: '$node' stands for jquery object of single node div; 'data' stands for datasource of single node. | |
| exportButton | boolean | no | false | It enable the export button for orgchart. |
| exportFilename | string | no | 'Orgchart' | It's filename when you export current orgchart as a picture. |
| chartClass | string | no | ' | when you wanna instantiate multiple orgcharts on one page, you should add diffent classname to them in order to distinguish them. |
| draggable | boolean | no | false | Users can drag & drop the nodes of orgchart if they enable this option. Note: this feature doesn't work on IE due to its poor support for HTML5 drag & drop API. |
| dropCriteria | function | no | Users can construct their own criteria to limit the relationships between dragged node and drop zone. Furtherly, this function accept three arguments(draggedNode, dragZone, dropZone) and just only return boolen values. |
Methods
I'm sure that you can grasp the key points of the methods below after you try out demo -- edit orgchart.
let orgchart = new OrgChart(options);
Embeds an organization chart in designated container. Accepts an options object and you can go through the 'options' section to find which options are required.
.addParent(root, data)
Adds parent node(actullay it's always root node) for current orgchart.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| root | dom node | yes | root node of designated orgchart | options used for overriding initial options |
| data | json object | yes | datasource for building root node |
.addSiblings(node, data) Adds sibling nodes for designated node.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| node | dom node | yes | we'll add sibling nodes based on this node | |
| data | json object | yes | datasource for building sibling nodes |
.addChildren(node, data） Adds child nodes for designed node.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| node | dom node | yes | we'll add child nodes based on this node | |
| data | json object | yes | datasource for building child nodes |
.removeNodes(node） Removes the designated node and its descedant nodes.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| node | dom node | yes | node to be removed |
.getHierarchy() This method is designed to get the hierarchy relationships of orgchart for further processing. For example, after editing the orgchart, you could send the returned value of this method to server-side and save the new state of orghcart. ##### .hideChildren(node) This method allows you to hide programatically the children of any specific node(.node element), if it has
| Name | Type | Required | Default | Description || node | dom node | Yes | None | It's the desired dom node that we'll hide its children nodes |
.showChildren(node) This method allows you to show programatically the children of any specific node(.node element), if it has
| Name | Type | Required | Default | Description || node | dom node | Yes | None | It's the desired dom node that we'll show its children nodes |
.hideSiblings(node, direction) This method allows you to hide programatically the siblings of any specific node(.node element), if it has
| Name | Type | Required | Default | Description || node | dom node | Yes | None | It's the desired dom node that we'll hide its siblings nodes || direction | string | No | None | Possible values:'left','rigth'. Specifies if hide the siblings at left or rigth. If not defined hide both of them. |
.showSiblings(node, direction) This method allows you to show programatically the siblings of any specific node(.node element), if it has
| Name | Type | Required | Default | Description || node | dom node | Yes | None | It's the desired dom node that we'll show its siblings nodes || direction | string | No | None | Possible values:'left','rigth'. Specifies if hide the siblings at left or rigth. If not defined hide both of them. |
.getNodeState(node, relation) This method returns you the display state of the related nodes.
| Name | Type | Required | Default | Description || node | dom node | Yes | None | It's the desired dom node that we wanna know its related nodes' display state. || relation | String | Yes | None | Possible values: 'parent', 'children' and 'siblings'. Specifies the desired relation to return. |
The returning object will have the next structure: js { 'exists': true|false, //Indicates if has parent|children|siblings 'visible':true|false, //Indicates if the related nodes are visible } ##### .getRelatedNodes(node, relation) This method returns you the nodes related to the specified node
| Name | Type | Required | Default | Description || node | dom node | Yes | None | It's the desired that we wanna get its related nodes || relation | String | Yes | None | Possible values: 'parent', 'children' and 'siblings'. Specifies the desired relation to return. |
Events
| Event Type | Attached Data | Description |
|---|---|---|
| nodedropped.orgchart | draggedNode, dragZone, dropZone | The event's handler is where you can place your customized function after node drop over. For more details, please refer to example drag & drop. |
Simple and direct organization chart(tree-like hierarchy) plugin based on pure DOM and jQuery.
ES6 VersionWeb Components VersionVue.js VersionAngular Version -- the most space-saving solutionReact VersionForeword
First of all, thanks a lot for wesnolte's great work:blush: -- jOrgChart. The thought that using nested tables to build out the tree-like orgonization chart is amazing. This idea is more simple and direct than its counterparts based on svgUnfortunately, it's long time not to see the update of jOrgChart. on the other hand, I got some interesting ideas to add, so I choose to create a new repo.
Features
- Supports both local data and remote data (JSON).
- Smooth expand/collapse effects based on CSS3 transitions.
- Align the chart in 4 orientations.
- Allows user to change orgchart structure by drag/drop nodes.
- Allows user to edit orgchart dynamically and save the final hierarchy as a JSON object.
- Supports exporting chart as a picture or pdf document.
- Supports pan and zoom.
- Allows user to customize the internal structure for every node.
- Users can adopt multiple solutions to build up a huge organization chart(please refer to multiple-layers or hybrid layout sections).
- touch-enabled plugin for mobile device.
CDN
Users could find the related CDN support for OrgChart's CSS and JavaScript.
Installation
Of course, you can directly use the standalone build by including dist/js/jquery.orgchart.js and dist/css/jquery.orgchart.css in your webapps.
Install with Bower
Install with npm
require('orgchart') will load orgchart plugin onto the jQuery object. The orgchart module itself does not export anything.
online demos
using ul datasource(this feature comes from Tobyee's good idea:blush:)
I wanna align orgchart with different orientation**(this feature comes from the good idea of fvlima and badulesia :blush:)
Top to Bottom -- default direction, as you can see all other examples on this page.
Note: when users use ajaxURL option to build orghchart, they must use json datasource(both local and remote are OK) and set the relationship property of datasource by themselves. All of these staff are used to generate the correct expanding/collapsing arrows for nodes.
Here, we need the help from html2canvas.
Note:
(1) if you wanna export something in IE or Edge, please introduce es6-promise.auto.js firstly.
(2) if your OS is windows, please check your display scaling settings. For the perfact exported picture, you'd better adjust 'Change the size of text, apps, and other items' to 100%.(thanks for sayamkrai's exploration)
(3) Besides, if you wanna export a pdf format or your orgchart includes picture, you have to introduce jspdf and set 'exportFileextension' option to 'pdf'.
Here, we fall back on OpenLayers. It's the most aewsome open-source js library for Web GIS you sholdn't miss.
With the help of exposed core methods(addParent(), addSiblings(), addChildren(), removeNodes()) of orgchart plugin, we can finish this task easily.
Users are allowed to drag & drop the nodes of orgchart when option 'draggable' is assigned to true(Note: this feature doesn't work on IE due to its poor support for HTML5 drag & drop API).
Furthermore, users can make use of option dropCriteria to inject their custom limitations on drag & drop. As shown below, we don't want an manager employee to be under a engineer under no circumstance.
That's where getHierarchy() comes in.
It's a so easy task, we just need to append id or className property to node data.
In fact, this is a wonderful solution to display a orgchart which includes a huge number of node data.
This feature is inspired by the issues(Aligning Children Vertical, Hybrid(horizontal + vertical) OrgChart). Thank mfahadi and Destructrix for their constructive suggestions:blush: Special thanks to tedliang for his wonderful hybrid mode solution.
From now on, users never have to worry about how to align a huge of nodes in one screen of browser. The option 'verticalLevel' allows users to align child nodes vertically from the given level.
Note: currently, this option is incompatible with many other options or methods, like direction, drag&drop, addChildren(), removeNodes(), getHierarchy() and so on. These conflicts will be solved one by one in the later versions.
Org Chart Js
No problem. You just need to adjust a little detail of datasource with the help of option 'collapse' and className 'slide-up'.
It's not a big deal. You just turn to the method init().
No problem. With the help of ES6 Template literals, we can customize the any complex node structure rather than the common title and content sections.
how to start up demos locally
- you have to install node.js v6+ because our unit tests are based on jsdom v11
- you have to install modern browsers because many behaviors of orgchart plugin are based on HTML5 and CSS3
- run
npm installto install necessary dependencies - run
npm testto run all tests including unit tests, integration tests and e2e tests - run
npm run buildto generate production js&css files of plugin - run
npm startto start up local web server to host all the demos
Usage
Instantiation Statement
Structure of Datasource
Options
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| data | json or string | yes | datasource usded to build out structure of orgchart. It could be a json object or a string containing the URL to which the ajax request is sent. | |
| pan | boolean | no | false | Users could pan the orgchart by mouse drag&drop if they enable this option. |
| zoom | boolean | no | false | Users could zoomin/zoomout the orgchart by mouse wheel if they enable this option. |
| zoominLimit | number | no | 7 | Users are allowed to set a zoom-in limit. |
| zoomoutLimit | number | no | 0.5 | Users are allowed to set a zoom-out limit. |
| direction | string | no | 't2b' | The available values are t2b(implies 'top to bottom', it's default value), b2t(implies 'bottom to top'), l2r(implies 'left to right'), r2l(implies 'right to left'). |
| verticalLevel | integer(>=2) | no | Users can make use of this option to align the nodes vertically from the specified level. | |
| toggleSiblingsResp | boolean | no | false | Once enable this option, users can show/hide left/right sibling nodes respectively by clicking left/right arrow. |
| ajaxURL | json | no | It inclueds four properites -- parent, children, siblings, families(ask for parent node and siblings nodes). As their names imply, different propety provides the URL to which ajax request for different nodes is sent. | |
| visibleLevel | positive integer | no | 999 | It indicates the level that at the very beginning orgchart is expanded to. |
| nodeTitle | string | no | 'name' | It sets one property of datasource as text content of title section of orgchart node. In fact, users can create a simple orghcart with only nodeTitle option. |
| parentNodeSymbol | string | no | 'oci-leader' | Using your own icon to imply that the node has child nodes. |
| nodeContent | string | no | It sets one property of datasource as text content of content section of orgchart node. | |
| nodeId | string | no | 'id' | It sets one property of datasource as unique identifier of every orgchart node. |
| nodeTemplate | function | no | It's a template generation function used to customize any complex internal structure of node. It receives only one parameter: 'data' stands for json datasoure which will be use to render one node. | |
| createNode | function | no | It's a callback function used to customize every orgchart node. It receives two parameters: '$node' stands for jquery object of single node div; 'data' stands for datasource of single node. | |
| exportButton | boolean | no | false | It enable the export button for orgchart. |
| exportFilename | string | no | 'Orgchart' | It's filename when you export current orgchart as a picture. |
| exportFileextension | string | no | 'png' | Available values are png and pdf. |
| chartClass | string | no | ' | when you wanna instantiate multiple orgcharts on one page, you should add diffent classname to them in order to distinguish them. |
| draggable | boolean | no | false | Users can drag & drop the nodes of orgchart if they enable this option. **Note**: this feature doesn't work on IE due to its poor support for HTML5 drag & drop API. |
| dropCriteria | function | no | Users can construct their own criteria to limit the relationships between dragged node and drop zone. Furtherly, this function accept three arguments(draggedNode, dragZone, dropZone) and just only return boolen values. | |
| initCompleted | function | no | It can often be useful to know when your table has fully been initialised, data loaded and rendered, particularly when using an ajax data source. It receives one parament: '$chart' stands for jquery object of initialised chart. |
Methods
I'm sure that you can grasp the key points of the methods below after you try out demo -- edit orgchart.
var oc = $container.orgchart(options)
Embeds an organization chart in designated container. Accepts an options object and you can go through the 'options' section to find which options are required. Variable oc is the instance of class OrgChart.
init(newOptions)
It's the useful way when users want to re-initialize or refresh orgchart based on new options or reload new data.
addParent(data)
Adds parent node(actullay it's always root node) for current orgchart.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| data | json object | yes | datasource for building root node |
addSiblings($node, data)
Orgchart Js Angular
Adds sibling nodes for designated node.
Organization Chart Js
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| $node | jquery object | yes | we'll add sibling nodes based on this node | |
| data | array | yes | datasource for building sibling nodes |
addChildren($node, data)
Adds child nodes for designed node.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| $node | jquery object | yes | we'll add child nodes based on this node | |
| data | array | yes | datasource for building child nodes |
removeNodes($node）
Removes the designated node and its descedant nodes.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| $node | jquery object | yes | node to be removed |
getHierarchy()
This method is designed to get the hierarchy relationships of orgchart for further processing. For example, after editing the orgchart, you could send the returned value of this method to server-side and save the new state of orghcart.
hideParent($node)
This method allows you to hide programatically the parent node of any specific node(.node element), if it has.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| $node | JQuery Object | Yes | None | It's the desired JQuery Object to hide its parent node. Of course, its sibling nodes will be hidden at the same time |
showParent($node)
This method allows you to show programatically the parent node of any specific node(.node element), if it has.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| $node | JQuery Object | Yes | None | It's the desired JQuery Object to show its parent node |
hideChildren($node)
This method allows you to hide programatically the children of any specific node(.node element), if it has.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| $node | JQuery Object | Yes | None | It's the desired JQuery Object to hide its children nodes |
showChildren($node)
This method allows you to show programatically the children of any specific node(.node element), if it has.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| $node | JQuery Object | Yes | None | It's the desired JQuery Object to show its children nodes |
hideSiblings($node, direction)
This method allows you to hide programatically the siblings of any specific node(.node element), if it has.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| $node | JQuery Object | Yes | None | It's the desired JQuery Object to hide its siblings nodes |
| direction | string | No | None | Possible values:'left','rigth'. Specifies if hide the siblings at left or rigth. If not defined hide both of them. |
showSiblings($node, direction)
This method allows you to show programatically the siblings of any specific node(.node element), if it has.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| $node | JQuery Object | Yes | None | It's the desired JQuery Object to show its siblings nodes |
| direction | string | No | None | Possible values:'left','rigth'. Specifies if hide the siblings at left or rigth. If not defined hide both of them. |
getNodeState($node, relation)
This method returns you the display state of related node of the specified node.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| $node | JQuery Object | Yes | None | It's the desired JQuery Object to know its related nodes' display state. |
| relation | String | Yes | None | Possible values: 'parent', 'children' and 'siblings'. Specifies the desired relation to return. |
The returning object will have the following structure:
getRelatedNodes($node, relation)
This method returns you the nodes related to the specified node.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| $node | JQuery Object | Yes | None | It's the desired JQuery Object to know its related nodes |
| relation | String | Yes | None | Possible values: 'parent', 'children' and 'siblings'. Specifies the desired relation to return. |
setChartScale($chart, newScale)
This method returns you the nodes related to the specified node.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| $chart | JQuery Object | Yes | None | It's a chart in your chart-container |
| newScale | Float | Yes | None | Positive float value which is used to zoom in/out the chart |
export(exportFilename, exportFileextension)
This method allow you to export current orgchart as png or pdf file.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| exportFilename | String | No | 'OrgChart' | It's the name of exported file |
| exportFileextension | String | No | 'png' | It's the extension name of exported file |
Events
| Event Type | Additional Parameters | Description |
|---|---|---|
| nodedrop.orgchart | draggedNode, dragZone, dropZone | The event's handler is where you can place your customized function after node drop over. For more details, please refer to example drag & drop. |
| init.orgchart | chart | Initialisation complete event - fired when Organization Chart has been fully initialised and data loaded. |
Tips
How can I deactivate expand/collapse feature of orgchart?
This use case is inspired by the issue. Thanks der-robert and ActiveScottShaw for their constructive discussions:blush:
Users can enable/disable exapand/collapse feature with className 'noncollapsable' as shown below.
Why is the root node gone?
When I have a huge orgchart with enabled 'pan' option, if I hide all the children of one of the topmost parents then the chart disappear from screen. It seems that we need to add a reset button to keep the chart visible.For details, please refer to the issue opened by manuel-84 :blush:
Users can embed any clear up logics into the click handler of the reset buttton as shown below.
Browser Compatibility
- Chrome 19+
- Firefox 4+
- Safari 6+
- Opera 15+
- IE 10+
HomePage
Repository