流程图控件GoJS教程：概述图

---

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

点击下载GoJS最新试用版

概述的初始化仅是设置Overview.observed 即可参考要显示的关系图。因此，需要有一个用于主图的DIV（以常规方式创建图），以及一个单独的DIV（用于概览），以非常简单的方式为其创建概览。

下面的代码首先创建一个我们要查看的图表。它使用1000个随机颜色的节点初始化该图。

然后，它创建一个Overview，并将Overview.observed设置为上图。概述的DIV名为“ myOverviewDiv”。您可以根据需要在以后设置Overview.observed。您也可以将其设置为null，以使Overview停止显示任何图表

  // initialize the main Diagram
  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "Rectangle",
        { fill: "white" },
        new go.Binding("fill", "color")),
      $(go.TextBlock, { margin: 5 },
        new go.Binding("text", "key"))
    );

  // start off with a lot of nodes
  var nodeDataArray = [];
  for (var i = 0; i < 1000; i++) {
    nodeDataArray.push({ color: go.Brush.randomColor() });
  }
  diagram.model.nodeDataArray = nodeDataArray;

  // create the Overview and initialize it to show the main Diagram
  var myOverview =
    $(go.Overview, "myOverviewDiv",
      { observed: diagram });

动画未显示在“概述”中。渲染图像或SVG不适用于“概述”。

====================================================

想要购买GoJS正版授权的朋友可以

有关产品的最新消息和最新资讯，欢迎扫描关注下方微信公众号