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]}
]}