logo GoJS教程2020 我也要发布文档

流程图控件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正版授权的朋友可以咨询慧都官方客服

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


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