AntV G6绘制流程图学习例子
- 下面代码可以直接贴到html文件中运行看效果。
- 代码说明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://gw.alipayobjects.com/as/g/datavis/g6/1.1.6/index.js"></script>
</head>
<body>
<div id="c1"></div>
<script type="text/javascript">
var Util = G6.Util;
// 设置数据
var data = {
"source": {
"nodes": [
{
"shape": "circle",//节点形状，默认矩形， circle圆形，rhombus菱形，可放图片url
"label": "开始",//节点名称
color:'red',//设置节点背景色
"size": [88,40],//节点框大小（长宽）
"x": 720,//水平坐标，浏览器右上角起到左边距离
"y": 100,//垂直坐标，浏览器右上角起到下边距离
"id": "开始"//本节点id
},
{
"shape": "square",
"label": "招聘管理员审批",
color:'blue',
"size": [88,40],
"x": 720,
"y": 300,
"id": "招聘管理员审批"
},
{
shape: 'circle',
"label": "关闭",
"size": [88,40],
"x": 720,
"y": 600,
"id": "关闭"
},
{
"shape": "rhombus",
"label": "直接结束（箭线说明）",
"size": [100,30],
"x": 500,
"y": 400,
"id": "左侧线"
}
],
"edges": [
{
"shape": "arrow",
"source": "开始",//源节点id
"target": "关闭",//目标节点id
color:'black',//设置箭线背景色
"id": "huixian7",//箭线id
"controlPoints": [
{
"x": 0,
"y": 0
},
{
"x": 500,//箭线 第1个折点x坐标
"y": 100//箭线 第1个折点y坐标
},
{
"x": 500,//箭线 第2个折点坐标
"y": 600//箭线 第2个折点y坐标
},
{
"x": 0,
"y": 0
}
]
},
{
"shape": "arrow",
"source": "开始",
"target": "招聘管理员审批",
color:'red',
"id": "huixian1",
"controlPoints": [
{
"x": 720,
"y": 240
},
{
"x": 720,
"y": 140
}
]
},
{
"shape": "arrow",
"source": "招聘管理员审批",
"target": "关闭",
"id": "huixian2",
"controlPoints": [
{
"x": 0,
"y": 0
},
{
"x": 720,
"y": 440
},
{
"x": 0,
"y": 0
}
]
}
]
}
};
// 配置G6画布
var net = new G6.Net({
id: 'c1', // 容器ID
fitView: 'autoZoom',
mode: 'none',
width: 500, // 画布宽
height: 500 // 画布高
});
// 载入数据
net.read(Util.clone(data));
// 渲染关系图
net.render();
</script>
<br>
○ js中data是一个json变量，里面有两个关键对象“nodes、edges”，分别来描述节点、节点间剪线。<br>
○ 更多“nodes、edges”信息见代码中说明部分。
</body>
</html>
AntV G6绘制流程图学习例子的更多相关文章
- React使用AntV G6实现流程图
安装 npm install @antv/g6 --save 引用 import G6 from '@antv/g6' 自定义节点 /** * 方式一 */ G6.registerNode('rect ...
- antV G6流程图在Vue中的使用
最近我司项目中需要加入流程图制作功能,于是乎百度各种找可视化绘制拓扑图的轮子,大部分都是国外的,看文档太吃力,不过好在最终让我发现了AntV G6流程图图表库,最新版为2.0,不过编辑器在2.0版本还 ...
- 记录使用echarts的graph类型绘制流程图全过程（二）- 多层关系和圆形图片的设置
本文主要记录在使用echarts的graph类型绘制流程图时候遇到的2个问题:对于圆形图片的剪切和多层关系的设置 图片的设置 如果用echarts默认的symbol参数来显示图片,会显示图片的原始状态 ...
- React + umi +antd+antv/g6 实现力图
官方示例效果:http://antv.alipay.com/zh-cn/g6/2.x/demo/net/2017-link-data.html 改编效果: 实现步骤: 环境:nodejs.yarn/n ...
- 玩转控件:GDI+动态绘制流程图
前言 今天,要跟大家一起分享是"GDI+动态生成流程图"的功能.别看名字高大上(也就那样儿--!),其实就是动态生成控件,然后GDI+绘制直线连接控件罢了.实际项目效果图如下 ...
- vue结合antV/g6 实现网络拓扑图
最近很多业务场景都会需要用到拓扑图,翻找了很多资料,最后选择了antV/g6,主要原因有以下几点: 1.阿里出品,所以框架的成熟性有保障 2.业务场景契合(1.规则拓扑图:2.动画流向:每个节点会有流 ...
- javascript闭包学习例子
javascript中的闭包个很让人头疼的概念.总结一下 闭包是指有权访问一个函数作用域中的变量的函数.创建闭包最常见的方式,是在一个函数内部创建另一个函数,用return返回出去. 使用闭包可能造成 ...
- or1200下Raw-OS学习(例子篇)
没有图我说个~毛(J)线(B)~对吧??? 直接上一个以前做过的项目来说说怎么去从一个前后台的程序过度到利用操作系统去管理的你代码吧~以前想过直接用事件驱动的框架去编写代码的,无奈这方面的资料实在太少 ...
- python学习2：turtle的使用蟒蛇绘制的学习以及自己摸索的等边三角形绘制（跟随mooc学习）
首先先放上蟒蛇的绘制程序 import turtle#引入外部库#def保留字用于 定义函数 def drawSnake(rad,angle,len,neckrad): for i in range( ...
随机推荐
- SQL-57 使用含有关键字exists查找未分配具体部门的员工的所有信息。
题目描述 使用含有关键字exists查找未分配具体部门的员工的所有信息.CREATE TABLE `employees` (`emp_no` int(11) NOT NULL,`birth_date` ...
- ATOM：亮瞎程序员双眼的编辑器插件横空出世
Atom 编辑器有一个叫 activate-power-mode,啥玩意?看下面的动图吧,非常有 Power ,有木有!!!自带眩晕特技,有木有!
- PAT B1013
PAT B1013 标签(空格分隔): PAT 解法:埃氏筛法 注意点: 1. 由于不知道第n个素数有多大,所以要用一个大的数组来储存结果. 2. 注意输出格式,末尾不能有多余空格 #include ...
- SpringMVC云题库错题及答案汇总-2
此题目考察的是SpringMVC-注解驱动控制器,注释类型的范围: A.处理requet uri 部分的注解: @PathVariable; B.处理request header部分的注解: @Req ...
- docker学习常用指令---第五章节
前面我们了解了docker的基本概念,和docker镜像,端口相关的内容.在具体的实际操作过程中,我们需要了解一些相关的docker操作指令. 一.Docker save指令 指令功能:将指定镜像保存 ...
- 二、redis持久化
一.redis持久化 1 RDB持久化(定redis的数据定时dump到磁盘上的RDB持久化)RDB持久化是指在指定的时间间隔内将内存中的数据集快照写入磁盘,实际操作过程是fork一个子进程,先将数据 ...
- 第八周学习笔记-ADO.Net中DataTable的应用
ADO.Net中DataTable的应用 一.知识点描述 1.概述:DataTable是一个临时保存数据的网格虚拟表(表示内存中数据的一个表),是ADO.Net库中的核心对象. 2.DataTabl ...
- ./sample_mnist: error while loading shared libraries: libnvinfer.so.4: cannot open shared object file: No such file or directory
Your library is a dynamic library. You need to tell the operating system where it can locate it at r ...
- 丰富的else语句以及简介的with语句
1.if···else略 2.while.for与else Python中的循环语句(无论是while 还是for)中,经常配合continue和break语句,此时,可以和else搭配使用,当循环正 ...
- jdk环境变量配置改变不生效的问题
在工作中两次遇到jdk配置上的这个问题:将环境变量中的jdk路径修改之后,使用-version查看,版本号还是之前的,也就是说修改未生效.甚至当我将Path变量中的jdk路径配置都删除了之后,使用-v ...