流程圖控件GoJS教程：替換圖和模型

---

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

點擊下載GoJS最新試用版

許多應用程序將要求程序員在頁面的同一內容區域上顯示不同的圖。這在單頁Web應用程序中尤其常見。通常，您不需要刪除該圖并創建另一個圖即可。由于圖很是類似一個視圖中的模型-視圖架構，可以代替更換Diagram.model，也許還有其他設置，如Diagram.nodeTemplateMap或Diagram.layout。或者，您可以構建更大的模板圖，以適應您希望呈現的所有模型。

下面是保留單個圖表用作視圖表面的示例。它加載了一個Model，一個按鈕將加載一個使用不同模板的不同Model，并設置一個不同的Layout。這說明了圖的重用，它比處理多個圖通常更容易，更有效。這是一次最多顯示一張圖表的正常方法。

    // A minimal Diagram
    diagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, "RoundedRectangle",
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 3, font: '28px sans-serif' },  // some room around the text
          new go.Binding("text", "key"))
      );

    // Node template that is only used by the second model
    diagram.nodeTemplateMap.add("TypeTwo",
    $(go.Node, "Horizontal",
      $(go.Shape, "Circle", { width: 24, height: 24, strokeWidth: 0, portId: "" },
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: 2, font: "Bold 15px sans-serif" },
        new go.Binding("text", "key"))
      )
    );

    // Another node template that is only used by the second model
    diagram.nodeTemplateMap.add("AnotherType",
      $(go.Node, "Auto",
        $(go.Shape, "Rectangle", { strokeWidth: 1, fill: 'lightyellow' },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 12, font: "12px sans-serif" },
          new go.Binding("text", "text"))
      )
    );

    var firstModel = true;
    loadModel();

    // Toggle the Diagram's Model
    var button1 = document.getElementById('button1');
    button1.addEventListener('click', function() {
      loadModel();
    });

    function loadModel() {
      if (firstModel) { // load the first model
        diagram.layout = new go.Layout(); // Simple layout
        diagram.model = new go.GraphLinksModel(
          [
            { key: "Alpha", color: "lightblue" },
            { key: "Beta", color: "lightblue" },
            { key: "Gamma", color: "lightgreen" },
            { key: "Delta", color: "lightgreen" }
          ],
          [
            { from: "Alpha", to: "Beta" },
            { from: "Gamma", to: "Delta" }
          ]);
      } else { // load the second model
        diagram.layout = $(go.TreeLayout, { angle: 90 });

        diagram.model = new go.GraphLinksModel(
        [
          { key: "One",   category: "TypeTwo", color: go.Brush.randomColor() },
          { key: "Two",   category: "TypeTwo", color: go.Brush.randomColor() },
          { key: "Three", category: "TypeTwo", color: go.Brush.randomColor() },
          { key: "Four",  category: "TypeTwo", color: go.Brush.randomColor() },
          { key: "Five",  category: "TypeTwo", color: go.Brush.randomColor() },
          { key: "Six",   category: "TypeTwo", color: go.Brush.randomColor() },
          { text: "Some comment", category: "AnotherType" }
        ],
        [
          { from: "One", to: "Two" },
          { from: "One", to: "Three" },
          { from: "Three", to: "Four" },
          { from: "Three", to: "Five" },
          { from: "Four", to: "Six" }
        ]);
      }
      firstModel = !firstModel;

    }

請注意，更改模型會破壞未保留在模型中的所有狀態，例如當前選擇的部件，如果沒有針對它們的數據綁定，則所有節點的位置等等。可以在關聯之前將它們保存在模型中。

兩張圖重復使用一個DIV

有時，用戶希望一次處理兩個或多個圖并保持所有圖狀態。在這種情況下，您可能希望在頁面上放置兩個圖（就像所有帶有調色板的示例一樣），或者您可能希望將圖放入多個“選項卡”或其他某種機制中，例如Planogram示例對其進行處理四個調色板。

另外，您可能希望通過換出兩個圖，將它們在同一DIV中一次顯示一次。您可以通過在第一個圖上將Diagram.div設置為null，并在第二個圖上設置Div 來交換div 。

    // A very minimal Diagram
    diagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, "Circle",
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 3 },  // some room around the text
          new go.Binding("text", "key"))
      );

    diagram.model = new go.GraphLinksModel([
      { key: "Alpha", color: "lightblue" },
      { key: "Beta", color: "orange" }
    ], [
      { from: "Alpha", to: "Beta" },
    ]);

    var diagram2 = $(go.Diagram);

    diagram2.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, "Rectangle", { fill: 'lime' }),
        $(go.TextBlock,
          { margin: 5, font: '22px sans-serif' },
          new go.Binding("text", "key"))
      );

    diagram2.model = new go.GraphLinksModel([
      { key: "BigNode1" },
      { key: "BigNode2" },
      { key: "BigNode3" },
    ], [ ]);

    var currentDiagram = diagram;

    // Toggle the Diagram within this DIV with this button
    var button2 = document.getElementById('button2');
    button2.addEventListener('click', function() {
      // Set one Diagram.div to null, and the other Diagram.div to this div
      if (currentDiagram === diagram) {
        var div = diagram.div;
        diagram.div = null;
        diagram2.div = div;
        currentDiagram = diagram2;
      } else {
        var div = diagram2.div;
        diagram2.div = null;
        diagram.div = div;
        currentDiagram = diagram;
      }


    });

如果選擇一個節點并移動它，然后來回切換圖，您將看到選擇和節點定位仍然存在。兩個圖都保留在內存中，只有Div被交換以使用一個或另一個。

永久刪除圖

您可能希望刪除圖表，并確保它不占用任何內存。為此，如果尚未在其中創建對圖表或GraphObjects或工具或布局的任何其他引用，則可以編寫：

  myDiagram.div = null;
  myDiagram = null; // Assumes this is the only reference to your Diagram

如果您使用過圖片，則還應該清除圖片緩存，GoJS創建了圖片緩存以存儲源URL到圖片元素的映射：

  // Clear any Image references that GoJS is holding onto
  go.Picture.clearCache();

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

想要購買GoJS正版授權的朋友可以

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