vis.js

1、官网:http://visjs.org/docs/network/

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 {
       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