【广州前端】go.js流程图绘制 - 黑马程序员技术交流社区

[JavaScript] 纯文本查看 复制代码

myPalette =

      $(go.Palette, "myPaletteDiv", 

        {

          "animationManager.duration": 800, 

          nodeTemplateMap: myDiagram.nodeTemplateMap,  

          model: new go.GraphLinksModel([  

            //category为方块的样式，text为方块内的文字，如需添加或删除方块，只要增加或删除此数组内的对象即可

            { category: "Start", text: "Start" },

            { text: "Step" },

            { text: "main", figure: "Diamond" },

            { category: "End", text: "End" },

            { category: "Comment", text: "Comment" }

          ])

        });

[JavaScript] 纯文本查看 复制代码

 function load() {

    myDiagram.model = go.Model.fromJson({ "class": "go.GraphLinksModel",

  "linkFromPortIdProperty": "fromPort",

  "linkToPortIdProperty": "toPort",

  "nodeDataArray": [

  //nodeDataArray数组内的一个对象代表一个方块，三个参数都是必须的，第一个key代表每个方块的id；第二个loc代表方块的x，与y轴坐标；第三个text代表方块内的文字

{"key":1, "loc":"100 170", "text":"源端"},

{"key":2, "loc":"200 100", "text":"table1"},

{"key":3, "loc":"200 170", "text":"table2"},

{"key":4, "loc":"200 230", "text":"table3"}

],

  "linkDataArray": [

  //linkDataArray数组每个对象代表的是一个方块与另外一个方块的连接，第一个参数from表示从哪个方块开始，里面的数字是nodeDataArray对象里对应的key值；第二个参数to代表的是连接到哪个方块；第三个参数fromPort代表的是开始方块从哪个方向开始，有四个值（T,B,L,R）代表上下左右；第四个参数toPort是结束方块的连接方向，有四个值（T,B,L,R）代表上下左右;

{"from":1, "to":2, "fromPort":"R", "toPort":"L"},

{"from":1, "to":3, "fromPort":"T", "toPort":"L"},

{"from":1, "to":4, "fromPort":"R", "toPort":"L"}

 ]});

  }