流程圖控件GoJS教程：調(diào)整圖表大小

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

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

使用Diagram.requestUpdate調(diào)整Div的大小

以下示例具有一個(gè)按鈕，該按鈕可放大圖的div。單擊時(shí)，將明顯調(diào)整div的大小，但圖保持不變。

    // A minimal Diagram
    diagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, "RoundedRectangle",
          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" },
      { key: "Gamma", color: "lightgreen" },
      { key: "Delta", color: "pink" }
    ],
    [
      { from: "Alpha", to: "Beta" },
      { from: "Alpha", to: "Gamma" },
      { from: "Gamma", to: "Delta" },
      { from: "Delta", to: "Alpha" }
    ]);

    // Resize the diagram with this button
    var button1 = document.getElementById('button1');
    button1.addEventListener('click', function() {
      var div = diagram.div;
      div.style.width = '200px';
    });

通常，我們會(huì)希望在div調(diào)整大小的同時(shí)，將Diagram調(diào)整為其div的大小。為此，我們?cè)谡{(diào)整div的大小后向Diagram.requestUpdate 添加了一個(gè)調(diào)用。這將檢查圖的div是否已更改大小，如果已更改，則以適當(dāng)?shù)男鲁叽缰匦吕L制圖。

除了添加了對(duì)Diagram.requestUpdate的調(diào)用之外，以下代碼幾乎相同。

    // A minimal Diagram
    diagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, "RoundedRectangle",
          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" },
      { key: "Gamma", color: "lightgreen" },
      { key: "Delta", color: "pink" }
    ],
    [
      { from: "Alpha", to: "Beta" },
      { from: "Alpha", to: "Gamma" },
      { from: "Gamma", to: "Delta" },
      { from: "Delta", to: "Alpha" }
    ]);

    // Resize the diagram with this button
    var button2 = document.getElementById('button2');
    button2.addEventListener('click', function() {
      var div = diagram.div;
      div.style.width = '200px';
      diagram.requestUpdate(); // Needed!
    });

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

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

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