html简易流程图
效果图
使用html+css+js，无图片，没用Canvas
demo:
<!DOCTYPE html>
<html>
<head><link href="draw.css" rel="stylesheet" /><script src="draw.js" type="text/javascript"></script>
</head>
<body><div class="diamond" style="top:100px;left: 100px;"><span class="diamond-text">开始</span></div><!-- 下箭头 --><div class="arrow-down" style="top:195px;left:140px;"><span></span></div><div class="rectangle" style="top:275px;left: 100px;"><span class="rectangle-text">步骤一</span></div><div class="arrow-down" style="top:325px;left:140px;"><span></span></div><div class="rectangle" style="top:405px;left: 100px;"><span class="rectangle-text">步骤二</span></div><div class="arrow-down" style="top:455px;left:140px;"><span></span></div><div class="diamond" style="top:550px;left: 100px;"><span class="diamond-text">分叉节点</span></div><div><div class="arrow-down" style="top:645px;left:140px;"><span></span></div><div class="rectangle" style="top:725px;left: 100px;"><span class="rectangle-text">步骤三</span></div></div><div><div class="arrow-horizontal-down" style="top:590px;left:195px;"><div></div><span></span></div><div class="rectangle" style="top:725px;left: 230px;"><span class="rectangle-text">步骤四</span></div></div></body>
</html>
css:
/* 椭圆 */
.ellipse {width: 100px;height: 50px;background-color: #6495ED;border-radius: 100px;text-align: center;position: absolute;
}.ellipse-text {width: 80px;height: 50px;margin-top: 10px;
}/* 菱形，长宽91.28 */
.diamond {width: 80px;height: 80px;transform: rotate(45deg);background-color: #bfa;position: absolute;
}.diamond-text{width: 60px;margin-top: 10px;display: inline-block;transform: rotate(-45deg);text-align: center;
}/* 长方形 */
.rectangle{width: 92px;height: 50px;border: 1px;border-color: black;background-color: aquamarine;text-align: center;position: absolute;
}/* 向下箭头 */
.arrow-down {width: 2px;height: 80px;background-color: black;position: absolute;
}.arrow-down span {width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 10px solid black;position: relative;top:81px;left:-4px;
}/* 折线箭头 */
.arrow-horizontal-down {width: 150px;height: 2px;background-color: black;position: absolute;z-index: -1;
}.arrow-horizontal-down div{width: 2px;height: 125px;left:150px;background-color: black;position: relative;
}.arrow-horizontal-down span {width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 10px solid black;position: relative;top:10px;left:146px;
}/* 横线 */
.horizontal-line{width: 100px;height: 2px;background-color: black;position: absolute;z-index: -1;
}
js 代码 可以动态生成流程图
// json 节点数据
// let data = [{"id":0,"name":"开始","type":"diamond","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1369,1370,1376,1380,1412,1413,1553,2120],"LengtheningTime":0},{"id":1369,"name":"部门负责人I","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1371],"LengtheningTime":0},{"id":1370,"name":"部门负责人II","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1372],"LengtheningTime":0},{"id":1371,"name":"逐级审批I","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1402],"LengtheningTime":0},{"id":1372,"name":"逐级审批II","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1393],"LengtheningTime":0},{"id":1374,"name":"人力与行政负责人II","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1982],"LengtheningTime":0},{"id":1375,"name":"总经理II","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1575],"LengtheningTime":0},{"id":1376,"name":"部门负责人III","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1377],"LengtheningTime":0},{"id":1377,"name":"逐级审批III","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1395],"LengtheningTime":0},{"id":1378,"name":"人力与行政负责人III","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1983],"LengtheningTime":0},{"id":1380,"name":"部门负责人IV","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1381],"LengtheningTime":0},{"id":1381,"name":"逐级审批IV","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1396],"LengtheningTime":0},{"id":1382,"name":"人力与行政负责人lV","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1985],"LengtheningTime":0},{"id":1393,"name":"上级审批II","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1929],"LengtheningTime":0},{"id":1395,"name":"上级审批III","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1930],"LengtheningTime":0},{"id":1396,"name":"上级审批IV","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1931],"LengtheningTime":0},{"id":1402,"name":"上级审批l","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1928],"LengtheningTime":0},{"id":1403,"name":"管理员处理","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[],"LengtheningTime":0},{"id":1404,"name":"程序中心总经理I","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1701],"LengtheningTime":0},{"id":1405,"name":"程序中心总经理II","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1702],"LengtheningTime":0},{"id":1406,"name":"程序中心总经理III","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1703],"LengtheningTime":0},{"id":1407,"name":"程序中心总经理IV","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1704],"LengtheningTime":0},{"id":1412,"name":"总经理（002）","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1578],"LengtheningTime":0},{"id":1413,"name":"总经理1（002）","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1699],"LengtheningTime":0},{"id":1552,"name":"人力与行政负责人","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1609],"LengtheningTime":0},{"id":1553,"name":"部门负责人V","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1554],"LengtheningTime":0},{"id":1554,"name":"逐级审批V","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1555],"LengtheningTime":0},{"id":1555,"name":"上级审批V","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1932],"LengtheningTime":0},{"id":1556,"name":"程序中心总经理V","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1705],"LengtheningTime":0},{"id":1557,"name":"人力与行政负责人V","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1986],"LengtheningTime":0},{"id":1575,"name":"管理员处理","type":"ellipse","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[],"LengtheningTime":0},{"id":1578,"name":"管理员处理","type":"ellipse","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[],"LengtheningTime":0},{"id":1579,"name":"管理员处理","type":"ellipse","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[],"LengtheningTime":0},{"id":1609,"name":"综合业务负责人","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1579],"LengtheningTime":0},{"id":1612,"name":"综合业务负责人I","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1974],"LengtheningTime":0},{"id":1613,"name":"综合业务负责人II","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1375],"LengtheningTime":0},{"id":1696,"name":"HRBPII","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1374],"LengtheningTime":0},{"id":1697,"name":"HRBPIII","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1378],"LengtheningTime":0},{"id":1698,"name":"HRBPIV","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1382],"LengtheningTime":0},{"id":1699,"name":"人力资源备案","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1552],"LengtheningTime":0},{"id":1700,"name":"HRBPV","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1557],"LengtheningTime":0},{"id":1701,"name":"发行中心负责人I","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1612],"LengtheningTime":0},{"id":1702,"name":"发行中心负责人II","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1696],"LengtheningTime":0},{"id":1703,"name":"发行中心负责人III","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1697],"LengtheningTime":0},{"id":1704,"name":"发行中心负责人IV","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1698],"LengtheningTime":0},{"id":1705,"name":"发行中心负责人V","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1700],"LengtheningTime":0},{"id":1928,"name":"美术负责人I","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2265],"LengtheningTime":0},{"id":1929,"name":"美术负责人II","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2266],"LengtheningTime":0},{"id":1930,"name":"美术负责人III","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2267],"LengtheningTime":0},{"id":1931,"name":"美术负责人IV","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2268],"LengtheningTime":0},{"id":1932,"name":"美术负责人V","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2269],"LengtheningTime":0},{"id":1974,"name":"HRBPI","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1975],"LengtheningTime":0},{"id":1975,"name":"人力与行政负责人I","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1981],"LengtheningTime":0},{"id":1976,"name":"人力资源备案II","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2067],"LengtheningTime":0},{"id":1979,"name":"人力资源备案IV","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2175],"LengtheningTime":0},{"id":1980,"name":"人力资源备案V","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2176],"LengtheningTime":0},{"id":1981,"name":"史延斌I","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1403],"LengtheningTime":0},{"id":1982,"name":"史延斌II","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1976],"LengtheningTime":0},{"id":1983,"name":"史延斌III","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2068],"LengtheningTime":0},{"id":1984,"name":"人力资源备案III","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2174],"LengtheningTime":0},{"id":1985,"name":"史延斌IV","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1979],"LengtheningTime":0},{"id":1986,"name":"史延斌V","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1980],"LengtheningTime":0},{"id":2067,"name":"部门助理备案","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1613],"LengtheningTime":0},{"id":2068,"name":"部门助理备案","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1984],"LengtheningTime":0},{"id":2107,"name":"程序中心副总经理I","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1404],"LengtheningTime":0},{"id":2108,"name":"程序中心副总经理II","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1405],"LengtheningTime":0},{"id":2109,"name":"程序中心副总经理III","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1406],"LengtheningTime":0},{"id":2110,"name":"程序中心副总经理IV","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1407],"LengtheningTime":0},{"id":2111,"name":"程序中心副总经理V","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[1556],"LengtheningTime":0},{"id":2120,"name":"程序中心副总经理","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2122],"LengtheningTime":0},{"id":2122,"name":"程序BP1","type":"diamond","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2123,2125,2159,2161],"LengtheningTime":0},{"id":2123,"name":"人力与行政负责人","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2179],"LengtheningTime":0},{"id":2125,"name":"程序中心总经理","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2137],"LengtheningTime":0},{"id":2126,"name":"总经理审批","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2127],"LengtheningTime":0},{"id":2127,"name":"部门助理审批","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2128],"LengtheningTime":0},{"id":2128,"name":"管理员处理","type":"ellipse","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[],"LengtheningTime":0},{"id":2137,"name":"人力与行政负责人","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2138],"LengtheningTime":0},{"id":2138,"name":"综合业务负责人","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2126],"LengtheningTime":0},{"id":2154,"name":"肖洲","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2503],"LengtheningTime":0},{"id":2155,"name":"肖洲","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2504],"LengtheningTime":0},{"id":2156,"name":"肖洲","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2505],"LengtheningTime":0},{"id":2157,"name":"肖洲","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2506],"LengtheningTime":0},{"id":2158,"name":"肖洲","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2507],"LengtheningTime":0},{"id":2159,"name":"人力资源与行政负责人","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2160],"LengtheningTime":0},{"id":2160,"name":"人力资源备案3","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2180],"LengtheningTime":0},{"id":2161,"name":"程序中心总经理1","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2162],"LengtheningTime":0},{"id":2162,"name":"人力与行政负责人","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2163],"LengtheningTime":0},{"id":2163,"name":"综合业务负责人","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2164],"LengtheningTime":0},{"id":2164,"name":"总经理审批","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2165],"LengtheningTime":0},{"id":2165,"name":"部门助理审批","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2166],"LengtheningTime":0},{"id":2166,"name":"人力资源备案","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2181],"LengtheningTime":0},{"id":2174,"name":"管理员处理","type":"ellipse","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[],"LengtheningTime":0},{"id":2175,"name":"管理员处理","type":"ellipse","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[],"LengtheningTime":0},{"id":2176,"name":"管理员处理","type":"ellipse","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[],"LengtheningTime":0},{"id":2179,"name":"管理员处理","type":"ellipse","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[],"LengtheningTime":0},{"id":2180,"name":"管理员处理","type":"ellipse","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[],"LengtheningTime":0},{"id":2181,"name":"管理员处理","type":"ellipse","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[],"LengtheningTime":0},{"id":2265,"name":"财务与法务负责人I","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2154],"LengtheningTime":0},{"id":2266,"name":"财务与法务负责人II","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2155],"LengtheningTime":0},{"id":2267,"name":"财务与法务负责人III","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2156],"LengtheningTime":0},{"id":2268,"name":"财务与法务负责人IV","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2157],"LengtheningTime":0},{"id":2269,"name":"财务与法务负责人V","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2158],"LengtheningTime":0},{"id":2503,"name":"BP代批（I）","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2107],"LengtheningTime":0},{"id":2504,"name":"BP代批（II）","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2108],"LengtheningTime":0},{"id":2505,"name":"BP代批（III）","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2109],"LengtheningTime":0},{"id":2506,"name":"BP代批（IV）","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2110],"LengtheningTime":0},{"id":2507,"name":"BP代批（V）","type":"rectangle","click":"alert(1)","apptid":"ihrm_attendanceleave","children":[2111],"LengtheningTime":0}]
let data = [{"id":0,"name":"开始","type":"ellipse","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1487],"LengtheningTime":0},{"id":1487,"name":"预算组审批","type":"diamond","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1488,1502,1999],"LengtheningTime":0},{"id":1488,"name":"上级审批01","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1490],"LengtheningTime":0},{"id":1490,"name":"上级审批02","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1495],"LengtheningTime":0},{"id":1492,"name":"总经理审批","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1500],"LengtheningTime":0},{"id":1493,"name":"财务会计审批","type":"diamond","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1794,1795],"LengtheningTime":0},{"id":1494,"name":"财务负责人0","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1590],"LengtheningTime":0},{"id":1495,"name":"上级审批03","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1496],"LengtheningTime":0},{"id":1496,"name":"上级审批04","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1937],"LengtheningTime":0},{"id":1497,"name":"程序中心总经理","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1678],"LengtheningTime":0},{"id":1500,"name":"执行中1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[],"LengtheningTime":0},{"id":1502,"name":"上级审批(001)","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1766],"LengtheningTime":0},{"id":1503,"name":"财务会计审核","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1504],"LengtheningTime":0},{"id":1504,"name":"财务总监","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1598],"LengtheningTime":0},{"id":1590,"name":"执行中0","type":"ellipse","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[],"LengtheningTime":0},{"id":1591,"name":"执行中","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[],"LengtheningTime":0},{"id":1598,"name":"财务负责人","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1591],"LengtheningTime":0},{"id":1599,"name":"财务负责人","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1492],"LengtheningTime":0},{"id":1635,"name":"综合业务负责人","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1493],"LengtheningTime":0},{"id":1678,"name":"发行中心负责人","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1635],"LengtheningTime":0},{"id":1766,"name":"综合业务负责人","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1503],"LengtheningTime":0},{"id":1794,"name":"财务总监审批0","type":"ellipse","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1494],"LengtheningTime":0},{"id":1795,"name":"财务总监审批","type":"ellipse","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1599],"LengtheningTime":0},{"id":1937,"name":"美术负责人","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2275],"LengtheningTime":0},{"id":1999,"name":"上级审批1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2000],"LengtheningTime":0},{"id":2000,"name":"上级审批2","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2001],"LengtheningTime":0},{"id":2001,"name":"上级审批3","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2532],"LengtheningTime":0},{"id":2002,"name":"财务会计审批1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2003],"LengtheningTime":0},{"id":2003,"name":"财务总监审批1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2004],"LengtheningTime":0},{"id":2004,"name":"财务负责人审批","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2005],"LengtheningTime":0},{"id":2005,"name":"执行中11","type":"ellipse","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[],"LengtheningTime":0},{"id":2116,"name":"程序中心副总经理","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[1497],"LengtheningTime":0},{"id":2144,"name":"程序三部预算","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2202],"LengtheningTime":0},{"id":2202,"name":"肖洲","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2493],"LengtheningTime":0},{"id":2203,"name":"程序副总经理预算","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2116],"LengtheningTime":0},{"id":2275,"name":"财务与法务负责人","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2144],"LengtheningTime":0},{"id":2493,"name":"二级部门负责人审批","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2203],"LengtheningTime":0},{"id":2532,"name":"上级审批4","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2533],"LengtheningTime":0},{"id":2533,"name":"美术负责人1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2534],"LengtheningTime":0},{"id":2534,"name":"财务与法务负责人1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2535],"LengtheningTime":0},{"id":2535,"name":"程序三部预算1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2536],"LengtheningTime":0},{"id":2536,"name":"肖洲1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2537],"LengtheningTime":0},{"id":2537,"name":"二级部门负责人审批1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2538],"LengtheningTime":0},{"id":2538,"name":"程序副总经理预算1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2539],"LengtheningTime":0},{"id":2539,"name":"程序中心副总经理1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2540],"LengtheningTime":0},{"id":2540,"name":"程序中心总经理1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2541],"LengtheningTime":0},{"id":2541,"name":"发行中心负责人1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2542],"LengtheningTime":0},{"id":2542,"name":"综合业务负责人1","type":"rectangle","click":"alert(1)","apptid":"5a31e50d1c49497fa83580714d750238","children":[2002],"LengtheningTime":0}]// 偏移数值
let offsetNum = {ellipseTop :51,ellipseLeft :40,diamondTop :95,diamondLeft :40,rectangleTop :50,rectangleLeft :40,arrowTop :80,arrowLeft :0,brokenLineTop:135,brokenLineLeft:80
}// 开始创建
function BeginDraw(){CreateNode(data[0],100,100);
}// 循环创建子节点
function CreateChildNode(lastNode,lastTop,lastLeft){// 一个子节点if(lastNode.children.length > 0){CreateVerticalArrow(lastNode,lastTop,lastLeft);}// 多个子节点if(lastNode.children.length > 1){let beginTop = GetOffsetTop(lastNode) / 2 + lastTop - 10;let beginLeft = GetOffsetLeft(lastNode) * 2 + lastLeft + 15;for (let c = 1;c < lastNode.children.length;c++) {CreateBrokenArrow(beginTop,beginLeft,lastNode.children[c]);beginLeft = beginLeft + 140;}}
}// 创建节点
function CreateNode(node,top,left){let div = document.createElement("div");div.className = node.type;div.style.top = top + "px";div.style.left = left + "px";let span = document.createElement("span");span.innerText = node.name;span.className = node.type + "-text";div.appendChild(span);div.onclick = function() {// 使用eval执行方法eval(node.click);};document.body.append(div);CreateChildNode(node,top,left);
}// 创建竖线箭头+节点
function CreateVerticalArrow(lastNode,nodeTop,nodeLeft){// 竖线箭头toplet arrowtop = GetOffsetTop(lastNode) + nodeTop;// 竖线箭头leftlet arrowleft = GetOffsetLeft(lastNode) + nodeLeft;let div = document.createElement("div");div.className = "arrow-down";div.style.top = arrowtop + "px";div.style.left = arrowleft + "px";let span = document.createElement("span");div.appendChild(span);document.body.append(div);for (let key in data) {if(lastNode.children[0] == data[key].id){// 新节点toplet newNodeTop = arrowtop + offsetNum.arrowTop;if(data[key].type == "diamond"){newNodeTop = newNodeTop + 15;}CreateNode(data[key],newNodeTop,nodeLeft);}}
}// 创建折线箭头+节点
function CreateBrokenArrow(arrowTop,arrowLeft,childnum){let div = document.createElement("div");div.className = "arrow-horizontal-down";div.style.top = arrowTop + "px";div.style.left = (arrowLeft - 70) + "px";let ndiv = document.createElement("div");let span = document.createElement("span");div.appendChild(ndiv);div.appendChild(span);document.body.append(div);for (let key in data) {if(childnum == data[key].id){// 新节点toplet newNodeTop = arrowTop + offsetNum.brokenLineTop;// 新节点Leftlet newNodeLeft = arrowLeft + offsetNum.brokenLineLeft - GetOffsetLeft(data[key]);if(data[key].type == "diamond"){newNodeTop = newNodeTop + 15;}CreateNode(data[key],newNodeTop,newNodeLeft);}}
}// 获取Top偏移量
function GetOffsetTop(lastNode){if(lastNode.type == "arrow"){return offsetNum.arrowTop;}else if(lastNode.type == "diamond"){return offsetNum.diamondTop;}else if(lastNode.type == "rectangle"){return offsetNum.rectangleTop;}else if(lastNode.type == "ellipse"){return offsetNum.ellipseTop;}return 100;
}// 获取Left偏移量
function GetOffsetLeft(lastNode){if(lastNode.type == "arrow"){return offsetNum.arrowLeft;}else if(lastNode.type == "diamond"){return offsetNum.diamondLeft;}else if(lastNode.type == "rectangle"){return offsetNum.rectangleLeft;}else if(lastNode.type == "ellipse"){return offsetNum.ellipseLeft;}return 0;
}
动态生成效果
相关文章：
html简易流程图
效果图 使用htmlcssjs，无图片，没用Canvas demo: <!DOCTYPE html> <html> <head><link href"draw.css" rel"stylesheet" /><script src"draw.js" type"text/javascript"></…...
Java 入门
目录 Java简介 Java JDK开发环境配置 第一个Java程序 Java标识符与关键字 Java注释 Java常量 Java变量的定义和使用 Java简介 Java简介： Java是由Sun Microsystems公司于1995年推出的一门面向对象的高级程序设计语言，可以运行于多个平台，其…...
JVM基本结构和垃圾回收机制
一、JVM基本结构 Java虚拟机（JVM, Java Virtual Machine）是Java程序执行的环境，其基本结构可以分为以下几个主要部分： 类加载器子系统（Class Loader Subsystem）： 负责加载Java类文件到内存中。…...
CentOS 7 安装 ntp，自动校准系统时间
1、安装 ntp yum install ntp 安装好后，ntp 会自动注册成为服务，服务名称为 ntpd 2、查看当前 ntpd 服务的状态 systemctl status ntpd 3、启动 ntpd 服务、查看 ntpd 服务的状态 systemctl start ntpdsystemctl status ntpd 4、设置 ntpd 服务开机启…...
Spring Boot 配置文件启动加载顺序
前言 Spring Boot的启动加载顺序是一个涉及多个步骤和组件的过程。Spring Boot通过一系列默认设置简化了应用程序的配置，使得开发者能够快速地搭建和部署应用。为了实现这一目标，Spring Boot采用了一种分层和优先级机制来加载配置文件。 一、Spring Bo…...
webrtc agc2实现原理
WebRTC的AGC2（自适应增益控制器）是一种用于音频处理的算法，可以根据输入信号的强度自动调整增益，使输出信号的音量保持稳定。其详细原理如下： 噪声估计 首先，AGC2需要对输入信号中的噪声进行估计ÿ…...
2024.11.03 周报
一 实时超分音频同步问题: 处理方向： 按照胡学长的办法尝试: 前面处理视频, 将视频中音频提取出来, 将音频每隔 1-2 秒保存为一段 (这样将音频缓存在内存中) , 然后依次播放, 但是音频是44.1KHz采样率，每秒44100次的频率. 每次间隔中程序处理的极短时间…...
Oceanbase学习之一迁移mysql数据到oceanbase
一、数据库环境 #mysql环境 root192.168.150.162 20:28: [(none)]> select version(); ---------- | version() | ---------- | 8.0.26 | ---------- 1 row in set (0.00 sec) root192.168.150.162 20:28: [(none)]> show variables like ‘%char%’; ---…...
Milvus - GPU 索引类型及其应用场景
1. 背景概述 Milvus 是一款高效的矢量数据库管理系统，支持在高并发和高调用场景下加速相似度搜索。Milvus 的 GPU 支持由 NvidiaRAPIDS 团队提供，可以借助各种 GPU 索引类型来优化性能。本篇将重点解析 Milvus 支持的 GPU 索引类型、适用场景及各自的性…...
Webserver(2.8)守护进程
目录 守护进程案例 守护进程案例 每隔2s获取系统时间，将这个时间写入到磁盘文件中 #include<stdio.h> #include<sys/stat.h> #include<sys/types.h> #include<unistd.h> #include<fcntl.h> #include<sys/time.h> #include<…...
HarmonyOS :
HarmonyOS 移动应用开发 什么是HarmonyOS？： 官方解释：HarmonyOS是一款面向万物互联时代的、全新的分布式操作系统。 鸿蒙操作系统在传统的单设备系统能力的基础上，提出了基于同一套系统能力、适配多种终端形态的分布式理念&#…...
C# EF 使用
WPF EF MySQL - - -版本.NET Framework4.7.2EntityFramework6.5.1MySql.Data.EntityFramework9.1.0 创建数据库 ccApp.config <connectionStrings><add name"MyDbContext" providerName"MySql.Data.MySqlClient" connectionString"server…...
简介Voronoi图Voronoi Diagrams
这是计算机的经典算法。 问题引入 倘若一张大白纸上有很多三角点，掉进去一个五星点，问，哪个三角离着五星最近？简单，算距离呗，这个五星到其他所有三角点的距离，找到最小的那个就行。 若掉进去…...
硬件测试工程师之EMC项目-辐射抗扰度试验（RS）测试标准解析思维导图
1：链接上一篇文章 硬件测试工程师之EMC项目-电磁干扰-谐波测试标准解析 2：总结思维导图并进行深入解析EMC-辐射抗扰度测试项目 附上相关报告文档以及图片解析。 3:以下为思维导图大致展示，后续可可方便观看。如有需要也可以下载。 本期先…...
H265编码丢帧问题分析
问题 通过海思芯片编码后，将编码的数据通过UDP网口发送到UDP 服务端，UDP服务端收到后保存成文件。 保存的文件有时候用VLC软件可以打开。有时候不能打开，同时用Elecard HEVC Analyer工具打开，发现VLC不能打开时丢帧。如下图，实际为858帧，而此处只有846帧。 分析 UDP包…...
--常用编辑器)
CentOS Linux教程(12)--常用编辑器
文章目录 1. 背景2. nano编辑器2.1 检查安装2.2 安装nano2.3 使用nano 3. emacs编辑器3.1 检查安装3.2 安装emacs 3.3 使用emacs 1. 背景 我们经常需要编辑文件内容，windows上这个工作可以用记事本来做。 linux上对应的，我们可以使用nano或者emacs编辑…...
【浏览器学习笔记】-- 浏览器检查jQuery是否加载
环境：最近做爬虫实验，需要用到上下文http数据请求，为了能够兼容上下文环境，因此采用就jQuery请求，请求前需要加查是否有JQuery加载成功。 浏览器F12，打开浏览器控制台，复制粘贴以下代码&#x…...
大模型的提示学习
文章目录 人工提示设计自动提示设计经过预训练、指令微调和人类对齐后，我们接下来讨论如何通过提示学习方法来有效地使用大语言模型解决实际任务。目前常用的方法是设计合适的提示（Prompting），通过自然语言接口与大模型进行交互。在现有研究中，任务提示的设计主要依靠人工…...
2-143 基于matlab-GUI的脉冲响应不变法实现音频滤波功能
基于matlab-GUI的脉冲响应不变法实现音频滤波功能，输入加噪信号，通过巴特沃斯模拟滤波器脉冲响应不变法进行降噪。效果较好。程序已调通，可直接运行。 下载源程序请点链接：2-143 基于matlab-GUI的脉冲响应不变法实现音频滤波功能…...
鸿蒙移动应用开发-------前篇
一. 鸿蒙的起源 2012年，华为公司开始规划自己的操作系统，名为’鸿蒙‘。 2018年8月24日，华为公司向国家知识产权商标局申请了’华为鸿蒙‘商标，注册公告日期是2019年5月14日，专用权限期是从2019年5月14日到2029年5月…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外，K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案，全安装在K8S群集中。 具体可参…...
ubuntu搭建nfs服务centos挂载访问
在Ubuntu上设置NFS服务器 在Ubuntu上，你可以使用apt包管理器来安装NFS服务器。打开终端并运行： sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享，例如/shared： sudo mkdir /shared sud…...
23-Oracle 23 ai 区块链表（Blockchain Table）
小伙伴有没有在金融强合规的领域中遇见，必须要保持数据不可变，管理员都无法修改和留痕的要求。比如医疗的电子病历中，影像检查检验结果不可篡改行的，药品追溯过程中数据只可插入无法删除的特性需求；登录日志、修改日志…...
Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）
概述 在 Swift 开发语言中，各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过，在涉及到多个子类派生于基类进行多态模拟的场景下，…...
渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet： https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接：3403. 从盒子中找出字典序最大的字符串 I 代码如下： class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...
JVM 内存结构 详解
内存结构 运行时数据区： Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器： 线程私有，程序控制流的指示器，分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 每个线程都有一个程序计数…...
【笔记】WSL 中 Rust 安装与测试完整记录
#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统：Ubuntu 24.04 LTS (WSL2)架构：x86_64 (GNU/Linux)Rust 版本：rustc 1.87.0 (2025-05-09)Cargo 版本：cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...
AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别
【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而，传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案，能够实现大范围覆盖并远程采集数据。尽管具备这些优势…...