您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

vis.js绘制网络拓扑图,并且鼠标移上去会有显示效果

<!DOCTYPE html>
<!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF8" />
    <title>
        Vis Network | Edge Styles | Static smooth curves - World Cup Network
    </title>

    <script type="text/javascript" src="js/vis-network.min.js"></script>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/WorldCup2014.js"></script>

    <style type="text/css">
        #mynetwork {
            width: 100%;
            height: 800px;
            border: 1px solid lightgray;
        }
        
        #optionsContainer {
            height: 280px;
        }
        
        * {
            padding: 0;
            margin: 0;
        }
        
        .menu {
            /*这个样式不写,右键弹框会一直显示在画布的左下角*/
            position: absolute;
            background: rgba(3, 3, 3, 0.6);
            border-radius: 5px;
            left: -99999px;
            top: -999999px;
        }
        
        .menu ul {
            list-style: none
        }
        
        .menu ul li {
            padding: 5px 10px;
            color: #ffff;
            border-bottom: 1px solid #ffffff;
            font-size: 14px;
            cursor: pointer;
            list-style: none;
        }
        
        .menu ul li:hover {
            color: #659bc5;
        }
        
        .menu ul li:last-child {
            border-bottom: none;
            padding: 5px 10px 0 10px;
        }
    </style>
</head>

