orgChart的简单使用,实现树状图结构
还不知道这个插件的小伙伴可以先去官网下载,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数据源时
orgChart的简单使用,实现树状图结构相关推荐
- 组织结构图OrgChart.js的简单使用,实现树状图结构
OrgChart.js是什么? 基于ES6的组织结构图插件. 特征 支持本地数据和远程数据(JSON). 基于CSS3过渡的平滑扩展/折叠效果. 将图表对齐为4个方向. 允许用户通过拖放节点更改组织结 ...
- orgChart的简单使用,实现树状图、组织结构图结构
还不知道这个插件的小伙伴可以先去官网下载,orgchart官网链接 呐,下载下来就是这样的: 我们把他解压出来: 点进去以后,直接找到index.html文件用浏览器打开,就是这样的啦: 这1--24 ...
- html树状图右侧_树状图及制作方法(Excel 2016/Excel 2013)
↑↑↑关注ExcelEasy,让Excel更简单 树状图是一种展示层次结构数据的图表,可以很好的揭示各类别数据的比例关系及类别内数据的组成结构.今天为大家详细介绍一下树状图的制作方法 树状图在Exce ...
- 使用OrgChart技术流程图(树状图)
基于OrgChart技术流程图[树状图] 一.实现效果图 二.数据集 三.实现思路 1.创建数据封装函数 2.将现有的数据处理成json数组 3.调用closureProcessing()函数,将js ...
- 微信小程序简单树状图的实现
由于微信没有树状图这个组件,自己做了个简简单单的树状图,有需要的可以参考下我这个. 先上图 实现了三级,如果有更多级别的需求,可以参考我的规律进行添加. 下面是wxml的代码 <view> ...
- linux 树状结构图,linux下tree指令的用法, 树状图列出目录, 树状图逐级列出目录...
tree命令,主要功能是创建文件列表,将所有文件以树的形式列出来 linux下的tree就比较强大了,但一般系统并不自带这个命令,需要手动下载安装, 安装 sudo apt install tree ...
- json树状图可视化_12个流行的Python数据可视化库总结
总结了10个不同领域的 Python 数据可视化库,有常用的,也有比较小众的. 1. matplotlib matplotlib是Python数据可视化库的OG.尽管它已有十多年的历史,但仍然是Pyt ...
- Pyecharts树状图:地理图表
Pyecharts树状图:地理图表 文章目录 Pyecharts树状图:地理图表 前言 一.地理图表 1. 基本的国家地图(瑞士) 2. 在地图上展示动态运动效果 3. 分段展示图 4. 省市图 5. ...
- 如何在 LaTeX 中画一个树状图(使用tikz和tikz-qtree包中的宏绘制树、森林、二叉树)
简单介绍 在计算机相关的文章中,树状图是最常见的几种图之一.树状图经常被用来用来演示结构.层次.算法等内容.而二叉树是最基础的树状图之一,掌握二叉树的画法就可以用图像展示一些算法或者数据结构了. 在 ...
最新文章
- 【运营】策划朋友圈营销必知的微信八大“封杀”规则
- java登录界面命令_Java命令行界面(第26部分):CmdOption
- java设计模式并发_[高并发Java 七] 并发设计模式
- 支付宝ios SDK官方下载页面
- 企业级私有registry Harbor通过https访问的详细配置
- 外贸全流程30个邮件模板分享!
- ODAC Windows 安装
- j1900适合装哪版群晖_适合新人观看的威联通NAS设置流程详解攻略
- 如何删除电脑上的$RECYCLE.BIN文件夹
- git clone与git pull区别
- Amazon Alexa系列介绍(3)--Alexa Voice Service API介绍
- 2016中国云计算大会
- 线性回归实战【房价预测】
- zoj 1905 Power String(后缀数组)
- Python自动化测试框架
- AD(Altium Designer)PCB布线中的“格式刷”,助力快速布局布线
- python远程安装软件_在家想远程公司电脑?Python + 微信一键连接!
- This beta version of Typora is expired, please download and install a newer;Typora的测试版已过期,请下载并安装更新版本
- ISC2500-SCT\ISC2500-SCT-E\ISC2500-SCT-S默认IP地址是多少?
- java调用海康威视sdk获取车牌号demo