近期弄個顯示例圖，主要表示關係圖，就找到了visjs，很好很強大，就是資料較少，只能從網站的例子去找本身想要的東西 http://visjs.org/network_examples.html，從系統的樣例中尋找本身所須要的，下面就顯示一些我須要的，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,//配置每次生成的節點位置都同樣，參數爲數字一、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的拼接，node
point = {"id":id, "label":"顯示數據", "shape": 'image', "image": '..\\static\\img\\sypic\\'+group+'.svg'} //image 指的是顯示圖片形狀，官網還有另外圓形顯示，後面的是圖片路徑
line = {"from": y, "to": m} //線就是簡單的from to 。。固然，這都是point固定的id，
接收以後就能只作本身想要的canvas 關係圖了，感受仍是蠻不錯的效果的，關鍵是 唬人。。web
可是又有了新的需求了，要求發現一個新的數據就要實時顯示在上面，這就用到了一個新的屬性（DataSet）ajax
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,//配置每次生成的節點位置都同樣，參數爲數字一、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傳遞過來的數據必定要是新添加過來的數據了，就得數據不能重複了，必定要看清數據數組的名稱，以避免混亂形成沒必要要的浪費時間，canvas
只要是新數據添加進去了，dataset就會自動將數據添加到圖形當中。數組