<body>
    <h2>Static smooth curves - World Cup Network</h2>


    <div id="optionsContainer"></div>

    <div id="mynetwork"></div>
    <!--菜单操作-->
    <div id="menuOperation" class="menu" style="display:none;">
        <ul>
            <li><span class="glyphicon glyphicon-off" aria-hidden="true"></span> 下线</li>
            <li><span class="glyphicon glyphicon-road" aria-hidden="true"></span> 通行</li>
        </ul>
    </div>
    <!--节点悬停-->
    <div class="menu" id="divHoverNode" style="display: none;">
        <!--<ul></ul>-->
    </div>
    <script type="text/javascript">
        function redrawAll() {
            var network;
            var container = document.getElementById("mynetwork");
            var options = {
                nodes: {
                    shape: "dot",
                    scaling: {
                        min: 10,
                        max: 30,
                    },
                    font: {
                        size: 12,
                        face: "Tahoma",
                    },
                },
                edges: {
                    color: {
                        inherit: true
                    },
                    width: 0.15,
                    smooth: {
                        type: "continuous",
                    },
                },
                interaction: {
                    hover: true,
                    hoverConnectedEdges: true,
                    hideEdgesOnDrag: true,
                    tooltipDelay: 200,
                },
                configure: {
                    filter: function(option, path) {
                        if (option === "inherit") {
                            return true;
                        }
                        if (option === "type" && path.indexOf("smooth") !== -1) {
                            return true;
                        }
                        if (option === "roundness") {
                            return true;
                        }
                        if (option === "hideEdgesOnDrag") {
                            return true;
                        }
                        if (option === "hideNodesOnDrag") {
                            return true;
                        }
                        return false;
                    },
                    container: document.getElementById("optionsContainer"),
                    showButton: false,
                },
                physics: false,
            };

            var data = {
                nodes: nodes,
                edges: edges
            };

            // Note: data is coming from ./data/WorldCup2014.js
            network = new vis.Network(container, data, options);
            console.log(network)

            function getNode(option) {
                for (var i = 0; i < nodes.length; i++) {
                    if (option == nodes[i].id) {
                        // console.log('i',nodes[i]);
                        return nodes[i];
                    }
                }
            }

            function getEdge(option) {
                var linkId = option;
                var linkIdFirst = linkId.substring(0, 1); //截取第一位
                var linkIdLast = linkId.substring(linkId.length - 1, linkId.length); //截取最后一位
                var dataList = []; //存放线条两边的节点nodes数据
                for (var j = 0; j < nodes.length; j++) {
                    if (linkIdFirst == nodes[j].id || linkIdLast == nodes[j].id) {
                        dataList.push(nodes[j]);
                    }
                }
                return dataList;
            }
            //todo  悬停在节点上--显示弹框
            network.on('hoverNode', function(properties) {
                // console.log('悬停节点',properties);
                var hoveNodeList = getNode(properties.node);
                // console.log('hoveNodeList',hoveNodeList);
                var deviceType = hoveNodeList.type;
                var imgPathSrc = hoveNodeList.image;
                // if (deviceType == "Internet" || deviceType == "hub") {
                //     var $ul = "<ul>" +
                //         "<li><img src=' " + imgPathSrc + " ' width='30px' height='25px'><span> " + hoveNodeList.name + " </span> </li>" +
                //         "</ul>";
                //     $("#divHoverNode").append($ul);
                // } else if (deviceType == "switch") {
                //     var $ul = "<ul>" +
                //         "<li><img src=' " + imgPathSrc + " ' width='30px' height='25px'><span> 设备类型: " + hoveNodeList.name + " </span> </li>" +
                //         "<li>IP:" + hoveNodeList.ip + "</li>" +
                //         "<li>MAC:" + hoveNodeList.mac + "</li>" +
                //         "<li>设备型号:" + hoveNodeList.model + "</li>" +
                //         "</ul>";
                //     $("#divHoverNode").append($ul);
                // } else {
                var $ul = "<ul>" +
                    "<li><img src=' " + imgPathSrc + " ' width='30px' height='25px'><span> 设备类型:" + hoveNodeList.name + " </span> </li>" +
                    "<li>IP:" + hoveNodeList.ip + "</li>" +
                    "<li>MAC:" + hoveNodeList.mac + "</li>" +
                    "<li>账号:" + hoveNodeList.model + "</li>" +
                    "<li>所在位置:" + hoveNodeList.location + "</li>" +
                    "<li>最后登录时间:" + hoveNodeList.uptime + "</li>" +
                    "</ul>";
                $("#divHoverNode").append($ul);
                // }
                $('#divHoverNode').css({
                    'display': 'block',
                    'left': properties.event.offsetX + 15,
                    'top': properties.event.offsetY + 140
                });
                console.log(properties.event.offsetX, properties.event.offsetY)
                    // $('#menuOperation').hide();
            });
            //todo  从节点移开---隐藏弹框
            network.on('blurNode', function() {
                $("#divHoverNode").hide();
                $("#divHoverNode").empty(); //移除之后清空div
            });
            //todo  悬停在边上--显示弹框
            network.on('hoverEdge', function(properties) {
                // console.log('悬停边',properties);
                var hoveEdgeList = getEdge(properties.edge);
                console.log(hoveEdgeList)
                    // console.log('hoveEdgeList',hoveEdgeList);
                var $ul = "<ul>" +
                    "<li>名称:" + hoveEdgeList[0].name + "->" + hoveEdgeList[1].name + "</li>" +
                    "<li>端口号:" + hoveEdgeList[0].ip + "->" + hoveEdgeList[1].ip + "</li>" +
                    "</ul>";
                $("#divHoverNode").append($ul);
                $('#divHoverNode').css({
                    'display': 'block',
                    'left': properties.event.offsetX - 50,
                    'top': properties.event.offsetY + 325
                });
                // $('#menuOperation').hide();
            });
            //todo  从边上移开---隐藏弹框
            network.on('blurEdge', function(properties) {
                // $("#divHoverNode").hide();
                $("#divHoverNode").empty(); //移除之后清空div
            });
            //todo  点击的判断是否选中节点时候显示隐藏
            // network.on('click', function(properties) {
            //     var clickNodeList = getNode(properties.nodes[0]);
            //     if (typeof(clickNodeList) == "undefined") {
            //     } else {
            //         $('#menuOperation').css({
            //             'display': 'block',
            //             'left': properties.event.center.x + 0,
            //             'top': properties.event.center.y + 0
            //         });

            //     }
            // });
        }

        redrawAll();
    </script>
</body>

</html>

