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

---

GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

點擊下載GoJS最新試用版

概述的初始化僅是設置Overview.observed 即可參考要顯示的關系圖。因此，需要有一個用于主圖的DIV（以常規(guī)方式創(chuàng)建圖），以及一個單獨的DIV（用于概覽），以非常簡單的方式為其創(chuàng)建概覽。

下面的代碼首先創(chuàng)建一個我們要查看的圖表。它使用1000個隨機顏色的節(jié)點初始化該圖。

然后，它創(chuàng)建一個Overview，并將Overview.observed設置為上圖。概述的DIV名為“ myOverviewDiv”。您可以根據(jù)需要在以后設置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正版授權的朋友可以咨詢慧都官方客服

有關產(chǎn)品的最新消息和最新資訊，歡迎掃描關注下方微信公眾號