visjs实现数字弹性可拖拽网络结构图表效果代码-html代码-BFW代码库

visjs实现数字弹性可拖拽网络结构图表效果代码

代码语言：html

所属分类：图表

代码描述：visjs实现数字弹性可拖拽网络结构图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vis.4.21.0.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vis.4.21.0.js"></script>
    <style type="text/css">
        #mynetwork {
            width: 800px;
            height: 600px;
            border: 1px solid lightgray;
          }
    </style>
</head>

<body>
    <div id="mynetwork"></div>

    <script type="text/javascript">
        // create an array with nodes
          var nodes = new vis.DataSet([
            {id: 1, value: 20, label: '1'},
            {id: 2, value: 5, label: '2'},
            {id: 3, value: 10, label: '3'},
            {id: 4, value: 15, label: '4'},
            {id: 5, value: 8, label: '5'},
            {id: 6, value: 10, label: '6'},
            {id: 7, value: 50, label: '7'},
            {id: 8, value: 10, label: '8'},
            {id: 9, value: 10, label: '9'},
            {id: 10, value: 10, label: '10'},
            {id: 11, value: 10, label: '11'},
            {id: 12, value: 4, label: '12'},
            {id: 13, value: 2, label: '13'},
            {id: 14, value: 1, label: '14'}
          ]);
    
          // create an array with edges
          var edges = new vis.DataSet([
            {from: 1, to: 2},
            {from: 1, to: 4},
            {from: 1, to: 5},
            {from: 2, to: 6},
            {from: 2, to: 7},
            {from: 2, to: 8},
            {from: 3, to: 9},
            {from: 3, to: 10},
            {from: 3, to: 11},
            {from: 10, to: 12},
            {from: 10, to: 13},
            {from: 10, to: 14},
            {from: 7, to: 11},
            {from: 8, to: 14},
            {from: 11, to: 12},
            {from: 5, to: 9}
          ]);
    
          // create a network
          var container = document.getElementById('mynetwork');
    
          // provide the data in the vis format
          var data = {
            nodes: nodes,
            edges: edges
          };
          var options = {
            nodes: {
              autoResize: true,
              height: '100%',
              width: '100%',
              shape: 'circle',
              font: {
                size: 30
              },
              scaling:{
                label: {
                  min:8,
                  max:50
                }
              },
              borderWidth: 1,
              shadow: true,
              margin: {
                top: 10,
                left: 20,
                right: 20,
                bottom: 10
              },
              color: {
                border: "",
                background: "#b2dfdb",
                highlight : {
   .........完整代码请登录后点击上方下载按钮下载查看