GoJS实例3 - 码农教程

复制如下内容保存到空白的.html文件中，用浏览器打开即可查看效果
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>GoJS实例</title>
    <style>
        #myDiagramDiv {
            width: 400px;
            height: 500px;
            background-color: #DAE4E4;
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://unpkg.com/gojs/release/go-debug.js"></script>
</head>

<body>
    <div id="myDiagramDiv"></div>

    <script>
        //为了简洁
        var $ = go.GraphObject.make;
        var diagram = new go.Diagram("myDiagramDiv");
        //节点模板描述如何构建每个节点
        diagram.nodeTemplate =
            $(go.Node, "Auto", //形状自动填充适合
                $(go.Shape, "RoundedRectangle", // 使用圆角长方形
                    // 将Shape.fill绑定到Node.data.color
                    new go.Binding("fill", "color")),
                $(go.TextBlock, {
                        margin: 3
                    }, // some room around the text
                    // bindTextBlock.text to Node.data.key
                    new go.Binding("text", "key"))
            );
        // 模型仅包含描述图表的基本信息
        diagram.model = new go.GraphLinksModel( //两个JavaScript对象数组
            [
                // 添加“颜色”属性
                {
                    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: "Beta",
                    to: "Beta"
                },
                {
                    from: "Gamma",
                    to: "Delta"
                },
                {
                    from: "Delta",
                    to: "Alpha"
                }
            ]);
        diagram.initialContentAlignment = go.Spot.Center;
        // 启用Ctrl-Z撤消和Ctrl-Y重做
        diagram.undoManager.isEnabled = true;
    </script>
</body>

</html>
原文地址：https://www.cnblogs.com/Alwaysbecoding/p/11848380.html