gojs实现多轮多场比赛可编辑打分图表效果代码-html代码-BFW代码库

gojs实现多轮多场比赛可编辑打分图表效果代码

代码语言：html

所属分类：图表

代码描述：gojs实现多轮多场比赛可编辑打分图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <script src="//repo.bfw.wiki/bfwrepo/js/go.js"></script>

    <div id="allSampleContent" class="p-4 w-full">
        <script id="code">
            function init() {
        
              // Since 2.2 you can also author concise templates with method chaining instead of GraphObject.make
              // For details, see https://gojs.net/latest/intro/buildingObjects.html
              const $ = 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);
                }
              .........完整代码请登录后点击上方下载按钮下载查看