var nodes = [{
        id: 1,
        label: "监控系统主机",
        title: "Country: " + "Algeria" + "<br>" + "Team: " + "Club Africain",
        value: 40, //图标大小
        image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
        shape: "image",
        group: 6,

        name: "交换机",
        // type: "switch",
        ip: "192.168.30.125",
        mac: "48:de:3d:e2:49:a8",
        model: "H3C",
        location: '西安市',
        uptime: "2020-09-03 10:50:50",
        port: "22",
        ignore: "true",
        flag: "true",
        x: -250,
        y: 10,
    },
    {
        id: 2,
        label: "交换机",
        title: "Country: " + "Colombia" + "<br>" + "Team: " + "Toulouse",
        value: 40,
        group: 11,
        image: "https://csdnimg.cn/medal/chizhiyiheng@240.png",
        shape: "image",
        name: "交换机",
        // type: "switch",
        ip: "192.168.30.125",
        mac: "48:de:3d:e2:49:a8",
        model: "H3C",
        location: '西安市',
        uptime: "2020-09-03 10:50:50",
        port: "22",
        ignore: "true",
        flag: "true",
        x: -450,
        y: 10,

    },
    {
        id: 3,
        label: "Abel Hernández",
        title: "Country: " + "Uruguay" + "<br>" + "Team: " + "Palermo",
        value: 40,
        group: 6,
        image: "https://csdnimg.cn/medal/chizhiyiheng@240.png",
        shape: "image",
        name: "交换机",
        // type: "switch",
        ip: "192.168.30.125",
        mac: "48:de:3d:e2:49:a8",
        model: "H3C",
        location: '西安市',
        uptime: "2020-09-03 10:50:50",
        port: "22",
        ignore: "true",
        flag: "true",
        x: -50,
        y: 100,
    },
    {
        id: 4,
        label: "61.9.13.4",
        title: "61.9.13.4",
        value: 40, //图标大小
        image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
        shape: "image",
        group: 6,
        name: "交换机",
        // type: "switch",
        ip: "192.168.30.125",
        mac: "48:de:3d:e2:49:a8",
        model: "H3C",
        location: '西安市',
        uptime: "2020-09-03 10:50:50",
        port: "22",
        ignore: "true",
        flag: "true",
        x: -600,
        y: -140,
    },
    {
        id: 5,
        label: "61.9.13.4",
        title: "61.9.13.4",
        value: 40, //图标大小
        image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
        shape: "image",
        group: 6,
        name: "交换机",
        // type: "switch",
        ip: "192.168.30.125",
        mac: "48:de:3d:e2:49:a8",
        model: "H3C",
        location: '西安市',
        uptime: "2020-09-03 10:50:50",
        port: "22",
        ignore: "true",
        flag: "true",
        x: -600,
        y: 10,
    },
    {
        id: 6,
        label: "61.9.13.4",
        title: "61.9.13.4",
        value: 40, //图标大小
        image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
        shape: "image",
        group: 6,
        x: -600,
        y: 160,
    },
    {
        id: 7,
        label: "61.9.13.4",
        title: "61.9.13.4",
        value: 40, //图标大小
        image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
        shape: "image",
        group: 6,
        name: "交换机",
        // type: "switch",
        ip: "192.168.30.125",
        mac: "48:de:3d:e2:49:a8",
        model: "H3C",
        location: '西安市',
        uptime: "2020-09-03 10:50:50",
        port: "22",
        ignore: "true",
        flag: "true",
        x: -700,
        y: -230,
    },
    {
        id: 8,
        label: "61.9.13.4",
        title: "61.9.13.4",
        value: 40, //图标大小
        image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
        shape: "image",
        group: 6,
        name: "交换机",
        // type: "switch",
        ip: "192.168.30.125",
        mac: "48:de:3d:e2:49:a8",
        model: "H3C",
        location: '西安市',
        uptime: "2020-09-03 10:50:50",
        port: "22",
        ignore: "true",
        flag: "true",
        x: -700,
        y: -160,
    },
    {
        id: 9,
        label: "61.9.13.4",
        title: "61.9.13.4",
        value: 40, //图标大小
        image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
        shape: "image",
        group: 6,
        name: "交换机",
        // type: "switch",
        ip: "192.168.30.125",
        mac: "48:de:3d:e2:49:a8",
        model: "H3C",
        location: '西安市',
        uptime: "2020-09-03 10:50:50",
        port: "22",
        ignore: "true",
        flag: "true",
        x: -700,
        y: -90,
    },
    {
        id: 10,
        label: "61.9.13.4",
        title: "61.9.13.4",
        value: 40, //图标大小
        image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
        shape: "image",
        group: 6,
        name: "交换机",
        // type: "switch",
        ip: "192.168.30.125",
        mac: "48:de:3d:e2:49:a8",
        model: "H3C",
        location: '西安市',
        uptime: "2020-09-03 10:50:50",
        port: "22",
        ignore: "true",
        flag: "true",
        x: -700,
        y: 10,
    },
    {
        id: 11,
        label: "61.9.13.4",
        title: "61.9.13.4",
        value: 40, //图标大小
        image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
        shape: "image",
        group: 6,
        name: "交换机",
        // type: "switch",
        ip: "192.168.30.125",
        mac: "48:de:3d:e2:49:a8",
        model: "H3C",
        location: '西安市',
        uptime: "2020-09-03 10:50:50",
        port: "22",
        ignore: "true",
        flag: "true",
        x: -700,
        y: 100,
    },
    {
        id: 12,
        label: "61.9.13.4",
        title: "61.9.13.4",
        value: 40, //图标大小
        image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
        shape: "image",
        group: 6,
        name: "交换机",
        // type: "switch",
        ip: "192.168.30.125",
        mac: "48:de:3d:e2:49:a8",
        model: "H3C",
        location: '西安市',
        uptime: "2020-09-03 10:50:50",
        port: "22",
        ignore: "true",
        flag: "true",
        x: -700,
        y: 170,
    },
    {
        id: 13,
        label: "61.9.13.4",
        title: "61.9.13.4",
        value: 40, //图标大小
        image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
        shape: "image",
        group: 6,
        name: "交换机",
        // type: "switch",
        ip: "192.168.30.125",
        mac: "48:de:3d:e2:49:a8",
        model: "H3C",
        location: '西安市',
        uptime: "2020-09-03 10:50:50",
        port: "22",
        ignore: "true",
        flag: "true",
        x: -700,
        y: 230,
    },
    {
        id: 14,
        label: "61.9.13.4",
        title: "61.9.13.4",
        value: 40, //图标大小
        image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
        shape: "image",
        group: 6,
        name: "交换机",
        // type: "switch",
        ip: "192.168.30.125",
        mac: "48:de:3d:e2:49:a8",
        model: "H3C",
        location: '西安市',
        uptime: "2020-09-03 10:50:50",
        port: "22",
        ignore: "true",
        flag: "true",
        x: -50,
        y: -100,
    },
    {
        id: 15,
        label: "61.9.13.4",
        title: "61.9.13.4",
        value: 40, //图标大小
        image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
        shape: "image",
        group: 6,
        name: "交换机",
        // type: "switch",
        ip: "192.168.30.125",
        mac: "48:de:3d:e2:49:a8",
        model: "H3C",
        location: '西安市',
        uptime: "2020-09-03 10:50:50",
        port: "22",
        ignore: "true",
        flag: "true",
        x: -800,
        y: 10,
    },
    {
        id: 16,
        label: "61.9.13.1",
        title: "61.9.13.4",
        value: 40, //图标大小
        image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
        shape: "image",
        group: 6,
        name: "交换机",
        // type: "switch",
        ip: "192.168.30.125",
        mac: "48:de:3d:e2:49:a8",
        model: "H3C",
        location: '西安市',
        uptime: "2020-09-03 10:50:50",
        port: "22",
        ignore: "true",
        flag: "true",
        x: -900,
        y: 10,
    },
    {
        id: 17,
        label: "61.9.13.2",
        title: "61.9.13.4",
        value: 40, //图标大小
        image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
        shape: "image",
        group: 6,
        name: "交换机",
        // type: "switch",
        ip: "192.168.30.125",
        mac: "48:de:3d:e2:49:a8",
        model: "H3C",
        location: '西安市',
        uptime: "2020-09-03 10:50:50",
        port: "22",
        ignore: "true",
        flag: "true",
        x: -900,
        y: -220,

    },
    {
        id: 18,
        label: "61.9.13.3",
        title: "61.9.13.4",
        value: 40, //图标大小
        image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
        shape: "image",
        group: 6,
        name: "交换机",
        // type: "switch",
        ip: "192.168.30.125",
        mac: "48:de:3d:e2:49:a8",
        model: "H3C",
        location: '西安市',
        uptime: "2020-09-03 10:50:50",
        port: "22",
        ignore: "true",
        flag: "true",
        x: -900,
        y: 230,
    }, {
        id: 19,
        label: "61.9.13.1",
        title: "61.9.13.4",
        value: 40, //图标大小
        image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
        shape: "image",
        group: 6,
        name: "交换机",
        // type: "switch",
        ip: "192.168.30.125",
        mac: "48:de:3d:e2:49:a8",
        model: "H3C",
        location: '西安市',
        uptime: "2020-09-03 10:50:50",
        port: "22",
        ignore: "true",
        flag: "true",
        x: -1000,
        y: -300,
    },
    {
        id: 20,
        label: "61.9.13.2",
        title: "61.9.13.4",
        value: 40, //图标大小
        image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
        shape: "image",
        group: 6,
        name: "交换机",
        // type: "switch",
        ip: "192.168.30.125",
        mac: "48:de:3d:e2:49:a8",
        model: "H3C",
        location: '西安市',
        uptime: "2020-09-03 10:50:50",
        port: "22",
        ignore: "true",
        flag: "true",
        x: -1000,
        y: -220,
    },
    {
        id: 21,
        label: "61.9.13.3",
        title: "61.9.13.4",
        value: 40, //图标大小
        image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
        shape: "image",
        group: 6,
        name: "交换机",
        // type: "switch",
        ip: "192.168.30.125",
        mac: "48:de:3d:e2:49:a8",
        model: "H3C",
        location: '西安市',
        uptime: "2020-09-03 10:50:50",
        port: "22",
        ignore: "true",
        flag: "true",
        x: -1000,
        y: -140,
    },
];
// create an array with edges
var edges = [
    // label: "top", font: { align: "top" }决定关系线旁文字位置
    { from: 1, to: 3, label: "top", font: { align: "top", color: "red" }, arrows: "to", color: "red", id: "1>3" },
    { from: 2, to: 1, label: "horizontal", font: { align: "horizontal" }, arrows: "to", physics: true, id: "2>1" },
    { from: 1, to: 14, label: "bottom", font: { align: "bottom" }, id: "1>14" },
    { from: 4, to: 2, label: "middle", font: { align: "middle" }, id: "4>2" },
    { from: 5, to: 2, id: "5>2" },
    { from: 6, to: 2, id: "6>2" },
    { from: 7, to: 4, id: "7>4" },
    { from: 8, to: 4, id: "8>4" },
    { from: 9, to: 4, id: "9>4" },
    { from: 10, to: 5, id: "10>5" },
    { from: 15, to: 5, id: "15>5" },
    { from: 11, to: 6, id: "11>6" },
    { from: 12, to: 6, id: "12>6" },
    { from: 13, to: 6, id: "13>6" },
    { from: 16, to: 15, id: "16>15" },
    { from: 17, to: 15, id: "17>15" },
    { from: 18, to: 15, id: "18>15" },
    { from: 19, to: 17, id: "19>17" },
    { from: 20, to: 17, id: "20>17" },
    { from: 21, to: 17, id: "21>17" },
];

 


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进