流程图控件GoJS教程：概述图-控件新闻-慧都网

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

翻译|使用教程|编辑：吴园园|2020-05-06 14:02:41.140|阅读 325 次

概述：概述图是一个子类图，用于显示所有的部分的另一个图的S和以示出该图的视口是相对于所有那些部分。用户还可以通过在概览中单击或拖动来滚动概览图。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接：

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 });