当前位置：首页 > 软件库 > jQuery 插件 > jQuery图表 >

OrgChart

组织结构图插件

授权协议 MIT

开发语言 JavaScript

所属分类 jQuery 插件、 jQuery图表

软件类型开源软件

地区国产

投递者邵子平

操作系统跨平台

开源组织无

适用人群未知

软件官网

软件文档

官方下载

软件概览

从前为了构造漂亮些的组织结构图或树状结构图，我们不得不依靠较复杂的SVG或Canvas库，现在我们有了门槛更低更具亲和力的纯DOM解决方案 -- OrgChart。以下给出主要特性，看是否复合大家胃口：

支持<ul>，json, ajax数据源；
用户可以对展开/折叠结果图中的节点；
用户可以设置结构图的朝向；
用户可以通过拖拽节点到其他节点来改变图的结构；
用户可以对图中的节点进行增删节点，并导出最终的结构关系；
支持导出结构图为png图片；
支持对结构图的缩放和平移。

示例代码：

    var datascource = {
      'id': '1',
      'name': 'Lao Lao',
      'title': 'general manager',
      'children': [
        { 'id': '2', 'name': 'Bo Miao', 'title': 'department manager' },
        { 'id': '3', 'name': 'Su Miao', 'title': 'department manager',
          'children': [
            { 'id': '4', 'name': 'Tie Hua', 'title': 'senior engineer' },
            { 'id': '5', 'name': 'Hei Hei', 'title': 'senior engineer',
              'children': [
                { 'id': '6', 'name': 'Pang Pang', 'title': 'engineer' },
                { 'id': '7', 'name': 'Xiang Xiang', 'title': 'UE engineer' }
              ]
            }
          ]
        },
        { 'id': '8', 'name': 'Yu Jie', 'title': 'department manager' },
        { 'id': '9', 'name': 'Yu Li', 'title': 'department manager' },
        { 'id': '10', 'name': 'Hong Miao', 'title': 'department manager' },
        { 'id': '11', 'name': 'Yu Wei', 'title': 'department manager' },
        { 'id': '12', 'name': 'Chun Miao', 'title': 'department manager' },
        { 'id': '13', 'name': 'Yu Tie', 'title': 'department manager' }
      ]
    };


    $('#chart-container').orgchart({
      'data' : datascource,
      'nodeContent': 'title',
      'nodeID': 'id',
      'createNode': function($node, data) {
        var secondMenuIcon = $('<i>', {
          'class': 'fa fa-info-circle second-menu-icon',
          click: function() {
            $(this).siblings('.second-menu').toggle();
          }
        });
        var secondMenu = '<div class="second-menu"><img class="avatar" src="../img/avatar/' + data.id + '.jpg"></div>';
        $node.append(secondMenuIcon).append(secondMenu);
      }
    });

使用案例

vue 使用orgChart，实现简单树状结构

一、安装 npm install vue-orgchart -S 在min.js中 import 'vue-orgchart/dist/style.min.css' 二、模板 <template> <div> <vo-basic :data="chartData"></vo-basic> </div> </template> <script> import { VoBasi
可视化图表（ECharts、orgchart）

一、ECharts 官网：https://echarts.apache.org/examples/zh/index.html 常用的饼图、柱状图、关系图 html中js文件引入: <link type="text/javascript" src="../eCharts-4/eCharts4.js" /> <link type="text/javascript" src="../OrgChart-m
orgChart的简单使用,实现树状图、组织结构图结构

还不知道这个插件的小伙伴可以先去官网下载，orgchart官网链接呐，下载下来就是这样的：我们把他解压出来：点进去以后，直接找到index.html文件用浏览器打开，就是这样的啦：这1--24都是样式样例了，大家可以任意点进去查看啦、学习套用啦。。。接下来就附上我所写出来的效果图【我修改了一点它的js和css代码，红色为所占百分比】：然后附上代码，仅供参考，如有不足，还请赐教：首先数
组织结构图OrgChart.js

环境配置先引入两个文件： <link href="https://fonts.googleapis.com/css?family=Gochi+Hand" rel="stylesheet"> <script type="text/jscript" src="https://balkangraph.com/js/latest/OrgChart.js"></script> 先看一下简单的demo： H
orgChart实现多重树状图结构

OrgChart.js是什么？基于ES6的组织结构图插件。特征支持本地数据和远程数据（JSON）。基于CSS3过渡的平滑扩展/折叠效果。将图表对齐为4个方向。允许用户通过拖放节点更改组织结构。允许用户动态编辑组织图并将最终层次结构保存为JSON对象。支持将图表导出为图片。支持平移和缩放用户可以采用多种解决方案来构建庞大的组织结构图（请参考多层或混合布局部分）支持触摸的移动设备
关于OrgChart中toggleSiblingsResp属性不起作用的一些解决方法（OrgChart去掉多余的箭头）

最近工作中有个需求是生成组织结构图，看了许多案例之后决定选择OrgChart来实现这个需求，但是在实践中发现每一个节点如果附近存在直接节点，则会出现箭头，点击箭头能够显示或隐藏一系列节点，其效果实在不尽人意，无奈toggleSiblingsResp属性也不起作用，只好从源码着手修改。一般来说，只有向下扩展的箭头是有用的，其余三个我都不需要。我的修改全过程是这样的。一、我打开浏览器的开发者模式，

OrgChart

同类工具

相关阅读

相关文章

相关问答

相关文档