流程图

来源：互联网发布：日本旅游注意事项知乎编辑：程序博客网时间：2024/06/11 07:28

<!DOCTYPE html>

<htmllang="en">

<head>

<metacharset="utf-8">

<title>flowchart.js · Playground</title>

<styletype="text/css">

    .end-element{ background-color : #333;color:#eee; }

</style>

<scriptsrc="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.0/raphael-min.js"></script>

<scriptsrc="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<scriptsrc="http://flowchart.js.org/flowchart-latest.js"></script>

<!-- <script src="../release/flowchart.min.js"></script> -->

<script>

    window.onload= function () {

        varbtn = document.getElementById("run"),

            cd1= document.getElementById("code1"),cd2= document.getElementById("code2"),

            chart;

        (btn.onclick= function () {

            varcode = cd1.value+ cd2.value;

            if(chart) {chart.clean(); }

            chart= flowchart.parse(code);

            chart.drawSVG('canvas', {

                // 'x': 30,

                // 'y': 50,

                'line-width':2,

                'maxWidth':3,//ensures the flowcharts fits within a certian width

                'line-length':50,

                'text-margin':10,

                'font-size':14,

                'font':'normal',

                'font-family':'微软雅黑',

                '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'

}

},

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

}

});

            $('[id^=sub1]').click(function(){

                alert('info here');

});

        })();

};

</script>

</head>

<body>

<div>

<textareaid="code1"style="display:none;width:100%;"rows="11">

    start=>start: Start|past:>http://www.baidu.com[blank]

    end=>end: End:>http://www.google.com

    op1=>operation: My Operation|past

    op2=>operation: Stuff|current

    sub1=>subroutine: My Subroutine|invalid

    cond=>condition: Yes or No?|approved:>http://www.google.com

    c2=>condition: Good idea|rejected

    io=>inputoutput: catch something...|request

</textarea>

<textareaid="code2"style="display:none;width:100%;"rows="11">

    start->op1(right)->cond

    cond(yes, right)->c2

    cond(no)->sub1(left)->op1

    c2(yes)->io->end

    c2(no)->op2->end

</textarea>

</div>

<div><buttonid="run"type="button">Run</button></div>

<divid="canvas"></div>

</body>

</html>

阅读全文

0 0