| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
jopen
9年前发布

Flowchart.js:支持用文本绘制SVG格式流程图

Flowchart.js:支持用文本绘制SVG格式流程图。

Usage

On your page you need to include raphael like so:

<script src="raphael-min.js"></script>

and then

<div id="diagram">Diagram will be placed here</div>  <script src="flowchart.js"></script>  <script>     var diagram = flowchart.parse('st=>start: Start:>http://www.google.com[blank]\n' +                                   'e=>end:>http://www.google.com\n' +                                   'op1=>operation: My Operation\n' +                                   'sub1=>subroutine: My Subroutine\n' +                                   'cond=>condition: Yes \n' +                                   'or No?\n:>http://www.google.com' +                                   'io=>inputoutput|request: catch something...\n' +                                   '' +                                  'st->op1->cond\n' +                                   'cond(yes)->io->e\n' + // conditions can also be redirected like cond(yes, bottom) or cond(yes, right)                                  'cond(no)->sub1(right)->op1');// the other symbols too...    diagram.drawSVG('diagram');      // you can also try to pass options:      diagram.drawSVG('diagram', {                                  'x': 0,                                  'y': 0,                                  'line-width': 3,                                  'line-length': 50,                                  'text-margin': 10,                                  'font-size': 14,                                  'font-color': 'black',                                  'line-color': 'black',                                  'element-color': 'black',                                  'fill': 'white',                                  'yes-text': 'yes',                                  'no-text': 'no',                                  'arrow-end': 'block',                                  'scale': 1,                                  // style symbol types                                  'symbols': {                                      'start': {                                        'font-color': 'red',                                        'element-color': 'green',                                        'fill': 'yellow'                                      },                                      'end':{                                          'class': 'end-element'                                      }                                  },                                  // even flowstate support ;-)                                  'flowstate' : {                                      // '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' }                                    }                                });  </script>

项目主页:http://www.open-open.com/lib/view/home/1442669693774

 本文由用户 jopen 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1442669693774.html
图表/报表制作 Flowchart.js