vis.js关系图

代码案例

 <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Network</title>
    <script
      type="text/javascript"
      src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"
    ></script>
    <style type="text/css">
      #mynetwork {
        width: 600px;
        height: 400px;
        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, label: "Node 1" },
        { id: 2, label: "Node 2" },
        { id: 3, label: "Node 3" },
        { id: 4, label: "Node 4" },
        { id: 5, label: "Node 5" },
      ]);
 
      // create an array with edges
      var edges = new vis.DataSet([
        { from: 1, to: 3 },
        { from: 1, to: 2 },
        { from: 2, to: 4 },
        { from: 2, to: 5 },
        { from: 3, to: 3 },
      ]);
 
      // create a network
      var container = document.getElementById("mynetwork");
      var data = {
        nodes: nodes,
        edges: edges,
      };
      var options = {};
      var network = new vis.Network(container, data, options);
    </script>
  </body>
</html>

效果图

点击查看详情

posted @ 2024-04-24 16:27 DogLeftover 阅读(27) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· vis.js条形图

· vis.js线条3d图形

· 基于vis.js实现网络拓扑图等关系图谱

· 附上网友的vis.js 对我启发很大，保存

· vue中使用vis.js制作流程图

阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 单元测试从入门到精通

历史上的今天：
2022-04-24 Mybatis入门（二）：@Param源码
2022-04-24 Mybatis入门（一）：入门案例

vis.js关系图

我的标签

合集 (4)

随笔分类 (1350)

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Network</title>
	<script
	type="text/javascript"
	src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"
	></script>
	<style type="text/css">
	#mynetwork {
	width: 600px;
	height: 400px;
	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, label: "Node 1" },
	{ id: 2, label: "Node 2" },
	{ id: 3, label: "Node 3" },
	{ id: 4, label: "Node 4" },
	{ id: 5, label: "Node 5" },
	]);

	// create an array with edges
	var edges = new vis.DataSet([
	{ from: 1, to: 3 },
	{ from: 1, to: 2 },
	{ from: 2, to: 4 },
	{ from: 2, to: 5 },
	{ from: 3, to: 3 },
	]);

	// create a network
	var container = document.getElementById("mynetwork");
	var data = {
	nodes: nodes,
	edges: edges,
	};
	var options = {};
	var network = new vis.Network(container, data, options);
	</script>
	</body>
	</html>