gojs实现时序图效果代码-html代码-BFW代码库

gojs实现时序图效果代码

代码语言：html

所属分类：图表

代码描述：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">
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" type="text/css">
    <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;

      myDiagram =
        $(go.Diagram, "myDiagramDiv", // must be the ID or reference to an HTML DIV
          {
            allowCopy: false,
            linkingTool: $(MessagingTool),  // defined below
            "resizingTool.isGridSnapEnabled": true,
            draggingTool: $(MessageDraggingTool),  // defined below
            "draggingTool.gridSnapCellSize": new go.Size(1, MessageSpacing / 4),
            "draggingTool.isGridSnapEnabled": true,
            // automatically extend Lifelines as Activities are moved or resized
            "SelectionMoved": ensureLifelineHeights,
            "PartResized": ensureLifelineHeights,
            "undoManager.isEnabled": true
          });

      // when the document is modified, add a "*" to the title and enable the "Save" button
      myDiagram.addDiagramListener("Modified", e => {
        const button = document.getElementById("SaveButton");
        if (button) button.disabled = !myDiagram.isModified;
        const idx = document.title.indexOf("*");
        if (myDiagram.isModified) {
          if (idx < 0) document.title += "*";
        } else {
          if (idx >= 0) document.title = document.title.slice(0, idx);
        }
      });

      // define the Lifeline Node template.
      myDiagram.groupTemplate =
        $(go.Group, "Vertical",
          {
            locationSpot: go.Spot.Bottom,
            locationObjectName: "HEADER",
            minLocation: new go.Point(0, 0),
            maxLocation: new go.Point(9999, 0),
            selectionObjectName: "HEADER"
          },
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          $(go.Panel, "Auto",
            { name: "HEADER" },
            $(go.Shape, "Rectangle",
              {
                fill: $(go.Brush, "Linear", { 0: "#bbdefb", 1: go.Brush.darkenBy("#bbdefb", 0.1) }),
                stroke: null
              }),
            $(go.TextBlock,
              {
                margin: 5,
                font: "400 10pt Source Sans Pro, sans-serif"
              },
              new go.Binding("text", "text"))
          ),
          $(go.Shape,
            {
.........完整代码请登录后点击上方下载按钮下载查看