GoJS实例1
阅读原文时间:2023年07月10日阅读:1

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


GoJS实例


<script>  
    var $ = go.GraphObject.make;  
    var myDiagram =  
        $(go.Diagram, "myDiagramDiv", {  
            "undoManager.isEnabled": true // 启用Ctrl-Z撤消和Ctrl-Y重做  
        });  
    var myModel = $(go.Model);  
    // 在模型数据中,每个节点都由一个JavaScript对象表示:  
    myModel.nodeDataArray = \[{  
            key: "Alpha"  
        },  
        {  
            key: "Beta"  
        },  
        {  
            key: "Gamma"  
        }  
    \];  
    myDiagram.model = myModel;  
</script>  

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


GoJS实例


<script>  
    var $ = go.GraphObject.make;  
    var myDiagram = $(go.Diagram, "myDiagramDiv", {  
        "undoManager.isEnabled": true // 启用Ctrl-Z撤消和Ctrl-Y重做  
    });  
    var myModel = $(go.Model);  
    // 在模型数据中,每个节点都由一个JavaScript对象表示:  
    var nodeDataArray = \[{  
            key: "Alpha"  
        },  
        {  
            key: "Beta"  
        },  
        {  
            key: "Gamma"  
        }  
    \];  
    var linkDataArray = \[{  
            from: "Alpha",  
            to: "Beta"  
        },  
        {  
            from: "Alpha",  
            to: "Gamma"  
        }  
    \];  
    myModel = new go.GraphLinksModel(nodeDataArray, nodeLinkDataArray);  
    myDiagram.model = myModel;  
</script>  

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


GoJS实例


<script>  
    var $ = go.GraphObject.make;  
    var diagram = new go.Diagram("myDiagramDiv");  
    diagram.nodeTemplate =  
        $(go.Node, "Auto",  
            $(go.Shape, "RoundedRectangle", {  
                    fill: "white"  
                },  
                new go.Binding("fill", "color")), // shape.fill = data.color  
            $(go.TextBlock, {  
                    margin: 20  
                },  
                new go.Binding("text", "key")) // textblock.text = data.key  
        );

    diagram.linkTemplate =  
        $(go.Link,  
            $(go.Shape,  
                new go.Binding("stroke", "color"), // shape.stroke = data.color  
                new go.Binding("strokeWidth", "thick")), // shape.strokeWidth = data.thick  
            $(go.Shape, {  
                    toArrow: "OpenTriangle",  
                    fill: null  
                },  
                new go.Binding("stroke", "color"), // shape.stroke = data.color  
                new go.Binding("strokeWidth", "thick")) // shape.strokeWidth = data.thick  
        );

    var nodeDataArray = \[{  
            key: "Alpha",  
            color: "lightblue"  
        },  
        {  
            key: "Beta",  
            color: "pink"  
        }  
    \];  
    var linkDataArray = \[{  
        from: "Alpha",  
        to: "Beta",  
        color: "blue",  
        thick: 2  
    }\];  
    diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);  
</script>  

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


GoJS实例


<script>  
    var $ = go.GraphObject.make;  
    var diagram = new go.Diagram("myDiagramDiv");  
    diagram.nodeTemplate =  
        $(go.Node, "Auto",  
            new go.Binding("location", "loc"), // 从data.loc值获取Node.location  
            $(go.Shape, "RoundedRectangle", {  
                    fill: "white"  
                },  
                new go.Binding("fill", "color")),  
            $(go.TextBlock, {  
                    margin: 10  
                },  
                new go.Binding("text", "key"))  
        );

    var nodeDataArray = \[  
        // 为每个节点使用Point值指定位置  
        {  
            key: "Alpha",  
            color: "lightblue",  
            loc: new go.Point(0, 0)  
        },  
        {  
            key: "Beta",  
            color: "pink",  
            loc: new go.Point(100, 50)  
        }  
    \];  
    var linkDataArray = \[{  
        from: "Alpha",  
        to: "Beta"  
    }\];  
    diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);  
