dabeng / Vue Orgchart
Licence: mit
It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.
Stars: ✭ 182
Projects that are alternatives of or similar to Vue Orgchart
Orgchart
It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.
Stars: ✭ 2,325 (+1177.47%)
Mutual labels: tree, organization, chart
Vue Org Chart
Manage and publish your interactive organization chart (orgchart), 100% free and no install required: just copy a folder to any location
Stars: ✭ 207 (+13.74%)
Mutual labels: organization, chart
Vue Tree Chart
A vue2 component to display tree chart
Stars: ✭ 351 (+92.86%)
Mutual labels: tree, chart
React D3 Tree
🌳 React component to create interactive D3 tree graphs
Stars: ✭ 543 (+198.35%)
Mutual labels: tree, chart
Deepdash
eachDeep, filterDeep, findDeep, someDeep, omitDeep, pickDeep, keysDeep etc.. Tree traversal library written in Underscore/Lodash fashion
Stars: ✭ 175 (-3.85%)
Mutual labels: tree
Fancygrid
FancyGrid - JavaScript grid library with charts integration and server communication.
Stars: ✭ 169 (-7.14%)
Mutual labels: chart
Vue Treeselect
A multi-select component with nested options support for Vue.js
Stars: ✭ 2,347 (+1189.56%)
Mutual labels: tree
React Native Charts Wrapper
a react native charts wrapper (support android & iOS)
Stars: ✭ 2,111 (+1059.89%)
Mutual labels: chart
D3 Layout Narrative
A d3 layout for creating XKCD style narrative charts
Stars: ✭ 168 (-7.69%)
Mutual labels: chart
Picasso.js
A charting library streamlined for building interactive visualizations for the Qlik product suites.
Stars: ✭ 175 (-3.85%)
Mutual labels: chart
Graphic
A Flutter data visualization library based on Grammar of Graphics.
Stars: ✭ 173 (-4.95%)
Mutual labels: chart
K8s Wait For
A simple script that allows to wait for a k8s service, job or pods to enter a desired state
Stars: ✭ 172 (-5.49%)
Mutual labels: chart
jQuery Version
ES6 Version
Web Components Version
Angular Version -- the most space-saving solution
React Version
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.
Features
- For now, just static organization chart
Installation
npm install vue-organization-chart -S
Demos
Usage
<template>
<div>
<organization-chart :datasource="ds"></organization-chart>
</div>
</template>
<script>
import Vue from 'vue'
import OrganizationChart from 'vue-organization-chart'
import 'vue-organization-chart/dist/orgchart.css'
export default {
components: {
OrganizationChart
},
data () {
return {
ds: {
'id': '1',
'name': 'Lao Lao',
'title': 'general manager',
'children': [
{ 'id': '2', 'name': 'Bo Miao', 'title': 'department manager' },
{ 'id': '3', 'name': 'Su Miao', 'title': 'department manager',
'children': [
{ 'id': '4', 'name': 'Tie Hua', 'title': 'senior engineer' },
{ 'id': '5', 'name': 'Hei Hei', 'title': 'senior engineer',
'children': [
{ 'id': '6', 'name': 'Pang Pang', 'title': 'engineer' },
{ 'id': '7', 'name': 'Xiang Xiang', 'title': 'UE engineer' }
]
}
]
},
{ 'id': '8', 'name': 'Hong Miao', 'title': 'department manager' },
{ 'id': '9', 'name': 'Chun Miao', 'title': 'department manager' }
]
}
}
}
}
</script>
Attributes
Name | Type | Required | Default | Description |
---|---|---|---|---|
datasource | json | yes | datasource usded to build out structure of orgchart. It could be a json object. | |
pan | boolean | no | false | Users could pan the orgchart by mouse drag&drop if they enable this attribute. |
zoom | boolean | no | false | Users could zoomin/zoomout the orgchart by mouse wheel if they enable this attribute. |
zoomin-limit | number | no | 7 | Users are allowed to set a zoom-in limit. |
zoomout-limit | number | no | 0.5 | Users are allowed to set a zoom-out limit. |
Events
Name | Parameters | Description |
---|---|---|
node-click | node data | triggers when user clicks the node. |
Scoped Slots
<template slot-scope="{ nodeData }">
<!-- feel free to customize the internal structure of node -->
</template>
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].