GoJS是一款功能強(qiáng)大，快速且輕量級(jí)的流程圖控件，可幫助你在JavaScript 和 HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡化你的JavaScript / Canvas 程序。本文主要演示一個(gè)比賽流程圖。

單擊名稱旁邊的空白分?jǐn)?shù)框可以填寫每個(gè)玩家的分?jǐn)?shù)。分?jǐn)?shù)必須是非負(fù)數(shù)，最多3位數(shù)。使用TextEditingTool.textValidation函數(shù)來驗(yàn)證分?jǐn)?shù)。當(dāng)“游戲”中的兩個(gè)玩家獲得分?jǐn)?shù)時(shí)，分?jǐn)?shù)更高的玩家將自動(dòng)進(jìn)入到下一輪的比賽。

比如Bardle得分90，Edwards得分80，那么當(dāng)你輸入兩個(gè)玩家的分?jǐn)?shù)后，Bardle會(huì)自動(dòng)進(jìn)入下一輪比賽，對(duì)手是Moran。

在頁面中查看此示例頁面的源代碼

function init() {
    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
    var $ = go.GraphObject.make;  // for conciseness in defining templates

    myDiagram =
      $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
        {
          "textEditingTool.starting": go.TextEditingTool.SingleClick,
          "textEditingTool.textValidation": isValidScore,
          layout: $(go.TreeLayout, { angle: 180 }),
          "undoManager.isEnabled": true
        });

    // validation function for editing text
    function isValidScore(textblock, oldstr, newstr) {
      if (newstr === "") return true;
      var num = parseInt(newstr, 10);
      return !isNaN(num) && num >= 0 && num < 1000;
    }

    // define a simple Node template
    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        { selectable: false },
        $(go.Shape, "Rectangle",
          { fill: '#8C8C8C', stroke: null },
          // Shape.fill is bound to Node.data.color
          new go.Binding("fill", "color")),
        $(go.Panel, "Table",
          $(go.RowColumnDefinition, { column: 0, separatorStroke: "black" }),
          $(go.RowColumnDefinition, { column: 1, separatorStroke: "black", background: "#BABABA" }),
          $(go.RowColumnDefinition, { row: 0, separatorStroke: "black" }),
          $(go.RowColumnDefinition, { row: 1, separatorStroke: "black" }),
          $(go.TextBlock, "",
            { row: 0,
              wrap: go.TextBlock.None, margin: 5, width: 90,
              isMultiline: false, textAlign: 'left',
              font: '10pt  Segoe UI,sans-serif', stroke: 'white' },
            new go.Binding("text", "player1").makeTwoWay()),
          $(go.TextBlock, "",
            { row: 1,
              wrap: go.TextBlock.None, margin: 5, width: 90,
              isMultiline: false, textAlign: 'left',
              font: '10pt  Segoe UI,sans-serif', stroke: 'white' },
            new go.Binding("text", "player2").makeTwoWay()),
          $(go.TextBlock, "",
            { column: 1, row: 0,
              wrap: go.TextBlock.None, margin: 2, width: 25,
              isMultiline: false, editable: true, textAlign: 'center',
              font: '10pt  Segoe UI,sans-serif', stroke: 'black' },
            new go.Binding("text", "score1").makeTwoWay()),
          $(go.TextBlock, "",
            { column: 1, row: 1,
              wrap: go.TextBlock.None, margin: 2, width: 25,
              isMultiline: false, editable: true, textAlign: 'center',
              font: '10pt  Segoe UI,sans-serif', stroke: 'black' },
            new go.Binding("text", "score2").makeTwoWay())
        )
      );

    // define the Link template
    myDiagram.linkTemplate =
      $(go.Link,
        { routing: go.Link.Orthogonal,
          selectable: false },
        $(go.Shape, { strokeWidth: 2, stroke: 'white' }));


    // Generates the original graph from an array of player names
    function createPairs(players) {
      if (players.length % 2 !== 0) players.push('(empty)');
      var startingGroups = players.length / 2;
      var currentLevel = Math.ceil(Math.log(startingGroups) / Math.log(2));
      var levelGroups = [];
      var currentLevel = Math.ceil(Math.log(startingGroups) / Math.log(2));
      for (var i = 0; i < startingGroups; i++) {
        levelGroups.push(currentLevel + '-' + i);
      }
      var totalGroups = [];
      makeLevel(levelGroups, currentLevel, totalGroups, players);
      return totalGroups;
    }

    function makeLevel(levelGroups, currentLevel, totalGroups, players) {
      currentLevel--;
      var len = levelGroups.length;
      var parentKeys = [];
      var parentNumber = 0;
      var p = '';
      for (var i = 0; i < len; i++) {
        if (parentNumber === 0) {
          p = currentLevel + '-' + parentKeys.length;
          parentKeys.push(p);
        }

        if (players !== null) {
          var p1 = players[i*2];
          var p2 = players[(i*2) + 1];
          totalGroups.push({
            key: levelGroups[i], parent: p, player1: p1, player2: p2, parentNumber: parentNumber
          });
        } else {
          totalGroups.push({ key: levelGroups[i], parent: p, parentNumber: parentNumber });
        }

        parentNumber++;
        if (parentNumber > 1) parentNumber = 0;
      }

      // after the first created level there are no player names
      if (currentLevel >= 0) makeLevel(parentKeys, currentLevel, totalGroups, null)
    }

    function makeModel(players) {
      var model = new go.TreeModel(createPairs(players));

      model.addChangedListener(function(e) {
        if (e.propertyName !== 'score1' && e.propertyName !== 'score2') return;
        var data = e.object;
        if (isNaN(data.score1) || isNaN(data.score2)) return;

        // TODO: What happens if score1 and score2 are the same number?

        // both score1 and score2 are numbers,
        // set the name of the higher-score'd player in the advancing (parent) node
        // if the data.parentNumber is 0, then we set player1 on the parent
        // if the data.parentNumber is 1, then we set player2
        var parent = myDiagram.findNodeForKey(data.parent);
        if (parent === null) return;

        var playerName = parseInt(data.score1) > parseInt(data.score2) ? data.player1 : data.player2;
        if (parseInt(data.score1) === parseInt(data.score2)) playerName = "";
        myDiagram.model.setDataProperty(parent.data, (data.parentNumber === 0 ? "player1" : "player2"), playerName);
      });

      myDiagram.model = model;

      // provide initial scores for at most three pairings
      for (var i = 0; i < Math.min(3, model.nodeDataArray.length); i++) {
        var d = model.nodeDataArray[i];
        if (d.player1 && d.player2) {
          // TODO: doesn't prevent tie scores
          model.setDataProperty(d, "score1", Math.floor(Math.random() * 100));
          model.setDataProperty(d, "score2", Math.floor(Math.random() * 100));
        }
      }
    }

    makeModel(['Adler',
               'Pollock',
               'Montgomery',
               'Lestrade',
               'Wilson',
               'Moran',
               'Bardle',
               'Edwards']);
  } // end init

<div id="sample">
  <!-- The DIV for the Diagram needs an explicit size or else we won't see anything.
       Also add a border to help see the edges. -->
  <div id="myDiagramDiv" style="border: solid 1px black; background: #4D4D4D; width:700px; height:600px"></div>
  <p>
    Click on the empty score boxes next to names to fill in scores for each player.
    The scores must be non-negative numbers with at most 3 digits. Scores are validated using a <a>TextEditingTool.textValidation</a> function.
    When two players in a "game" have a score, one of them will automatically advance to the next round of the bracket.
  </p>
</div>

想在GitHub上查看此示例頁面的源代碼，可。