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月…...
: K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？)
云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？
大家好，欢迎来到《云原生核心技术》系列的第七篇！ 在上一篇，我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在，我们就像一个拥有了一块崭新数字土地的农场主，是时…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动（如演唱会、马拉松赛事、高考中考等）期间，城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例，暖城商圈曾因观众集中离场导致周边…...
【论文笔记】若干矿井粉尘检测算法概述
总的来说，传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度，通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...
华为OD机试-食堂供餐-二分法
import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...
10-Oracle 23 ai Vector Search 概述和参数
一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI，使用客户端或是内部自己搭建集成大模型的终端，加速与大型语言模型（LLM）的结合，同时使用检索增强生成（Retrieval Augmented Generation &#…...
深度学习水论文：mamba＋图像增强
🧀当前视觉领域对高效长序列建模需求激增，对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模，以及动态计算优势，在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内，就有不…...
现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？
现有的 Redis 分布式锁库（如 Redisson）相比于开发者自己基于 Redis 命令（如 SETNX, EXPIRE, DEL）手动实现分布式锁，提供了巨大的便利性和健壮性。主要体现在以下几个方面： 原子性保证 (Atomicity)ÿ…...
rm视觉学习1-自瞄部分
首先先感谢中南大学的开源，提供了很全面的思路，减少了很多基础性的开发研究 我看的阅读的是中南大学FYT战队开源视觉代码 链接：https://github.com/CSU-FYT-Vision/FYT2024_vision.git 1.框架： 代码框架结构：readme有…...
接口 RESTful 中的超媒体：REST 架构的灵魂驱动
在 RESTful 架构中，** 超媒体（Hypermedia）** 是一个核心概念，它体现了 REST 的 “表述性状态转移（Representational State Transfer）” 的本质，也是区分 “真 RESTful API” 与 “伪 RESTful AP…...
基于谷歌ADK的 智能产品推荐系统(2): 模块功能详解
在我的上一篇博客：基于谷歌ADK的 智能产品推荐系统(1): 功能简介-CSDN博客 中我们介绍了个性化购物 Agent 项目，该项目展示了一个强大的框架，旨在模拟和实现在线购物环境中的智能导购。它不仅仅是一个简单的聊天机器人，更是一个集…...