流程图控件GoJS教程：调整图表大小

有时可能需要调整包含GoJS图表的div的大小。GoJS不会监听或尝试检测div大小的变化，因此在执行调整其包含div大小的操作时，必须手动告诉每个图表。

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

GoJS最新使用版

使用Diagram.requestUpdate调整Div的大小

以下示例具有一个按钮，该按钮可放大图的div。单击时，将明显调整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';    });

通常，我们会希望在div调整大小的同时，将Diagram调整为其div的大小。为此，我们在调整div的大小后向Diagram.requestUpdate 添加了一个调用。这将检查图的div是否已更改大小，如果已更改，则以适当的新尺寸重新绘制图。

除了添加了对Diagram.requestUpdate的调用之外，以下代码几乎相同。

    // 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!    });

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

想要购买GoJS正版授权的朋友可以咨询官方客服

标签：