还不知道这个插件的小伙伴可以先去官网下载，orgchart官网链接

呐，下载下来就是这样的：

我们把他解压出来：

点进去以后，直接找到index.html文件用浏览器打开，就是这样的啦：

这1--24都是样式样例了，大家可以任意点进去查看啦、学习套用啦。。。

接下来就附上我所写出来的效果图【我修改了一点它的js和css代码，红色为所占百分比】：

然后附上代码，仅供参考，如有不足，还请赐教：

首先数据格式：【name，title，children】

"data": [{"children": [{"children": [{"children": [{"children": [],"name": "车间26","title": "演示子表4:70%"},{"children": [],"name": "车间27","title": "演示子表5:80%"},{"children": [],"name": "车间28","title": "演示子表6:80%"},{"children": [],"name": "车间29","title": "演示子表7:80%"},{"children": [],"name": "车间30","title": "演示子表8:90%"}],"name": "低压母表20","title": "演示子表1:50%"}],"name": "高压子表23","title": "演示子表1:60%"},{"children": [{"children": [{"children": [],"name": "车间31","title": "演示子表9:90%"},{"children": [],"name": "车间32","title": "演示子表10:90%"},{"children": [],"name": "车间33","title": "演示子表11:40%"},{"children": [],"name": "车间34","title": "演示子表12:40%"}],"name": "低压母表21","title": "演示子表2:60%"}],"name": "高压子表24","title": "演示子表2:70%"},{"children": [{"children": [{"children": [],"name": "车间35","title": "演示子表13:40%"},{"children": [],"name": "车间36","title": "演示子表14:30%"},{"children": [],"name": "车间37","title": "演示子表15:30%"}],"name": "低压母表22","title": "演示子表3:60%"}],"name": "高压子表25","title": "演示子表3:70%"}],"name": "高压母表19","title": "演示母表1:50%"}],

在页面中引入 jQuery ， jquery.orgchart.js 插件

$('#chart-container').orgchart({'data' : data,'nodeContent': 'title','visibleLevel':4//展开几级
});

附上一张官网的样例 f12 后的代码样例：

然后详解一下orgchart有哪些参数及其含义：

data【json or String】：数据

pan 【boolean 默:flase】：通过鼠标拖放来控制OrgChart

zoom【boolean 默:false】：通过鼠标滚轮放大或缩放OrgChart

zoominLimit【number 默:7】：设置放大限制

zoomoutLimit【number 默:0.5】：设置缩放限制

direction【String 默:t2b】：T2B："从上到下"，B2T："从底到上"，L2R："左到右"，R2L："向左到右"

verticalLevel【integer(>=2)】：

toggleSiblingsResp【boolean 默:false】：通过单击左/右箭头分别显示/隐藏左/右兄弟节点

ajaxURL【json】：不同的优先级提供了发送不同节点的Ajax请求的URL

visibleLevel【number】：默认展开几级

nodeId【String 默:id】：将数据源的一个属性设置为每个OrgChart节点的唯一标识符。

nodeTitle【String 默:name】：将数据源的一个属性设置为OrgChart节点标题段的文本内容

nodeContent【String】：将数据源的一个属性设置为OrgChart节点的内容部分的文本内容。

nodeTemplate【function】：它是一个模板生成函数，用于定制任何复杂的节点内部结构

createNode【function】：它是用于自定义每个OrgCad节点的回调函数

parentNodeSymbol【String 默:fa-users】：使用图标暗示该节点有子节点

exportButton【boolean 默:false】：是否启用OrgChar的导出按钮

exportFilename【String 默:OrgChart】：当输出当前的OrgChart作为图片时，它是文件名。

exportFileextension【String 默:png】：可用的值是PNG和PDF。

chartClass【String】：当你想在一个页面上实例化多个orgcharts 时，你应该添加不同的类名来区分它们。

draggable【boolean 默:false】：用户可以拖动和删除OrgChart节点

dropCriteria【function】：用户可以构造自己的标准来限制拖动节点和删除区域之间的关系

initCompleted【function】：经常知道您的表何时已经完全初始化、数据加载和呈现，尤其是当使用Ajax数据源时