</script>  

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


GoJS实例


<script>  
    var $ = go.GraphObject.make;  
    var diagram = new go.Diagram("myDiagramDiv");  
    diagram.nodeTemplate =  
        $(go.Node, "Auto",  
            new go.Binding("location", "loc", go.Point.parse), // convert string into a Point value  
            $(go.Shape, "RoundedRectangle", {  
                    fill: "white"  
                },  
                new go.Binding("fill", "color")),  
            $(go.TextBlock, {  
                    margin: 5  
                },  
                new go.Binding("text", "key"))  
        );

    var nodeDataArray = \[{  
            key: "Alpha",  
            color: "lightblue",  
            loc: "0 0"  
        }, // note string values for location  
        {  
            key: "Beta",  
            color: "pink",  
            loc: "100 50"  
        }  
    \];  
    var linkDataArray = \[{  
        from: "Alpha",  
        to: "Beta"  
    }\];  
    diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);  
</script>  

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


GoJS实例


<script>  
    var $ = go.GraphObject.make;  
    var diagram = new go.Diagram("myDiagramDiv");  
    diagram.nodeTemplate =  
        $(go.Node, "Auto",  
            new go.Binding("location", "loc", go.Point.parse),  
            $(go.Shape, "RoundedRectangle", { // 如果data.highlight未定义,则为默认值:  
                    fill: "yellow",  
                    stroke: "orange",  
                    strokeWidth: 2  
                },  
                new go.Binding("fill", "highlight", function (v) {  
                    return v ? "pink" : "lightblue";  
                }),  
                new go.Binding("stroke", "highlight", function (v) {  
                    return v ? "red" : "blue";  
                }),  
                new go.Binding("strokeWidth", "highlight", function (v) {  
                    return v ? 3 : 1;  
                })),  
            $(go.TextBlock, {  
                    margin: 10  
                },  
                new go.Binding("text", "key"))  
        );

    var nodeDataArray = \[{  
            key: "Alpha",  
            loc: "0 0",  
            highlight: false  
        },  
        {  
            key: "Beta",  
            loc: "100 50",  
            highlight: true  
        },  
        {  
            key: "Gamma",  
            loc: "0 100"  
        } // 高亮属性未定义:使用默认值  
    \];  
    var linkDataArray = \[{  
        from: "Alpha",  
        to: "Beta"  
    }\];  
    diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);  
</script>  

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


GoJS实例


<script>  
    //为了简洁  
    var $ = go.GraphObject.make;  
    var diagram = new go.Diagram("myDiagramDiv");  
    diagram.nodeTemplate =  
        $(go.Node, "Auto", {  
                locationSpot: go.Spot.Center  
            },  
            $(go.Shape, "RoundedRectangle", { // default values if the data.highlight is undefined:  
                    fill: "yellow",  
                    stroke: "orange",  
                    strokeWidth: 2  
                },  
                new go.Binding("fill", "highlight", function (v) {  
                    return v ? "pink" : "lightblue";  
                }),  
                new go.Binding("stroke", "highlight", function (v) {  
                    return v ? "red" : "blue";  
                }),  
                new go.Binding("strokeWidth", "highlight", function (v) {  
                    return v ? 3 : 1;  
                })),  
            $(go.TextBlock, {  
                    margin: 5  
                },  
                new go.Binding("text", "key"))  
        );  
    diagram.model.nodeDataArray = \[{  
            key: "Alpha",  
            highlight: false  
        } // just one node, and no links  
    \];

    function flash() {  
        var model = diagram.model;  
        // all model changes should happen in a transaction  
        model.startTransaction("flash");  
        var data = model.nodeDataArray\[0\]; // get the first node data  
        model.setDataProperty(data, "highlight", !data.highlight);  
        model.commitTransaction("flash");  
    }

    function loop() {  
        //每0.5s相互转换颜色  
        setTimeout(function () {  
            flash();  
            loop();  
        }, 500);  
    }  
    loop();  
</script>