gojs实现一个可拖动的数据库表实体关系图表效果代码

代码语言:html

所属分类:图表

代码描述:gojs实现一个可拖动的数据库表实体关系图表效果代码

代码标签: gojs 可拖动 数据库 实体 关系 图表

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

<!DOCTYPE html>
<html>
<head>
   
<meta charset="UTF-8">
   
</head>
 
<body>
 
<script src="//repo.bfw.wiki/bfwrepo/js/go.js"></script>
 
 
<div id="allSampleContent" class="p-4 w-full">

   
<script id="code">
    function init() {

      // Since 2.2 you can also author concise templates with method chaining instead of GraphObject.make
      // For details, see https://gojs.net/latest/intro/buildingObjects.html
      const $ = go.GraphObject.make;  // for conciseness in defining templates

      myDiagram =
        $(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
          {
            allowDelete: false,
            allowCopy: false,
            layout: $(go.ForceDirectedLayout),
            "undoManager.isEnabled": true
          });

      var colors = {
        'red': '#be4b15',
        'green': '#52ce60',
        'blue': '#6ea5f8',
        'lightred': '#fd8852',
        'lightblue': '#afd4fe',
        'lightgreen': '#b9e986',
        'pink': '#faadc1',
        'purple': '#d689ff',
        'orange': '#fdb400',
      }

      // the template for each attribute in a node's array of item data
      var itemTempl =
        $(go.Panel, "Horizontal",
          $(go.Shape,
            { desiredSize: new go.Size(15, 15), st.........完整代码请登录后点击上方下载按钮下载查看

网友评论0