性福利影院,国产吃瓜在线,亚洲撸色

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

翻譯|使用教程|編輯：吳園園|2020-05-06 14:02:41.140|閱讀 384 次

概述：概述圖是一個(gè)子類圖，用于顯示所有的部分的另一個(gè)圖的S和以示出該圖的視口是相對于所有那些部分。用戶還可以通過在概覽中單擊或拖動來滾動概覽圖。

相關(guān)鏈接：

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

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