orgChart的简单使用,实现树状图、组织结构图结构

悠悠 2023-06-25 03:11 2阅读 0赞

还不知道这个插件的小伙伴可以先去官网下载，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】：默认展开几级