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

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


GoJS实例


<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 //文字的间距  
                },  
                // 将TextBlock.text绑定到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>