vue拓扑图、组织结构图插件使用(orgChart.js)
今天使用orgChart没有找到合适的,所以今天来写篇使用文档。
OrgChart.js是什么?
基于ES6的组织结构图插件。
特征
支持本地数据和远程数据(JSON)。
基于CSS3过渡的平滑扩展/折叠效果。
将图表对齐为4个方向。
允许用户通过拖放节点更改组织结构。
允许用户动态编辑组织图并将最终层次结构保存为JSON对象。
支持将图表导出为图片。
支持平移和缩放
用户可以采用多种解决方案来构建庞大的组织结构图(请参考多层或混合布局部分)
支持触摸的移动设备插件
使用
<link rel="stylesheet" href="../css/jquery.orgchart.css"><script type="text/javascript" src="../js/jquery.orgchart.js"></script>
下载地址
https://github.com/dabeng/OrgChart
案例
1.本地直接生成
hrml代码
<div id="chart-container"></div>
js代码
(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)
效果如下:
Vue js 都可以使用;
vue拓扑图、组织结构图插件使用(orgChart.js)相关推荐
- 组织结构图OrgChart.js的简单使用,实现树状图结构
OrgChart.js是什么? 基于ES6的组织结构图插件. 特征 支持本地数据和远程数据(JSON). 基于CSS3过渡的平滑扩展/折叠效果. 将图表对齐为4个方向. 允许用户通过拖放节点更改组织结 ...
- orgchart.js组织结构图,优雅的方式呈现结构数据
orgchart.js组织结构图,优雅的方式呈现结构数据 orgchart.js组织结构图创建简单.灵活且高度可定制的组织结构图,以优雅的方式呈现结构数据. orgchart.js组织结构图是经理用来 ...
- 组织结构图OrgChart.js
环境配置 先引入两个文件: <link href="https://fonts.googleapis.com/css?family=Gochi+Hand" rel=" ...
- 组织结构图插件_一个简单直接的组织结构图插件
组织结构图插件 Vue-orgchart (vue-orgchart) It's a simple and direct organization chart plugin. Anytime you ...
- [vue] 怎么在vue中使用插件?
[vue] 怎么在vue中使用插件? npm 安装 然后再main.js 引入 最后 vue.use(插件名) 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家 ...
- vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerigh ...
- vue连线 插件_一起写一个即插即用的 Vue Loading 插件
写在之前 实现 Loading 思路上并不困难,只不过是根据请求前后进行设置而已,可当要设置的状态越来越多又不能全局统一设置时,就又变得十分繁琐重复.在 Github 和各个社区站里搜 Loading ...
- vue 图片引入_一个Vue的时间插件
安装 npm install -S hzqing-vue-timeline 如何引入 main.js: // 全局注册import hzqingVueTimeline from 'hzqing-vue ...
- VUE颜色选择器插件vColorPicker
VUE颜色选择器插件vColorPicker 官网 vColorPicker官网跳转 一.安装 npm install vcolorpicker -S 二.在 main.js 文件中引入插件并注册 / ...
最新文章
- 索赔cs1.6最新服务器,成功解决CS1.6刷不出服务器
- Python之初识函数
- 图片怎么优化的8个小技巧
- C# 判断两张图片是否一致,极快速
- 汇编语言数据传送示例
- Mac下文件的编码及修改编码
- Flash上传组件之SWFUpload文件上传
- 70% 的Chrome漏洞是内存安全问题,谷歌和开发人员约法三章
- Linux下配置Hadoop全分布式环境
- EMNLP 2021 | 论辩挖掘在不同领域下的应用
- 分析匿名页(anonymous_page)映射
- 简易版的等待/唤醒方法(sleep,wait,await,park区别)适合面试回答
- 2022美团校招技术岗笔试全部AC_Code分享
- 阿里云大数据ACP认证学习笔记
- c语言灵异事件之“字符串被吞”
- Linux常用命令——最详细!!!!
- 当SWOOLE遇上PROTOCOL
- 用VUE实现注册页(短信验证码登录)
- ubuntu解决网络连接的优先级
- android 连续播放动画,华为充电动画循环播放
热门文章
- NewstartHA 配置技巧
- Holder不等式的证明
- 嵌入式商业智能软件Wyn Enterprise正式步入V5.0时代!
- linux session刷新,linux 定时清理session
- 2018年刑侦科推理试题php版,2018年刑侦科推理试题
- 原创 | ArcGIS中受支持的地图投影
- org.hibernate.UnknownEntityTypeException: Unable to locate persister: com.mm.constract.domain.Contra
- btrace安装,配置,使用,常见异常,解除安全限制
- 《Django By Example》读书笔记 02
- python开发bi报表_bi报表