smartCycle自定义循环流程图

引入smartCycle流程图插件

<script type="text/javascript" src="js/smartCycle.min.js"></script>

smartCycle生成在线流程图

var radio = 160;
var radio_arrows = 140;
var container_width = 420, container_height = 420;
var c_container_width = 420, c_container_height = 420;

$(".ciclo1").smartCycle({
    container_width: '420px',
    container_height: '420px',
    radio: radio,
    radio_arrows: radio_arrows,
    arrows_colors: ['#40A4C0'],
    colors: ['#928fa2', '#928fa2']
});

自定义添加随机流程图按钮

var alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'Ñ', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
var alphabet_pos = 6;
$(".add").click(function() {
    $(".ciclo1").append('<a class="sc_object">' + alphabet[alphabet_pos] + '</a>');
    radio += 25;
    radio_arrows += 25;
    container_width += 50;
    container_height += 50;
    c_container_width += 50;
    c_container_height += 50;
    $(".contenedor").css({
        'width': c_container_width + 'px',
        'height': c_container_height + 'px'
    });
    $(".ciclo1").smartCycle('options', {'radio': radio, 'radio_arrows': radio_arrows, 'container_width': container_width + 'px',
        'container_height': container_height + 'px', });
    $(".ciclo1").smartCycle('realign');
    alphabet_pos += 1;
});

smartCyle.jsAPI参数