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就会自动将数据添加到图形当中。
