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

---

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

點(diǎn)擊下載GoJS最新試用版

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

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

然后，它創(chuàng)建一個(gè)Overview，并將Overview.observed設(shè)置為上圖。概述的DIV名為“ myOverviewDiv”。您可以根據(jù)需要在以后設(shè)置Overview.observed。您也可以將其設(shè)置為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 });

動(dòng)畫未顯示在“概述”中。渲染圖像或SVG不適用于“概述”。

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

想要購(gòu)買GoJS正版授權(quán)的朋友可以

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