- 下面代碼可以直接貼到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>