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

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

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正版授权的朋友可以咨询官方客服