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标签中

        //最重要的两个源文件的引入vis.js和vis-network.min.css注意路径不要错

    

    vis-network.min.css" rel="stylesheet" type="text/css" />

 

   

 

 

---在body标签中

  //创建画布网状图区域

 

效果如下：

 

 

接下来是对数据设置中数据的操作

在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>

标签中加οnlοad="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);
});}

全部代码如下：

<html>
<head>
    <title>Network | Basic usagetitle>

    <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 οnlοad="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>