从前为了构造漂亮些的组织结构图或树状结构图，我们不得不依靠较复杂的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);
}
});
-
一、安装 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 官网：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官网链接 呐，下载下来就是这样的： 我们把他解压出来： 点进去以后，直接找到index.html文件用浏览器打开，就是这样的啦： 这1--24都是样式样例了，大家可以任意点进去查看啦、学习套用啦。。。 接下来就附上我所写出来的效果图【我修改了一点它的js和css代码，红色为所占百分比】： 然后附上代码，仅供参考，如有不足，还请赐教： 首先数
-
环境配置 先引入两个文件： <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.js是什么？ 基于ES6的组织结构图插件。 特征 支持本地数据和远程数据（JSON）。 基于CSS3过渡的平滑扩展/折叠效果。 将图表对齐为4个方向。 允许用户通过拖放节点更改组织结构。 允许用户动态编辑组织图并将最终层次结构保存为JSON对象。 支持将图表导出为图片。 支持平移和缩放 用户可以采用多种解决方案来构建庞大的组织结构图（请参考多层或混合布局部分） 支持触摸的移动设备
-
最近工作中有个需求是生成组织结构图，看了许多案例之后决定选择OrgChart来实现这个需求，但是在实践中发现每一个节点如果附近存在直接节点，则会出现箭头，点击箭头能够显示或隐藏一系列节点，其效果实在不尽人意，无奈toggleSiblingsResp属性也不起作用，只好从源码着手修改。 一般来说，只有向下扩展的箭头是有用的，其余三个我都不需要。 我的修改全过程是这样的。一、我打开浏览器的开发者模式，
-
主要内容：GWT Google Charts 组织结构图 配置,GWT Google Charts 组织结构图 示例以下是组织结构图的示例。 我们已经在《GWT Google Charts 入门程序》章节中看到了用于绘制图表的基本步骤。现在，让我们看一个组织结构图的例子。 GWT Google Charts 组织结构图 配置 我们使用OrgChart类来显示组织结构图。 GWT Google Charts 组织结构图 示例 输出结果为：
-
库被设计为模块化的，同时保持必须包括的头文件的数量以获得相当低的基本功能。 库的结构也故意保持简单，因为我们都喜欢简单。 以下是头文件组织的一般概述。 该库提供的所有标题的列表也可在左侧面板（标题标签下）看到，以备您需要更多详细信息。 boost/hana.hpp 这是库的主标题，其中包括库的整个公共接口。请注意，外部适配器，实验功能和实现细节不包括在这个头文件中，但是，因为其中一些需要额外的依赖
-
本书分为三个主要部分，每部分包含关于一个特定领域的库，不过肯定也有一些重叠的地方。这种分类可以让你更容易地找到与你的任务相关的信息，也使得阅读本书时可以更方便地找到相关的主题。大多数情况下，每章讨论一个单独的库，但也有时会一章里讨论一小组的库。 排版及编码的风格尽量保持简单。在这方面有很多好的方法，我只是挑选了一种我认为大多数人会习惯的方式，这样可以更容易传递所要的信息。另外，本书的代码风格会通过
-
需要组织架构图插件，最好是纵向、横向能够结合的，谢谢！
-
freeRTOS为每个支持的处理器分支都提供了一个提前配置好的，包含必要的源代码及头文件的示例工程。强烈推荐以这些示例工程为基础创建用户自己的应用。这篇文档就是帮助如何去找到和理解这些示例工程。 目录结构 从官网下载的freeRTOS源代码中包含很多已经移植好的例程，虽然文件数量很多，但是其实freeRTOS的内核文件仅仅只包含3个文件(软件定时器、事件组、协程都是可选功能)。 下载文件的根目录下
-
本书结构 第二章首先会介绍一些Go的基本数据结构的实现，如slice和map。 第三章会介绍Go语言中的函数调用协议。 第四章分析runtime初始化过程。 第五章是goroutine的调度。 第六章分析Go语言中的内存管理。 第七章分析Go语言中一些高级数据结构的实现。 第八章是网络封装的实现 第九章讲cgo使用的一些技术 第十章是其它一些杂项 推荐的阅读方式 本书的写作基本上是按一个循序浅近的
-
正如之前提到的，测试是一个复杂的概念，而且不同的开发者也采用不同的技术和组织。Rust 社区倾向于根据测试的两个主要分类来考虑问题：单元测试（unit tests）与 集成测试（integration tests）。单元测试倾向于更小而更专注，在隔离的环境中一次测试一个模块，也可以测试私有接口。集成测试对于你的库来说则完全是外部的。他们与其他用户采用相同的方式使用你的代码，他们只针对公有接口而且每
-
本书分为以下几个部分： Part I - 简介 Part I 解释了一些安装 LFS 过程中需要注意的重要事项，这部分还提供了本书的一些要点信息。 Part II - 构建前的准备工作 Part II 描述了安装前的准备工作：准备一个新的分区、下载软件包和建立临时编译工具链。 Part III - 构建 LFS 系统 Part III 引导读者逐步建立整个 LFS 系统：一个一个编译安装全部的软件