1.插件官網：http://visjs.org/
2.建立一個簡單的網絡拓撲圖javascript
<!doctype html> <html> <head> <title>Network</title> <script type="text/javascript" src="http://visjs.org/dist/vis.js"></script> <link href="http://visjs.org/dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <style type="text/css"> #mynetwork { width: 600px; height: 400px; border: 1px solid lightgray; } </style> </head> <body> <p> 建立一個簡單的網絡拓撲圖. </p> <div id="mynetwork"></div><!-- 用戶存放拓撲圖的容器--> <script type="text/javascript"> //定義須要生成的節點 var allnodes = [ {id: 1, label: 'Node 1', title: 'I have a popup 1!'}, {id: 2, label: 'Node 2', title: 'I have a popup 2!'}, {id: 3, label: 'Node 3', title: 'I have a popup 3!'}, {id: 4, label: 'Node 4', title: 'I have a popup 4!'}, {id: 5, label: 'Node 5', title: 'I have a popup 5!'}, {id: 6, label: 'Node 6', title: 'I have a popup 6!'}, {id: 7, label: 'Node 7', title: 'I have a popup 7!'}, {id: 8, label: 'Node 8', title: 'I have a popup 8!'}, {id: 9, label: 'Node 9', title: 'I have a popup 9!'}, {id: 10, label: 'Node 10', title: 'I have a popup 10!'} ]; //定義節點鏈接線 var alledges = [ {id: 'a',from: 1, to: 2,title: 'test12!'}, {id: 'b',from: 1, to: 3,title: 'test13!'}, {id: 'c',from: 1, to: 4,title: 'test14!'}, {id: 'd',from: 3, to: 4,title: 'test34!'}, {id: 'e',from: 2, to: 5,title: 'test25!'}, {id: 'f',from: 2, to: 6,title: 'test26!'}, {id: 'g',from: 2, to: 7,title: 'test27!'}, {id: 'h',from: 3, to: 7,title: 'test37!'}, {id: 'i',from: 4, to: 8,title: 'test48!'}, {id: 'j',from: 8, to: 9,title: 'test89!'}, {id: 'k',from: 8, to: 10,title: 'test8to10!'} ]; // 建立節點對象 var nodes = new vis.DataSet(allnodes); // 建立連線對象 var edges = new vis.DataSet(alledges); // 建立一個網絡拓撲圖 var container = document.getElementById('mynetwork'); var data = {nodes: nodes,edges: edges}; var options = {interaction:{hover:true}}; var network = new vis.Network(container, data, options); </script> </body> </html>
文章轉自：https://blog.csdn.net/onlyjin/article/details/76673686css