• visjs 绘图 图标 动态添加数据


    近期弄个显示例图,主要表示关系图,就找到了visjs,很好很强大,就是资料较少,只能从网站的例子去找自己想要的东西  http://visjs.org/network_examples.html,从系统的样例中寻找自己所需要的,下面就显示一些我需要的,

    function doEchartsFun(data){
            obj = data;	
    		//	vis
    	    var nodes = null;
    	    var edges = null;
    	    var network = null;
    	
    	    var LENGTH_MAIN = 350,
    	        LENGTH_SERVER = 150,
    	        LENGTH_SUB = 50,
    	        WIDTH_SCALE = 2,
    	        RED = 'red',
    	        ORANGE = 'orange',
    	        ERROR='black',
    	        GRAY = 'yellow';
    	
    	    nodes = [];
    	    edges = [];
    		// console.log(data)
    	    for(var i = 0;i < data.hostlist.length;i++){
    	    	nodes.push(obj.hostlist[i]);
    	    }
    	     for(var i = 0;i < data.line.length;i++){
    	    	edges.push(obj.line[i]);
    	    }
    	    // 添加图例
    	    // var mynetwork = document.getElementById("ec");
    	    // var x = - mynetwork.clientWidth -200 ;
            // var y = - mynetwork.clientHeight -50 ;
            // var step = 70;
            // nodes.push({id: 1000, x: x, y: y, label: '',group: 'sj', value: 10, fixed: true, physics:false});
            // nodes.push({id: 1001, x: x, y: y + step, label: '', group: 'fk', value: 10, fixed: true,  physics:false});
            // nodes.push({id: 1002, x: x, y: y + 2 * step, label: '', group: 'wj', value: 10, fixed: true,  physics:false});
            // nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1, fixed: true,  physics:false});
            // nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1, fixed: true,  physics:false});
    	   removeLoading('test');
    	      // create a network
    	    var container = document.getElementById('ec');
    	    var data = {
    	        nodes: nodes,
    	        edges: edges
    	    };
    	    var options = {
    	        nodes: {
            	    font:{
                       color: "white", //字体的颜色
                       size: 30  //显示字体大小
                    },
                   
    	            scaling: {
    		          min: 16,
    		          max: 32   //缩放效果比例
    	            },
    				borderWidth: 0,
    				color: {
    				border: 'white',   
    				background: 'white'  若是引用图标,背景颜色
    			   },
    	        },
    
    
    			groups: {
    		          "ws":{  //系统定义的形状 dot等  这些官网都可以找到
    		          	 shape:'dot',
    		          	 color:"white"
    		          }
    	        },
    	        edges: { 连接线的样式
    	         color: {
    				  color:'white',
    				  highlight:'white',
    				  hover: '#848484',
    				  inherit: 'from',
    				  opacity:1.0
    				},
    	        },
    	        layout:{
    	             randomSeed:1,//配置每次生成的节点位置都一样,参数为数字1、2等
    	         },
    	        physics:{
    	          barnesHut:{gravitationalConstant:-30000},
    	          stabilization: {iterations:2500}
    	        },
    	        interaction: {
    //	        	navigationButtons: true,
    		         hover: true,//鼠标移过后加粗该节点和连接线
    		         selectConnectedEdges:false,//选择节点后是否显示连接线
    		         hoverConnectedEdges:false,//鼠标滑动节点后是否显示连接线
    		         tooltipDelay:200,
    		         zoomView:true//是否能缩放画布
    		     },
    
    	        edges: {
    		         shadow:true,//连接线阴影配置
    		         smooth: true,//是否显示方向箭头
    //		         arrows: {to : true }//箭头指向from节点
    		     }
    	      };
    	    network = new vis.Network(container, data, options);
    		var nodes_data = network.body.data.nodes._data;
    	    network.on("click", function(params) {  //每个点的操作时间,官网有详细案例可查询
    	    	// var ip = params.nodes;  
    	    	// console.log(params)
    	    	// if(ip != ""){
    	    	// 	$.ajax({
    			 //     url:"/homes/",
    			 //     type:"get",
    			 //     dataType:"JSON",
    			 //     data:{
    			 //     	whichIP:ip
    			 //     },
    			 //     beforeSend:function(xhr){
    			 //
    			 //     },
    			 //     success:function(data){
    			 //      },
    			 //     error:function(XMLHttpRequest, textStatus, errorThrown){
    			 //        console.log("连接主机错误,请重启~~!")
    			 //       }
    			 //  })
    	    	// }
    	    });
    

      最重要的是nodes 和edges的拼接,

    point = {"id":id, "label":"显示数据", "shape": 'image', "image": '..\static\img\sypic\'+group+'.svg'}  //image  指的是显示图片形状,官网还有另外圆形显示,后面的是图片路径
    line = {"from": y, "to": m} //线就是简单的from to 。。当然,这都是point固定的id,

    接收之后就能只做自己想要的canvas 关系图了,感觉还是蛮不错的效果的,关键是 唬人。。

     但是又有了新的需求了,要求发现一个新的数据就要实时显示在上面,这就用到了一个新的属性(DataSet)

    function draw(data) {
    			//	vis
    		var nodes = null;
    	    var edges = null;
    	    var network = null;
    		var  nodesArray, nodes, edgesArray, edges, network;
    	    var LENGTH_MAIN = 350,
    	        LENGTH_SERVER = 150,
    	        LENGTH_SUB = 50,
    	        WIDTH_SCALE = 2,
    	        RED = 'red',
    	        ORANGE = 'orange',
    	        ERROR='black',
    	        GRAY = 'yellow';
    
    	        nodesArray = [];
    	        edgesArray = [];
    
    			for(var i = 0;i < data.hostlist.length;i++){
    				nodesArray.push(obj.hostlist[i]);
    			}
    			 for(var i = 0;i < data.line.length;i++){
    				edgesArray.push(obj.line[i]);
    			}
    			nodes = new vis.DataSet(nodesArray);
    			edges = new vis.DataSet(edgesArray);
    			setTimeout(function(){
    				nodes.add({id:"55854663541321654", shape: "image",label:"haha", image: "../static/img/sypic/web.svg"});
    				console.log(nodes)
    			},1000)
    			setTimeout(function(){
    				edges.add({from:"55854663541321654", to:"5b569a9e812e721634a6b2c3",value:"5"});
    			},1000)
    
    		   removeLoading('test');
    		   //    create a network
    			var container = document.getElementById('ec');
    			var data = {
    				nodes: nodes,
    				edges: edges
    			};
    			var options = {
    				nodes: {
    					font:{
    					   color: "white",
    					   size: 30
    					},
    
    					scaling: {
    					  min: 16,
    					  max: 32
    					},
    					borderWidth: 0,
    					color: {
    					border: 'white',
    					background: 'white'
    				   },
    				},
    
    
    			groups: {
    
    	        },
    	        edges: {
    	         color: {
    				  color:'white',
    				  highlight:'white',
    				  hover: '#848484',
    				  inherit: 'from',
    				  opacity:1.0
    				},
    	        },
    	        layout:{
    	             randomSeed:1,//配置每次生成的节点位置都一样,参数为数字1、2等
    	         },
    	        physics:{
    	          barnesHut:{gravitationalConstant:-30000},
    	          stabilization: {iterations:2500}
    	        },
    	        interaction: {
    //	        	navigationButtons: true,
    		         hover: true,//鼠标移过后加粗该节点和连接线
    		         selectConnectedEdges:false,//选择节点后是否显示连接线
    		         hoverConnectedEdges:false,//鼠标滑动节点后是否显示连接线
    		         tooltipDelay:200,
    		         zoomView:true//是否能缩放画布
    		     },
    
    	        edges: {
    		         shadow:true,//连接线阴影配置
    		         smooth: true,//是否显示方向箭头
    //		         arrows: {to : true }//箭头指向from节点
    		     }
    	      };
    	   		network = new vis.Network(container, data, options);
            }
    

      关键看两个定时器添加,到时候把定时器添加的过程用websocket 替换掉就可以,当然,websocket传递过来的数据一定要是新添加过来的数据了,就得数据不能重复了,一定要看清数据数组的名称,以免混乱造成不必要的浪费时间,

    只要是新数据添加进去了,dataset就会自动将数据添加到图形当中。

  • 相关阅读:
    截取某一个元素的图
    11、python的异常机制
    10、python面向对象三大特性:封装、继承、多态
    9、python之面向对象
    软件测试有前途吗?
    对应届生做测试的同学们的一些建议
    没有代码基础如何学习自动化测试?
    接口自动化测试有哪些工具或者框架?
    软件测试流程
    接口自动化测试中logging实际用法
  • 原文地址:https://www.cnblogs.com/wanglaowu/p/9353570.html
Copyright © 2020-2023  润新知