vis.js网络拓扑图自定义图片

1.首先看一下我做的效果图：

2.在官方demo中找有自定义图片的例子：Vis Network Examples

3.点击进去发现只有demo,没有源码，，，，于是f12自己找

4.只需要添加下面代码就可以看到效果了

var options = {nodes:{shape: 'image',image:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599645215703&di=0cb23e74736a6a1222f35b822f5bf833&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F05%2F00%2F01300000194285122188000535877.jpg"}};

5.但是我的图片想自定义成不一样的，还不想每一个节点信息里面都加，所以我遍历数组添加了图片，结构如下图所示：

6.最后完整代码如下：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script><!--<script type="text/javascript" src="js/vis-network.min.js"></script>--><style type="text/css">#mynetwork {width: 600px;height: 600px;border: 1px solid lightgray;}</style>
</head>
<body>
<div id="mynetwork"></div><script type="text/javascript">// 创建节点数据数组var nodes = [{"id": 0,"name": "外部网络","type": "Internet","ip":"1.1.1.1","port":"未知","ignore":"false","flag":"true"}, {"id": 1,"name": "交换机","type": "switch","ip":"192.168.30.125","mac":"48:de:3d:e2:49:a8","model":"H3C","uptime":"2020-09-03 10:50:50","port":"22","ignore":"true","flag":"true"}, {"id": 2,"name": "交换机","type": "switch","ip":"192.168.1.8","mac":"cd:bd:3d:e2:55:55","model":"pf","uptime":"2020-09-03 10:50:50","port":"33","ignore":"true","flag":"true"}, {"id": 3,"name": "计算机","type": "computer","ip":"192.168.1.8","mac":"dv:bd:fd:e2:df:fd","model":"pf","uptime":"2020-09-03 10:50:50","account":"xiaox","location":"xianm","port":"44","ignore":"true","flag":"true"}, {"id": 4,"name": "路由器","type": "rooter","ip":"192.168.1.8","mac":"ds:bd:3d:e2:ds:55","model":"pf","uptime":"2020-09-03 10:50:50","account":"xiaox","location":"xianm","port":"55","ignore":"true","flag":"true"}, {"id": 5,"name": "服务器","type": "service","ip":"192.168.1.8","mac":"vf:eq:dd:e2:55:55","model":"pf","uptime":"2020-09-03 10:50:50","account":"xiaox","location":"xianm","port":"66","ignore":"true","flag":"true"}, {"id":6,"name": "打印机","type": "print","ip":"192.168.1.8","mac":"ss:bd:3d:ju:55:55","model":"pf","uptime":"2020-09-03 10:50:50","account":"xiaox","location":"xianm","port":"77","ignore":"true","flag":"true"}, {"id": 7,"name": "手机","type": "phone","ip":"192.168.1.8","mac":"ju:ju:3d:e2:55:uy","model":"pf","uptime":"2020-09-03 10:50:50","account":"xiaox","location":"xianm","port":"88","ignore":"true","flag":"true"}];// 创建边数据数组var edges = [{ from: 0, to: 1 },{ from: 1, to: 2 },{ from: 1, to: 3 },{ from: 1, to: 4 },{ from: 1, to: 5 },{ from: 2, to: 6 },{ from: 2, to: 7 }];/*** 自定义图片*/for (var i = 0;i < nodes.length;i++){if (nodes[i].type == 'Internet'){nodes[i].image = 'image/internet.png';}if (nodes[i].type == 'switch'){nodes[i].image = 'image/switch.png';}if (nodes[i].type == 'hub'){nodes[i].image = 'image/hub.png';}if (nodes[i].type == 'computer'){nodes[i].image = 'image/computer.png';}if (nodes[i].type == 'rooter'){nodes[i].image = 'image/rooter.png';}if (nodes[i].type == 'service'){nodes[i].image = 'image/service.png';}if (nodes[i].type == 'print'){nodes[i].image = 'image/print.png';}if (nodes[i].type == 'phone'){nodes[i].image = 'image/phone.png';}}// 获取容器var container = document.getElementById('mynetwork');// 将数据赋值给vis 数据格式化器var data = {nodes: nodes,edges: edges};console.log('nodes',data.nodes)var options = {nodes:{shape: 'image'// image:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599645215703&di=0cb23e74736a6a1222f35b822f5bf833&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F05%2F00%2F01300000194285122188000535877.jpg"}};// 初始化关系图var network = new vis.Network(container, data, options);
</script>
</body>

这样图片就换好了，个人角色写法和echarts超级像，因为前两天刚研究完echarts，所以看这个就简单多了。

vis.js网络拓扑图自定义图片相关推荐

vis.js网络拓扑图第一个demo，vis-network.min.js的下载
在vis.js的中文文档里有个demo,复制粘贴出来跑跑,是可以运行的地址:vis-network 入门 | Ame's blog 1.源码是这样的,粘贴出来就可以跑: //源码 <html& ...
网络拓扑图画图工具_写了100多篇原创文章，我常用的在线工具网站推荐给大家！...
不知不觉写博客已经一年多了,累计写了100多篇原创文章,今天给大家分享下我经常使用的在线工具网站,希望对大家有所帮助! Markdown Nice 支持自定义样式的在线Markdown编辑器,编辑完成 ...
vis.js network 教程一
我们使用visjs的网络图可以实现类似csdn知识库的功能. 首先我们先看一个官方的demo: <%@ page contentType="text/html;charset=UTF- ...
JTopo绘制网络拓扑图
JTopo绘制网络拓扑图 1.因为公司项目的需要,研究下JTopo开源框架.如果对JTopo不了解的话,建议搜索下, 篇幅有限,此处不描述了. 2.为了各位不走弯路,这里描述下目前JTopo的缺点.目 ...
visjs使用小记-1.创建一个简单的网络拓扑图
1.插件官网:http://visjs.org/ 2.创建一个简单的网络拓扑图 <!doctype html> <html> <head><title> ...
基于 HTML5 Canvas 绘制的电信网络拓扑图
电信网结构(telecommunication network structure)是指电信网各种网路单元按技术要求和经济原则进行组合配置的组合逻辑和配置形式.组合逻辑描述网路功能的体系结构,配置形式 ...
vis.js入门_使用TensorBoard数据Vis的TensorFlow手术分类器入门
vis.js入门深度学习中最具挑战性的部分是标签,这将在由两部分组成的系列文章的第1部分中看到, 了解如何使用TensorFlow对图像进行分类 . 正确的培训对于将来进行有效分类至关重要,而要进行 ...
合成大西瓜自定义图片及部署
合成大西瓜自定义图片(改图片)及发布访问(无需编程基础) 首先关于服务器扣费问题,需要勾选免费用量弹窗(注意销毁服务器一个天最多两次,一个月四次) 首先新建: 然后选择空或者nodejs,然后下一步 ...
vis.js network 教程二 edges
arrows:箭头 arrows.to:箭头指向 arrows.to.enabled:箭头开关,如果设置为true,则显示关系末端增加箭头 arrows.to.scaleFactor:修改箭头大小 a ...

vis.js网络拓扑图自定义图片

vis.js网络拓扑图自定义图片相关推荐

最新文章

热门文章