先贴图,下图有两种方式设置线条颜色,一种是自定义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}
 ]}

gojs动态设置线条颜色及线条上面可写文字。相关推荐

  1. Android代码动态设置圆角,颜色,线条背景

    开发中平时用到了圆角背景,但是每个圆角背景都不一样,这样还要创建多个xml布局,为了简单快捷,可以使用代码创建圆角背景. 这里以创建矩形圆角背景为例.GradientDrawable.RECTANGL ...

  2. Android动态设置字体颜色

    1.在values文件夹里面创建colors.xml文件,然后写入相应的颜色 <!-- 白色 --><color name="white">#FFFFFF& ...

  3. android progressbar动态,ProgressBar动态设置进度颜色

    这里写的是改变横向进度条形式的ProgressBar颜色 主要功能代码如下 //获取progressBar的LayerDrawable,LayerDrawablle是我们写layer-list生成的多 ...

  4. rdlc 根据条件动态设置字体颜色

    右击选择 "文本框 属性" -> "字体",找到 "颜色"后面的 fx 按钮,在 "表达式" 框中写入一下代码: ...

  5. android动态设置文本居中显示图片,Android DrawableTextView图片文字居中显示实例

    在我们开发中,TextView设置Android:drawableLeft一定使用的非常多,但Drawable和Text同时居中显示可能不好控制,有没有好的办法解决呢? 小编的方案是通过自定义Text ...

  6. Android RadioGroup动态加入RadioButton,动态设置选中和未选中的颜色及设置默认选中

    此篇文章主要实现功能:RadioGroup控件根据服务端返回的数据动态添加RadioButton 关于RadioButton动态设置背景颜色和字体颜色,踩过好多坑,接下来我总结一下遇到的所有问题及解决 ...

  7. Visio导入CAD绘图问题总结-更改形状线条颜色问题解决

    官方参考资料: 打开.插入.转换以及保存 DWG 和 DXF (AutoCAD) 绘图 选择dxf或者dwg格式的文件导入. 点击确定导入.然后在导入的cad对象上右键选择CAD绘图对象->转换 ...

  8. vue动态设置文字布局方式_VUE+Canvas实现输入文字生成对应的字体图片小功能

    你是不是经常浏览字体网站的时候,发现他们的"字体生成器"和预览功能很好奇,为什么输入框输入文字之后,点击预览,下面都会修改对应的字体内容,以便达到了没有安装字体也可以预览这个字体效 ...

  9. TextView设置字体颜色的几种方法简记

    Android中设置TextView字体颜色的方法: 方法一:直接在xml文件中设置 直接在xml文件中设置字体颜色,如android:textColor="@color/white_80& ...

最新文章

  1. c#用正则表达式获得指定开始和结束字符串中间的一段文本
  2. python实战===图片转换为字符的源码(转)
  3. Linux 网络路由介绍
  4. 搜索引擎anti-spam系统设计指南
  5. php iis日志分析,星外系统IIS日志分析常用的几个命令小结
  6. java手机太亮,Android 亮度调节
  7. spring boot中问题总结
  8. (深度剖析结构)模块化解释矢量控制
  9. 2008.12.8希世软件杭州公司
  10. 智能云网IT架构解析
  11. 收钱吧好还是网付好?
  12. 苹果手机左上角的数字怎么弄_手把手教你把抖音视频音乐设置为手机铃声。
  13. Mac使用-键盘符号对照
  14. 拿棱镜门黑客软件攻击“俄版百度”,不偷情报只想装大V,FBI们被抓包了
  15. 关于有偿提供拼图响应式后台的通知
  16. linux 列转行函数,GP行转列、列转行函数
  17. 解决 苹果ios input输入框弹出输入法 但是 无法输入内容问题
  18. r语言和python爬虫谁厉害_R vs Python: 谁是最好的数据科学语言?
  19. 一个可以褥羊毛的微信小程序
  20. ASEMI整流桥KBPC3510W参数特性,KBPC3510W封装尺寸

热门文章

  1. 3.JavaScript
  2. [机器学习]XGBoost---增量学习多阶段任务学习
  3. linux配置浮动路由,Linux 如何设置浮动IP地址
  4. css 环形刻度表示,css3实现环形进度
  5. Unity 中的坐标系
  6. 【固定资产】要在卡片和卡片管理上显示计量单位
  7. Cloud一分钟 |支付宝上线“全国首张电子离婚证”;美国漫画界元老级人物斯坦·李去世...
  8. 三插头内部结构图_三相漏电保护器内部结构图
  9. Java个人技术知识点总结(业务场景篇,java高级多线程面试
  10. java web开发传智书城项目中文乱码