组织结构图OrgChart.js的简单使用,实现树状图结构
OrgChart.js是什么?
基于ES6的组织结构图插件。
特征
支持本地数据和远程数据(JSON)。
基于CSS3过渡的平滑扩展/折叠效果。
将图表对齐为4个方向。
允许用户通过拖放节点更改组织结构。
允许用户动态编辑组织图并将最终层次结构保存为JSON对象。
支持将图表导出为图片。
支持平移和缩放
用户可以采用多种解决方案来构建庞大的组织结构图(请参考多层或混合布局部分)
支持触摸的移动设备插件
使用
下载地址
https://github.com/dabeng/OrgChart
引入文件
<link rel="stylesheet" href="css/jquery.orgchart.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.orgchart.js"></script>
注意:这里要引入三个文件,其中第二个JQ库需要自行下载,并且引入
案例
hrml代码
<div id="chart-container"></div>
js代码
<script>
(function($){
$(function() {
var datascource = {
'name': 'Lao Lao',
'title': 'general manager',
'children': [
{ 'name': 'Bo Miao', 'title': 'department manager' },
{ 'name': 'Su Miao', 'title': 'department manager',
'children': [
{ 'name': 'Tie Hua', 'title': 'senior engineer' },
{ 'name': 'Hei Hei', 'title': 'senior engineer',
'children': [
{ 'name': 'Pang Pang', 'title': 'engineer' },
{ 'name': 'Xiang Xiang', 'title': 'UE engineer' }
]
}
]
},
{ 'name': 'Yu Jie', 'title': 'department manager' },
{ 'name': 'Yu Li', 'title': 'department manager' },
{ 'name': 'Hong Miao', 'title': 'department manager' },
{ 'name': 'Yu Wei', 'title': 'department manager' },
{ 'name': 'Chun Miao', 'title': 'department manager' },
{ 'name': 'Yu Tie', 'title': 'department manager' }
]
};
$('#chart-container').orgchart({
'data' : datascource, //数据
'nodeContent': 'title' //内容对应的字段
});
});
})(jQuery)
</script>
效果图如下
![](http://www.yizhanhongtu.cn/zb_users/theme/tpure/style/images/lazyloading.gif)
选项
名称 | 类型 | 必需 | 默认 | 描述 |
---|---|---|---|---|
data | json or string | yes | 数据源用于构建组织结构图。 它可以是json对象或包含ajax请求发送到的URL的字符串。 | |
pan | boolean | no | false | 如果用户启用此选项,则用户可以通过鼠标拖放来平移组织结构图。 |
zoom | boolean | no | false | 如果用户启用此选项,用户可以通过鼠标滚轮缩放/缩小组织结构图。 |
zoominLimit | number | no | 7 | 允许用户设置放大限制。 |
zoomoutLimit | number | no | 0.5 | 允许用户设置缩小限制。 |
direction | string | no | "t2b" | 可用值是t2b(暗示“从上到下”,它是默认值),b2t(暗示“从下到上”),l2r(暗示“从左到右”),r2l(暗示“从右到左”)。 |
verticalLevel | integer(>=2) | no | 用户可以使用此选项从指定级别垂直对齐节点。 | |
toggleSiblingsResp | boolean | no | false | 启用此选项后,用户可以通过单击左/右箭头分别显示/隐藏左/右兄弟节点。 |
nodeTitle | string | no | "name" | 它将datasource的一个属性设置为orgchart节点的title部分的文本内容。 实际上,用户可以创建一个只有nodeTitle选项的简单orghcart。 |
nodeId | string | no | "id" | 它将datasource的一个属性设置为每个orgchart节点的唯一标识符。 |
parentNodeSymbol | string | no | "fa-users" 使用font awesome图标表示该节点具有子节点。 | |
ajaxURL | json | no | 它包括四个特性 ,父母,孩子,兄弟姐妹,家庭(要求父节点和兄弟节点)。 顾名思义,不同的propety提供了发送不同节点的ajax请求的URL。 | |
nodeContent | string | no | 它将数据源的一个属性设置为orgchart节点的内容部分的文本内容。 | |
nodeTemplate | function | no | 它是一个模板生成函数,用于定制任何复杂的节点内部结构。 它只收到一个参数:“data”代表json datasoure,它将用于渲染一个节点。 | |
createNode | function | no | 它是一个用于自定义每个orgchart节点的回调函数。 它收到两个参数:“$node”代表单节点div的jquery对象; “data”代表单个节点的数据源。 | |
exportButton | boolean | no | false | 它启用了orgchart的导出按钮。 |
exportFilename | string | no | "Orgchart" | 将当前组织图导出为图片时,它是文件名。 |
visibleLevel | positive | integer | no | 它表示在最开始的orgchart扩展到的级别。 |
exportFileextension | string | no | "png" | 可用值为png和pdf。 |
chartClass | string | no | "" | 当您想在一个页面上实例化多个组织结构图时,您应该为它们添加不同的类名以区分它们。 |
draggable | boolean | no | false | 如果用户启用此选项,则可以拖放orgchart的节点。 注意:由于对HTML5拖放API的支持不足,此功能在IE上不起作用。 |
dropCriteria | function | no | 用户可以构建自己的标准来限制拖动节点和放置区域之间的关系。 此外,此函数接受三个参数(draggedNode,dragZone,dropZone),只返回boolen值。 | |
initCompleted | function | no | 了解表的完全初始化,数据加载和呈现的时间通常很有用,尤其是在使用ajax数据源时。 它收到了一个参数:“$chart”代表初始化图表的jquery对象。 |
组织结构图OrgChart.js的简单使用,实现树状图结构相关推荐
- orgChart的简单使用,实现树状图结构
还不知道这个插件的小伙伴可以先去官网下载,orgchart官网链接 呐,下载下来就是这样的: 我们把他解压出来: 点进去以后,直接找到index.html文件用浏览器打开,就是这样的啦: 这1--24 ...
- d3.js(v5.7)树状图
一.新建画布 二.数据处理 三.绘制连接线 图示: 四.绘制节点.文字 图示: 五.总结 path元素:其实就是定义了绘图的坐标点,从哪开始,移动到哪,怎样移动(命令) 具体可百度(或许以后我会总结一 ...
- orgChart的简单使用,实现树状图、组织结构图结构
还不知道这个插件的小伙伴可以先去官网下载,orgchart官网链接 呐,下载下来就是这样的: 我们把他解压出来: 点进去以后,直接找到index.html文件用浏览器打开,就是这样的啦: 这1--24 ...
- html树状图右侧_树状图及制作方法(Excel 2016/Excel 2013)
↑↑↑关注ExcelEasy,让Excel更简单 树状图是一种展示层次结构数据的图表,可以很好的揭示各类别数据的比例关系及类别内数据的组成结构.今天为大家详细介绍一下树状图的制作方法 树状图在Exce ...
- 使用OrgChart技术流程图(树状图)
基于OrgChart技术流程图[树状图] 一.实现效果图 二.数据集 三.实现思路 1.创建数据封装函数 2.将现有的数据处理成json数组 3.调用closureProcessing()函数,将js ...
- Plotly.js使用详细介绍(折线图、饼状图、点图、水平条形图、桑基图、树状图、等值线图)
目录 0 写在前面 1 HTML代码 2 折线图 2.1 基本折线图 2.2 复杂折线图 2.2.1 轨迹 2.2.2 布局 3 饼状图 3.1 基本饼状图 3.2 饼图子图 3.3 甜甜圈图 4 点 ...
- 微信小程序简单树状图的实现
由于微信没有树状图这个组件,自己做了个简简单单的树状图,有需要的可以参考下我这个. 先上图 实现了三级,如果有更多级别的需求,可以参考我的规律进行添加. 下面是wxml的代码 <view> ...
- 用D3.js画树状图
做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同 网上有很多这种数据可视化展示的js控件,我这里选择 ...
- d3.js v3版本实现-树状图
参考的例子:http://bl.ocks.org/robschmuecker/7880033 一.为什么选择d3.js 二.d3.js概述 三:树状图实现 1.创建svg 2.在svg元素里面画一个g ...
最新文章
- 读自动驾驶激光雷达物体检测技术(Lidar Obstacle Detection)(3):Segmentation
- 密码学摘要算法之MD5
- SPL spl_autoload_register 初体验 (转)
- C#中析构函数,命名空间及字符串的运用(Ninth day)
- url中携带中文乱码问题
- mysql数据库的变量有哪些_[数据库]MySQL变量
- CTF基本赛制与题型
- CAMoE——屠榜 video retrieval challenge
- 谈论 NOD32: 教育网超级 病毒更新服务器: http://222.197.166.33/main.htm
- ssma5.3_适用于Oracle的Microsoft SQL Server迁移助手(SSMA)v7.1
- VS2010+QT5安装教程
- CloudFlare Full SSL Strict 报错提示 Error 525 SSL handshake failed
- 解决Eclipse修改jsp文件需要重启Tomcat问题
- 论SVGA直播礼物特效对直播平台的重要性
- ATK-ESP8266 串口转WIFI模块 简历
- 爬取斗鱼4300W热度的小姐姐是一种什么样的体验?
- Makefile eval函数
- BiFunction介绍
- 工信部数字电视标准符合性检测中心发布的
- valgrind的使用、原理
热门文章
- oracle 存储过程 状态,Oracle存储过程(定时更新短信状态汇报)
- 手机版qq邮箱一直连接服务器失败,iphone邮箱怎么连接服务器 iphone邮箱无法连接服务器怎么办...
- 安卓系统手机无法连接服务器,安卓手机无法连接服务器
- 客服工作日记-20220815
- ios软键盘弹出布局上移问题
- this 指向以及修改this 指向的方法
- 2022中国建筑行业数字化转型研究报告
- Pythonic骚操作知识点总结(持续更新)
- 遇到mybatis面试问题应该怎么回答
- Integer比较不要使用==使用equals()或Integer.intValue()