vis.js | 易学教程

2、示例：

<!doctype html>
　　<html>
　　　　<head>
　　　　<title>vis.js</title>
　　　　<script type="text/javascript" src="vis.js"></script>
　　　　<link href="vis.css" rel="stylesheet" type="text/css" />
　　　　<style type="text/css">
　　　　　　#mynetwork {
　　　　　　width: 600px;
　　　　　　height: 400px;
　　　　　　border: 1px solid lightgray;
　　　　　　}
　　　　</style>
　　　　</head>
　　　　<body>
　　　　　　<div id="mynetwork"></div>

　　　　　　<script type="text/javascript">
　　　　　　// 创建节点数组
　　　　　　var nodes = new vis.DataSet([
　　　　　　　　{id: 1, label: 'Node 1'},
　　　　　　　　{id: 2, label: 'Node 2'},
　　　　　　　　{id: 3, label: 'Node 3'},
　　　　　　　　{id: 4, label: 'Node 4'},
　　　　　　　　{id: 5, label: 'Node 5'}
　　　　　　]);

　　　　　　// 创建关系数组
　　　　　　var edges = new vis.DataSet([
　　　　　　　　{from: 1, to: 3},
　　　　　　　　{from: 1, to: 2},
　　　　　　　　{from: 2, to: 4},
　　　　　　　　{from: 2, to: 5}
　　　　　　]);

　　　　　　// 创建一个网络
　　　　　　var container = document.getElementById('mynetwork');

　　　　　　// vis数据
　　　　　　var data = {
　　　　　　　　nodes: nodes,
　　　　　　　　edges: edges
　　　　　　};
　　　　　　var options = {};

　　　　　　// 初始化网络
　　　　　　var network = new vis.Network(container, data, options);
　　　　</script>
　　</body>
</html>

来源：https://www.cnblogs.com/boreguo/p/10748853.html

标签

vis