JS组件系列之Gojs组件前端图形化插件之利器

2023年5月27日下午12:15 • JavaScript

JS组件系列之Gojs组件前端图形化插件之利器

GoJS是一个用于创建交互式图形和流程图的JavaScript库。借助GoJS，我们可以轻松地创建各种类型的图表，包括流程图，树形图，关系图等等。本文将详细讲解如何使用GoJS，并提供两个示例说明。

安装GoJS

我们可以通过引入GoJS的CDN来使用该库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/2.1.46/go.js"></script>

也可以通过npm进行安装：

npm install gojs

GoJS的核心概念

在开始编写代码之前，有几个概念需要了解：

Diagram: GoJS的核心类，表示一个图形容器，可以容纳各种类型的图形对象。
Model: Diagram的数据模型，用于管理图表中的节点和链接等数据对象。
Node: 表示Diagram中的节点，可以是任何形状或图像。
Link: 表示Diagram中两个节点之间的连接线。

示例1：创建一个简单的流程图

<!DOCTYPE HTML>
<html>
<head>
  <title>GoJS Flowchart</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/2.1.46/go.js"></script>
</head>
<body>
  <div id="myDiagramDiv" style="width:100%; height:500px; background-color:#DAE4E4;"></div>

  <script>
    // 创建一个Diagram实例
    var myDiagram = new go.Diagram("myDiagramDiv");

    // 设置Diagram的样式
    myDiagram.nodeTemplate =
        $(go.Node, "Auto",
          $(go.Shape, "RoundedRectangle", 
            new go.Binding("fill", "color")),
          $(go.TextBlock, {margin: 8},
            new go.Binding("text", "key"))
        );

    // 设置Diagram的数据模型
    myDiagram.model = new go.GraphLinksModel(
        [
          {key: "Alpha", color: "lightblue"},
          {key: "Beta", color: "orange"},
          {key: "Gamma", color: "lightgreen"}
        ],
        [
          {from: "Alpha", to: "Beta"},
          {from: "Alpha", to: "Gamma"}
        ]
    );
  </script>
</body>
</html>

在这个例子中，我们首先创建一个Diagram实例，并将其绑定到一个<div>元素中。然后，我们设置了节点的模板，并通过数据模型将节点和链接添加到Diagram中。

示例2：创建一个树形图

<!DOCTYPE HTML>
<html>
<head>
  <title>GoJS Tree</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/2.1.46/go.js"></script>
</head>
<body>
  <div id="myDiagramDiv" style="width:100%; height:500px; background-color:#DAE4E4;"></div>

  <script>
    // 创建一个Diagram实例
    var myDiagram = new go.Diagram("myDiagramDiv");

    // 设置Diagram的样式
    myDiagram.nodeTemplate =
      $(go.Node, "Horizontal",
        { background: "#44CCFF" },
        $(go.Shape,
          "Ellipse",
          { width: 50, height: 50, fill: "white", strokeWidth: 2 }),
        $(go.TextBlock, "Default Text",
          { margin: 12, stroke: "black", font: "bold 16px sans-serif" },
          new go.Binding("text", "name"))
      );

    // 设置Diagram的数据模型
    myDiagram.model = new go.TreeModel(
      [
        { key: "1", name: "Don Meow" },
        { key: "2", name: "Copricat" },
        { key: "3", name: "Edward Scissorpaws", group: "4" },
        { key: "4", name: "Furrball", isGroup: true },
        { key: "5", name: "Buffy", group: "4" },
        { key: "6", name: "Fluffy", group: "4" }
      ],
      [
        { from: "1", to: "2" },
        { from: "2", to: "3" },
        { from: "4", to: "5" },
        { from: "4", to: "6" }
      ]);
  </script>
</body>
</html>

在这个例子中，我们创建了一个树形图。和之前的例子类似，我们创建了一个Diagram实例，并设置了节点的模板。不同之处在于，我们使用了TreeModel作为Diagram的数据模型，这使我们可以轻松地创建一个树形结构。