flowchart.js使用总结

概述

主要分为三部分，1、定义流程图所需要的元素。2、将定义好的元素按照需求进行连接。3、执行js对流程图进行渲染。

1、定义元素

格式
	名称=>类型 : 显示内容 | 模块Id:点击事件(跳转链接)
	//模块Id主要用于对某一单独的模块进行渲染时的选择

//例如
st=>start: 资料预审|past:>http://www.baidu.com[blank]

类型	描述
start
end
operation
condition
subroutine
inputoutput
parallel

类型只是代表样式，样式与功能并无关系

2、连接元素

2.1、连接方式

格式
		定义元素名称->定义元素名称->定义元素名称

//例如
st->op1（right）->cond

注意：可以添加括号来定义连接下一任务时的方向，默认为下。（只能定义right，因为流程图是从左上角开始往右下角进行的）

//判断框连接方法
cond(yes)->op2//yes判断为真时执行，下一任务框为向下连接
cond(no)->sub1//no判断为假时执行，下一任务框为向右连接

2.2、修饰连接线

格式
		定义元素名称@>定义元素名称({"属性":"值","属性":"值"})@>定义元素名称({"属性":"值"})

//自定义任务框连接线的样式
st@>op1({"stroke":"blue"})//连线颜色
st@>op1({"stroke-width":6})//连线粗细
st@>op1({"arrow-end":"classic-wide-long"})//连线箭头样式
//也可将属性用逗号进行拼接，对一条连线进行修饰
st@>op1({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})

注：自定义连接线不能与连接方法写在一起，需要在连接方法后面，单独定义。

3、渲染流程图

// An highlighted block
                      'line-width': 3,//连线、边框的宽度
                      'maxWidth': 3,//确保流程图符合一定的宽度
                      'line-length': 50,//连线长度
                      'text-margin': 10,//任务框文字与任务框距离
                      'font-size': 14,//字体大小
                      'font': 'normal',
                      'font-family': 'Helvetica',
                      'font-weight': 'normal',
                      'font-color': 'black',//字体颜色
                      'line-color': 'black',//连线颜色
                      'element-color': 'black',//边框颜色
                      'fill': 'white',//背景填充颜色
                      'yes-text': 'yes',//判断为正时，判断框连线上的显示值
                      'no-text': 'no',//判断为负时，判断框连线上的显示值
                      'arrow-end': 'block',//连线箭头样式
                      'scale': 1,//流程图整体大小，放大级别
                      'symbols': {
                        'start': {
                          'font-color': 'red',
                          'element-color': 'green',
                          'fill': 'yellow'
                        },
                        'end':{
                          'class': 'end-element'//定义class属性，可用于css选择器
                        }
                      },
                      'flowstate' : {
                      //根据定义元素的Id来单独进行渲染
                        'past' : { 'fill' : '#CCCCCC', 'font-size' : 12},
                        'current' : {'fill' : 'yellow', 'font-color' : 'red', 'font-weight' : 'bold'},
                        'future' : { 'fill' : '#FFFF99'},
                        'request' : { 'fill' : 'blue'},
                        'invalid': {'fill' : '#444444'},
                        'approved' : { 'fill' : '#58C4A3', 'font-size' : 12, 'yes-text' : 'APPROVED', 'no-text' : 'n/a' },
                        'rejected' : { 'fill' : '#C45879', 'font-size' : 12, 'yes-text' : 'n/a', 'no-text' : 'REJECTED' }

4、js操作

1、方式1

                    $('[id^=sub1]').click(function(){//id取定义的名称
                      alert('info here');
                    });

2、方式2

//模块Id后面添加“:函数”
op1=>operation: 执行框|past:$myFunction

            function myFunction(event, node) {//node为当前点击模块的内容及其属性
              console.log("You just clicked this node:", node);
            }

输出内容为