html实现原理和流程图，原⽣js+div+css，动态画结构图流程图前⾯⽤highchart尝试画了⼀次，但是因为种种因素，还是⽤js+div+css实现起来⽐较⽅便。
代码如下，可直接复制粘贴。
html部分：
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
动态绘制结构图
* {
margin: 0;
padding: 0;
}
< {
height: 40px;
border-radius: 10px;
background: pink;
text-align: center;
padding: 5px;
margin: 5px 5px;
}
<:hover {
cursor: pointer;
}
< p {
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
div.flex {
display: flex;
justify-content: center;
flex-wrap: wrap
}
div.flex > div {
width: 25%;
}
div.arrow {
margin: 0 10px 0;
}
div.arrow-body {
width: 20px;
height: 50px;
background: #ccc;
margin: 0 auto;
}
div.arrow-footer {
width: 0;
height: 0;
border-width: 30px 30px 0;
border-style: solid;
border-color: #ccc transparent transparent; /*灰 透明 透明 */ margin: 0 auto;
}
#container {
width: 650px;
/
*height: 450px;*/
margin: 50px auto;
/*padding-top: 10px;*/
/*padding-right: 10px;*/
/*overflow-y: auto*/
}
js部分：
let data = {
root: [
{title: '根节点1', color: 'red'},
{title: '根节点2', color: 'yellow'},
{title: '根节点3', color: 'skyblue'},
child: [
{title: '节点', color: '#cca057'}
],
child2: [
{title: '⼦节点1'},
{title: '⼦节点2阿诗阿范德萨⼠⼤夫⼠⼤夫实打实地⽅的所得税法的萨芬撒地⽅丹顿'}, {title: '⼦节点3⼦节点3⼦节点3⼦节点3'},
{title: '⼦节点4'},
{title: '⼦节点5'},
{title: '⼦节点6'},
{title: '⼦节点7'},
{title: '⼦节点8'}
]
};
let pic = {
load(domName, datas) {
let num = Object.keys(datas).length;
Object.keys(datas).forEach((i, j) => {
<('container', datas[i], (j + 1) === num);
});
this.bindEvents()
},
rect(domName, data, isEnd) {
let div = ateElement("div");
div.classList.add("flex");
for (let i in data) {
div.innerHTML += '
\n' +
'
\n' +
'
' + data[i].title + '
\n' +
'
'
';
}
if (!isEnd) {
let arrow = ateElement("div");
arrow.classList.add("arrow");
arrow.innerHTML +=
'
'
},
bindEvents() {
let rect = ElementsByClassName('rect');
for (let i = 0, rule; rule = rect[i++];) {
rule.addEventListener('click', () => {
let title = Attribute('data');
alert(title);
});
}
}
};
pic.load('container', data);
};
效果图：
总结：
想⽐highchart⾃由绘图，该种⽅案最省时省⼒省⼼。
原生js和js的区别

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。