gojs动态设置线条颜色及线条上面可写文字。
先贴图，下图有两种方式设置线条颜色，一种是自定义linkDataArray数据属性来定义线条颜色，另一种是通过linkDataArray 中设置color来设置线条颜色并通过text属性来设置线条上的文字
第一种设置线条颜色的方法
（自定义属性"category":"auditedLineColor"，在linkDataArray中添加这个熟悉即可设置，下面是写死的红色（red）可自行配置其它颜色同时也可添加多个其它属性写法一样，只是将auditedLineColor换个名称即可）
myDiagram.model.addLinkData({"category":"auditedLineColor"});
// 其实也可以像创建节点那样，var 一个节点 然后定义相关的东西
myDiagram.linkTemplateMap.add("auditedLineColor",
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"}),
objGo(go.TextBlock,new go.Binding('text', 'text'))
)
);
第二种修改线条颜色，同时在线条上写字的方法
//连接线装饰模板
var linkSelectionAdornmentTemplate =
objGo(go.Adornment, "Link",
objGo(go.Shape,
// 声明此形状共享链接。
{ isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0 }) // 使用选择对象的频宽
);
myDiagram.linkTemplate =
objGo(go.Link, // 整个链路面板
{ selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate },
{ relinkableFrom: true, relinkableTo: true, reshapable: true },
{
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 5,
toShortLength: 4
},
new go.Binding("points").makeTwoWay(),
objGo(go.Shape, // 链路路径形状
new go.Binding('stroke', 'color'),//这个是表示连续箭头的颜色，在linkDataArray中设置color属性
{ isPanelMain: true, strokeWidth: 2 }), //设置连线的颜色stroke: "red"
objGo(go.Shape, // 箭头
{ toArrow: "Standard", stroke: null }),
objGo(go.Panel, "Auto",
new go.Binding("visible", "isSelected").ofObject(),
objGo(go.Shape, "RoundedRectangle", // 连杆形状 左边的圆角矩形
{ fill: "#F8F8F8", stroke: null }),
objGo(go.TextBlock,
{
textAlign: "center",
font: "10pt helvetica, arial, sans-serif",
stroke: "#919191",
margin: 2,
minSize: new go.Size(10, NaN),
editable: true
},
new go.Binding("text").makeTwoWay())
),
objGo(go.TextBlock,new go.Binding('text', 'text')) //这个表示linkDataArray中属性为text的值，即使连线上的文字
);
最后是数据结构了（主要是针对线条（linkDataArray）数据的改变）
{ "class": "go.GraphLinksModel",
"linkFromPortIdProperty": "fromPort",
"linkToPortIdProperty": "toPort",
"modelData": {"position":"0 0"},
"nodeDataArray": [
{"text":"Start", "figure":"Circle", "fill":"#00AD5F", "key":-1, "loc":"-100 100"},
{"text":"条件一", "figure":"Diamond", "fill":"lightskyblue", "key":-4, "loc":"100 100"},
{"text":"End", "figure":"Circle", "fill":"#CE0620", "key":-5, "loc":"1300 50"},
{"text":"条件二", "figure":"Diamond", "fill":"red", "key":-6, "loc":"300 -150"},
{"text":"条件三", "figure":"Diamond", "fill":"lightskyblue", "key":-7, "loc":"300 -50"},
{"text":"条件四", "figure":"Diamond", "fill":"lightskyblue", "key":-8, "loc":"300 50"},
{"text":"条件五", "figure":"Diamond", "fill":"lightskyblue", "key":-9, "loc":"300 150"},
{"text":"Step1", "key":-2, "loc":"500 -150"},
{"text":"Step2", "key":-10, "loc":"500 -50"},
{"text":"Step4", "key":-11, "loc":"500 50"},
{"text":"Step3", "key":-12, "loc":"700 -50"},
{"text":"Step5", "key":-13, "loc":"700 50"},
{"text":"Step6", "key":-14, "loc":"900 50"},
{"text":"Step7", "key":-15, "loc":"500 150"},
{"text":"Step8", "key":-16, "loc":"700 150"},
{"text":"Step9", "key":-17, "loc":"900 150"},
{"text":"Step10", "key":-18, "loc":"1100 150"},
{"text":"Step12", "key":-19, "loc":"500 100"},
{"text":"Step13", "key":-20, "loc":"500 200"}
],
"linkDataArray": [
{"from":-4, "to":-6, "category":"auditedLineColor","text":"金额>1000"},
{"from":-4, "to":-7, "category":"auditingLineColor","text":"金额>5000"},
{"from":-4, "to":-8 ,"text":"金额>10000","color":"red"},
{"from":-4, "to":-9,"text":"金额>100000","color":"blue"},
{"from":-1, "to":-4},
{"from":-6, "to":-2},
{"from":-2, "to":-5},
{"from":-7, "to":-10},
{"from":-10, "to":-12},
{"from":-12, "to":-5},
{"from":-8, "to":-11},
{"from":-11, "to":-13},
{"from":-13, "to":-14},
{"from":-14, "to":-5},
{"from":-9, "to":-15},
{"from":-15, "to":-16},
{"from":-16, "to":-17},
{"from":-17, "to":-18},
{"from":-18, "to":-5},
{"from":-9, "to":-19},
{"from":-9, "to":-20},
{"from":-19, "to":-16},
{"from":-20, "to":-16}
]}