Vis.js使用
Vis.js的使用
vis.js 基于浏览器的动态可视化库。该库被设计为易于使用，处理大量的动态数据，并支持对数据的操作和交互。该库由组件DataSet，Timeline，Network，Graph2d和Graph3d组成。这里主要用到Network（网状图）
network实例请参考官网：http://visjs.org/network_examples.html。
network是一种可视化的网络和网络组成的nodes节点和edges边缘。可视化易于使用，并支持自定义形状、样式、颜色、大小、图像等。网络可视化工作在任何现代浏览器上都能达到几千个节点和边缘。为了处理更大数量的节点，网络具有集群支持。网络使用HTML画布进行渲染。
Network创建：
Network创建
创建一个Network类型的vis是很容易的。要求您包括vis.js和css文件，这些文件可以在这里得到。你所需要一个容器div来告诉你在哪里放置你的网络，在代码中，这看起来像：
----在head标签中
<head>
//最重要的两个源文件的引入vis.js和vis-network.min.css注意路径不要错
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
---在body标签中
<body>
<div id="mynetwork"></div> //创建画布网状图区域
<script type="text/javascript">
//创建节点个数
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]);
//创建关系线,节点与哪个节点相连接
var edges = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
]);
// 创建一个网状图
var container = document.getElementById('mynetwork');
//以vis格式使用数据
var data = {
nodes: nodes,
edges: edges
};
var options = {};//数据设置（可对创建的节点，关系线进行设置），此处暂无设置
// 初始化网状图（把网状图实例化）
var network = new vis.Network(container, data, options);
</script>
</body>
</html>
效果如下：
接下来是对数据设置中数据的操作
在var options = {}中进行编辑,对接点和边进行设置:
var options = {
nodes:{//节点控制
borderWidth: 5,//节点边框宽度设置
borderWidthSelected: 10,//点击选中时的宽度设置、
color: {
border: 'red',//边框颜色的设置
},
},
edges:{//关系线控制
width:2,//关系线宽度
arrows:{//箭头
to:{enabled:true,//箭头是否显示、开启
scaleFactor:0.5,//箭头的大小
type:'arrow',//箭头的类型：circle,bar,arrows
},
},
font:{
size:5,
color:'green',
align: 'horizontal',
},
length:50,//关系线线长设置，数字较大最好以100位单位修改可看出差异
dashes:false,//关系线虚线，false不是，true是
arrowStrikethrough: true,//关系线与节点处无缝隙
color: {
color:'red',//关系线颜色设置
highlight:'black',//点击关系线时的颜色
},
},
};
效果如下：
节点的形状是可控制的，默认是椭圆形，可指定形状可以有正方形，圆形，三角形，倒三角形，星形，正六边形，点（圆点），图片，图标等，注意：没有矩形（长方形）
//修改创建节点个数
var nodes = new vis.DataSet([
{id:1, label: '1',shape: 'dot',size:5, color:'red',},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]);
Shape形状属性，指定是点，如图，1节点成一个点
也可指定位square正方形
也可指定图片，图片要在当先代码路径下
var nodes = new vis.DataSet([
{id: 1, label: '',shape: 'image', image:'xt.png',size:30,physics:false,
fixed: {
x:false,
y:false,
},
},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3',shape:'circle',size:20,color:'gold',},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]);
创建节点时配置fixed属性true，默认使false,固定，使节点1无法拖动。
var nodes = new vis.DataSet([
{id:1, label: '1',shape: 'square', color:'red',
fixed: {
x:true,
y:true,
},},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]);
创建节点配置x、y属性固定节点绝对位置，每次刷新啊节点位置不变
var nodes = new vis.DataSet([
{id:1, label: '1',shape: 'square', color:'red',
x:1000,
y:800
},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]);
创建节点配置physics属性，物理属性true节点受重力影响,拖动后会自动向下滑动，false时不会向下滑动
属性固定节点绝对位置，每次刷新啊节点位置不变
var nodes = new vis.DataSet([ {id:1, label: '1',shape: 'square', color:'red',
physics:true,
x:1000,
y:800
},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]);
network.on函数可以覆盖叠加节点形状
节点1的创建
{id: 1, label: '',shape: 'dot',title:'',size:20, color:'#0066FF',size:30,physics:false,
fixed: {
x:false,
y:false,
},
},
注意network.on一定要放到var network = new vis.Network(container, data, options);代码之后否则无法加载。
network.on("afterDrawing", function (ctx) {//正方形嵌入圆形中
var nodeId =1;
var nodePosition = network.getPositions([nodeId]);
ctx.strokeStyle = 'white';
ctx.fillStyle = 'white';
ctx.square(nodePosition[nodeId].x, nodePosition[nodeId].y,19);
ctx.fill();
ctx.stroke();
});
效果如图：
单个节点的控制可以在单个创建节点时进行设置：
例如对节点3进行设置，形状，颜色，大小
{id: 3, label: 'Node 3',shape:'circle',size:20,color:'gold',},
关系线单个的配置：长度（加长200，缩短-200），颜色，宽度（粗细）
var edges = new vis.DataSet([
{from: 1, to: 2,length:200,color:{color:'Chocolate',},width:4},
{from: 2, to:3},
{from: 3, to: 4},
{from: 4, to: 5}
]);
伪矩形（长方形）的绘制，找一条关系线，定义好合适的长度，加宽，并设置弯曲。
节点：增加节点6,7点形，尺寸最小
关系线：4----5箭头状态关闭，5---6，长度30，使关系线平滑，箭头状态关闭
var nodes = new vis.DataSet([
{id: 1, label: '',shape: 'image',title:'',image:'xt.png',size:30,physics:false,
fixed: {
x:false,
y:false,
},
},
{id: 2, label: 'Node 3'},
{id: 3, label: 'Node 3',shape:'circle',size:20,color:'gold',},
{id: 4, label: 'Node 4',},
{id: 5, label: 'Node 5',shape:'dot',size:0.1, },
{id: 6, label: 'Node 6',shape:'dot',size:0.1,},
{id: 7, label: 'Node 7',shape:'dot',size:0.1, },
]);
//创建关系线,节点与哪个节点相连接
var edges = new vis.DataSet([
{from: 1, to: 2,title: '',length:200,color:{color:'Chocolate',},width:4},
{from: 2, to:3},
{from: 3, to: 4},
{from: 4, to: 5, arrows:{to:{enabled:false,},}},
{from: 5, to: 6,width:30,length:'30',
smooth:{//使关系线平滑
enabled:true,//状态开启
type:'continuous',
forceDirection:'none',
roundness:'0',
},
arrows:{to:{enabled:false,},
},
},
{from: 6, to: 7},
]);
添加进度条：
第二个script标签
<script type="text/javascript">
function draw() {
所有的代码：节点创建，关系线创建，创建一个网状图，以vis格式使用数据
，节点控制，关系线控制………
}
<script>
<body>标签中加<body onload="draw()">
注意network.on，network.once一定要放到var network = new vis.Network(container, data, options);代码之后否则无法加载。
network.on("stabilizationProgress", function(params) {
var maxWidth = 496;
var minWidth = 20;
var widthFactor = params.iterations/params.total;
var width = Math.max(minWidth,maxWidth * widthFactor);
document.getElementById('bar').style.width = width + 'px';
document.getElementById('text').innerHTML = Math.round(widthFactor*100) + '%';
});
network.once("stabilizationIterationsDone", function() {
document.getElementById('text').innerHTML = '100%';
document.getElementById('bar').style.width = '496px';
document.getElementById('loadingBar').style.opacity = 0;
// really clean the dom element
setTimeout(function () {document.getElementById('loadingBar').style.display = 'none';}, 500);
});}
全部代码如下：
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="js/vis.js"></script>
<link href="css/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 1100px;
height: 610px;
border: 1px solid lightgray;
}
#he{
position: absolute;
right: 120px;
top: 20px;
z-index:99;
margin:0;
}
#loadingBar {
position:absolute;
top:0px;
left:0px;
width: 1100px;
height: 610px;
background-color:rgba(200,200,200,0.8);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
opacity:1;
}
#wrapper {
position:relative;
width:900px;
height:900px;
}
#text {
position:absolute;
top:8px;
left:530px;
width:30px;
height:50px;
margin:auto auto auto auto;
font-size:22px;
color: #000000;
}
div.outerBorder {
position:relative;
top:400px;
width:600px;
height:44px;
margin:auto auto auto auto;
border:8px solid rgba(0,0,0,0.1);
background: rgb(252,252,252); /* Old browsers */
background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
border-radius:72px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
#border {
position:absolute;
top:10px;
left:10px;
width:500px;
height:23px;
margin:auto auto auto auto;
box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
border-radius:10px;
}
#bar {
position:absolute;
top:0px;
left:0px;
width:20px;
height:20px;
margin:auto auto auto auto;
border-radius:11px;
border:2px solid rgba(30,30,30,0.05);
background: rgb(0, 173, 246); /* Old browsers */
box-shadow: 2px 0px 4px rgba(0,0,0,0.4);
}
</style>
<script type="text/javascript">
//创建节点个数
function draw() {
var nodes = new vis.DataSet([
{id: 1, label: '',shape: 'image',title:'',image:'xt.png',size:30,physics:false,
fixed: {
x:false,
y:false,
},
},
{id: 2, label: 'Node 3'},
{id: 3, label: 'Node 3',shape:'circle',size:20,color:'gold',},
{id: 4, label: 'Node 4',},
{id: 5, label: 'Node 5',shape:'dot',size:0.1,color:'red',},
{id: 6, label: 'Node 6',shape:'dot',size:0.1,color:'red',},
{id: 7, label: 'Node 7',shape:'dot',size:0.1,color:'red',},
]);
//创建关系线,节点与哪个节点相连接
var edges = new vis.DataSet([
{from: 1, to: 2,title: '',length:200,color:{color:'Chocolate',},width:4},
{from: 2, to:3},
{from: 3, to: 4},
{from: 4, to: 5, arrows:{to:{enabled:false,},}},
{from: 5, to: 6,width:30,length:'30',
smooth:{//使关系线无弯曲
enabled:true,//状态开启
type:'continuous',
forceDirection:'none',
roundness:'0',
},
arrows:{to:{enabled:false,},
},
},
{from: 6, to: 7},
]);
// 创建一个网状图
var container = document.getElementById('mynetwork');
//以vis格式使用数据
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes:{//节点控制
borderWidth: 5,//节点边框宽度设置
borderWidthSelected: 10,//点击选中时的宽度设置、
color: {
border: 'red',//边框颜色的设置
},
},
edges:{//关系线控制
width:2,//关系线宽度
arrows:{//箭头
to:{enabled:true,//箭头是否显示、开启
scaleFactor:0.5,//箭头的大小
type:'arrow',//箭头的类型
},
},
font:{
size:5,
color:'green',
align: 'horizontal',
},
length:50,//关系线线长设置，数字较大最好以100位单位修改可看出差异
dashes:false,//关系线虚线
arrowStrikethrough: true,//关系线与节点处无缝隙
color: {
color:'red',//关系线颜色设置
highlight:'black',//点击关系线时的颜色
},
},
};
// 初始化网状图（把网状图实例化）
var network = new vis.Network(container, data, options);
network.on("stabilizationProgress", function(params) {
var maxWidth = 496;
var minWidth = 20;
var widthFactor = params.iterations/params.total;
var width = Math.max(minWidth,maxWidth * widthFactor);
document.getElementById('bar').style.width = width + 'px';
document.getElementById('text').innerHTML = Math.round(widthFactor*100) + '%';
});
network.once("stabilizationIterationsDone", function() {
document.getElementById('text').innerHTML = '100%';
document.getElementById('bar').style.width = '496px';
document.getElementById('loadingBar').style.opacity = 0;
// really clean the dom element
setTimeout(function () {document.getElementById('loadingBar').style.display = 'none';}, 500);
});}
// network.on("afterDrawing", function (ctx) {//正方形嵌入圆形中
// var nodeId =1;
// var nodePosition = network.getPositions([nodeId]);
// ctx.strokeStyle = 'white';
// ctx.fillStyle = 'white';
// ctx.square(nodePosition[nodeId].x, nodePosition[nodeId].y,19);
// ctx.fill();
// ctx.stroke();
// });
</script>
</head>
<body onload="draw()">
<div id="wrapper">
<div id="mynetwork"></div>
<div id="loadingBar">
<div class="outerBorder">
<div id="text">0%</div>
<div id="border">
<div id="bar"></div>
</div>
</div>
</div>
</div>
</body>
</html>