gojs跟进流程进度，动态显示线条及箭头颜色

先贴图，箭头和连线颜色可自己配置

  

//自定义线条颜色及箭头颜色，只有linkDataArray中有"category":"lineColor"样式即可，可动态设置"category":"lineColor"显示流程位置
        myDiagram.model.addLinkData({"category":"lineColor"});
           // 其实也可以像创建节点那样，var 一个节点 然后定义相关的东西
        myDiagram.linkTemplateMap.add("lineColor",
            objGo(go.Link,
                {
                  selectable: false,      // 用户不能选择链接
                  curve: go.Link.Bezier,
                  layerName: "Background"  // 不要在任何节点前面交叉
                },
                objGo(go.Shape,  // 此形状仅在突出显示时才显示
                  { isPanelMain: true, stroke: "red", strokeWidth: 2 },
                  new go.Binding("stroke", "isHighlighted", function(h) { return h ? "red" : null; }).ofObject()),
                objGo(go.Shape,
                  // mark each Shape to get the link geometry with isPanelMain: true
                  { isPanelMain: true, stroke: "red", strokeWidth: 1 },
                  new go.Binding("stroke", "color")),
                objGo(go.Shape, { toArrow: "Standard",stroke: "red"})
            )

        );

{ "class": "go.GraphLinksModel",
  "linkFromPortIdProperty": "fromPort",
  "linkToPortIdProperty": "toPort",
  "modelData": {"position":"-5 27.662790697674417"},
  "nodeDataArray": [
{"text":"Start", "figure":"Circle", "fill":"#00AD5F", "key":-1, "loc":"220.6627906976744 70", "size":"76 74.67441860465117"},
{"text":"条件一", "figure":"Diamond", "fill":"lightskyblue", "key":-4, "loc":"400 190"},
{"text":"第一步", "key":-2, "loc":"400 70"},
{"text":"End", "figure":"Circle", "fill":"#CE0620", "key":-5, "loc":"210 360"},
{"text":"条件二", "figure":"Diamond", "fill":"lightskyblue", "key":-6, "loc":"400 360"}
 ],
  "linkDataArray": [
{"from":-1, "to":-2,"category":"lineColor", "fromPort":"R", "toPort":"L", "points":[258.6627906976744,70,268.6627906976744,70,312.8313953488372,70,312.8313953488372,70,357,70,367,70]},
{"from":-2, "to":-4,"category":"lineColor","fromPort":"", "toPort":"T", "points":[400,87.45,400,97.45,400,121.775,400,121.775,400,146.1,400,156.1]},
{"from":-4, "to":-6, "fromPort":"", "toPort":"T", "points":[400,223.9,400,233.9,400,275,400,275,400,316.1,400,326.1]},
{"from":-6, "to":-5, "fromPort":"", "toPort":"R", "points":[335.00000000000006,360,325.00000000000006,360,288.98837209302326,360,288.98837209302326,360,252.97674418604652,360,242.97674418604652,360]}
 ]}