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( ...
随机推荐
- 命令提示符出现-bash-4.1$如何解决
故障原因:用户模式/etc/skel内容丢失 解决方法 复制etc/skel里内容到当前用户 [root@web01 ~]# su - test -bash-4.1$ cp /etc/skel/.ba ...
- 关于ijkplayer下载的demo不能运行，这是因为FFmpeg
前提是你在Mac上已经配置了 homebrew 包管理工具 关于ijkPlayer的demo和framework的使用,也许当直接下载下来不能使用,这时候你需要再你下载的当前目录下运行,你看下自己的目 ...
- SQLZOO网页中SQL的答案(SELECT from world篇)
SELECT from world篇 11. 题目: The CASE statement shown is used to substitute North America forCaribbean ...
- SharePoint Framework 基于团队的开发（五）
博客地址:http://blog.csdn.net/FoxDave 升级SharePoint Framework项目 部署SharePoint自定制解决方案到生产环境并不意味着生命周期的结束,因为还有 ...
- jsp视频如何播放
网站开发小白们对如何插入视频有较大的困扰,一段时间不知道从何下手,想在数据库里面直接导入,但没能成功,后又尝试直接在myeclipse里面直接放入视频. 对于不同的播放器,视频的格式也有要求,建议使用 ...
- 接口自动化：pytest----环境搭建
出处:https://www.cnblogs.com/yoyoketang/p/9356693.html 前言: python鄙视链:pytest 鄙视 > unittest 鄙视 > r ...
- 计算1~100之间，能被3整除但是不能被7整除的数的和（C语言）
#include<stdio.h> int main(agrc *agrv) { int n,i; int sum=0; scanf("%d",&n); for ...
- ansible小计
一.忽略hosts,只在一台机器上执行: /usr/local/bin/ansible-playbook /app/ansiblecfg/ztr/ent_extract.yml --limit=10. ...
- 1--HTTP基础知识
1. HTTP工作流程 客户端与服务器要建立连接(TCP) 客户端向服务端发起HTTP请求 服务器做出应答,表示对客户端请求的应答 客户端接受服务器所返回的信息 2. HTTP之URL 协议部分:HT ...
- flex 布局 实现电商网页菜单的多级分类展示
用flex,实现多级菜单分类展示,这里记录一下,方便以后查阅. 效果展示如下: 跟上面floor的设计差不多,鼠标hover全部商品分类的时候,将下拉列表展示在指定区域,这个类似鼠标悬浮商品图片期待上 ...