-
Notifications
You must be signed in to change notification settings - Fork 1
/
test.html
135 lines (123 loc) · 4.16 KB
/
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>GraphVis基础-分组</title>
<!-- 界面引入GraphVis可视化核心组件库 -->
<script src="http://media.graphvis.cn/libs/graphvis.20220327.min.js"></script>
</head>
<body>
<!-- 定义画布展示元素,id将被用来设置可视化区域，需要指定width和height样式 -->
<div id="graph-panel" style="width:100%;height:calc(100vh - 16px);background-color:#fafafa;"></div>
<script type="text/javascript">
//GraphVis可视化对象通用配置项
var config = {
node: { //节点的默认配置
label: { //标签配置
show: true, //是否显示
color: '20,20,20', //字体颜色
font: 'normal 11px Arial', //字体大小及类型
textPosition: 'Middle_Center', //文字位置 Top_Center,Bottom_Center,Middle_Right,Middle_Center
},
shape: 'rect',
width:130,
height:30,
color: '220,250,250', //节点颜色
selected: { //选中时的样式设置
borderColor: '80,120,255', //选中时边框颜色
borderAlpha: 1, //选中时的边框透明度
borderWidth: 2 //选中时的边框宽度
}
},
link: { //连线的默认配置
label: { //连线标签
show: false, //是否显示
color: '50,50,50', //字体颜色
font: 'normal 13px Arial', //字体大小及类型
},
lineType: 'hbezier',//direct,hbezier
color: '160,160,160', //连线颜色
showArrow: true //显示连线箭头
},
wheelZoom: 0.8, //开启鼠标滚轮缩放
highLightNeiber: false //相邻节点高亮开关
};
//1、创建GraphVis对象，进行方法调用
var visgraph = new VisGraph(document.getElementById('graph-panel'), config);
//2、图示例数据结构
/* var graphData={
nodes:[
{id:'tableA-column1',label:'tablea_column1',type:'tableA',x:100,y:100},
{id:'tableB-column1',label:'tableb_column1',type:'tableB',x:350,y:100}
],
links:[
{source:'tableA-column1',target:'tableB-column1'}
]
}; */
//模拟组织图示例数据
var tableColumnRelation={nodes:[],links:[]};
var tableName,cloumnObj,relateObj;
for(var i=1;i<=3;i++){
tableName = 'table'+i;
for(var j=1;j<=20;j++){
cloumnObj = {
id:tableName+'_column'+j,
type:tableName,
x: 280 * i,
y: 100 + (j*31)
};
tableColumnRelation.nodes.push(cloumnObj);
if(i > 1){
relateObj = {
source:'table'+(i-1)+'_column'+j,
target:tableName+'_column'+j
};
tableColumnRelation.links.push(relateObj);
}
}
}
//绘图
visgraph.drawData(tableColumnRelation);
//visgraph.setZoom('auto');//自动缩放
//visgraph.setZoom('zoomIn');//缩小一下
//按照类型对可视化节点分组
var tableColumnGroup = {};
var columnGroup = null;
visgraph.nodes.forEach(node =>{
columnGroup = tableColumnGroup[node.type];
if(columnGroup == null){
tableColumnGroup[node.type]=[node];
}else{
columnGroup.push(node);
}
});
//将可视化节点对象添加到创建的分组内
var randomColor='120,100,240';
for(var tableName in tableColumnGroup){
var tableGroup = visgraph.addNodesInGroup({
label:tableName,
color:'230,230,230',
alpha:1
},tableColumnGroup[tableName]);
randomColor = visgraph.randomColor();
tableGroup.headerColor=randomColor;//头部颜色
tableGroup.borderWidth=0;//默认边框宽度
tableGroup.borderColor=randomColor;//边框颜色
tableGroup.selectedBorderWidth=2;//选中时的边框宽度
tableGroup.selectedBorderColor=randomColor;//选中颜色
tableGroup.childDragable=false;//内部元素是否可拖动
//tableGroup.dragable=false;//分组是否可拖动
tableGroup.headerHeight=36;//头部高度
tableGroup.padding=15; //内边距
tableGroup.textAlign = 'center';//left,center,right
}
visgraph.setZoom('auto');//自动缩放
//重新设置连线样式
visgraph.links.forEach(link =>{
link.arrowType='triangle'; //arrow 箭头样式
link.lineWidth = 2;
});
</script>
</body>
</html>