ホームページ > 記事 > ウェブフロントエンド > CSSで樹形図を描くことはできるのでしょうか？ _html/css_WEB-ITnose
CSSで樹形図を描くことはできるのでしょうか？ _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:12:452164ブラウズ
如题,效果如下
回复讨论(解决方案)
找美工做图片吧
要么做图片，打热点
可以 canvas，flash VML 来做， js动态生成很多点来画线，效率低。
写了个js生成点 画直线的，楼主参考下
<!DOCTYPE HTML><html> <head> <meta charset="gb2312" /> <title></title> <style> .point { position:absolute; width:1px; height:1px; overflow:hidden; background:#000; } .col { position:absolute; left:300px; top:100px; font-size:20px; font-weight:bold; text-align:center; } .right { left:500px; } p { width:20px; border:1px solid red; } </style> </head> <body> <div class="col"> <p>a</p> <p>c</p> <p>b</p> </div> <div class="col right"> <p>B</p> <p>A</p> <p>C</p> </div> <script> var x = []; var y = []; document.onclick = function(e){ e = window.event || e; var tx = e.clientX; var ty = e.clientY; x.push(tx); y.push(ty); //console.log( x ); //console.log( y ); if( x.length == 2 && y.length == 2 ){ createLine(x[0], y[0], x[1], y[1]); x.length = 0; y.length = 0; } } function point(x, y){ var div = document.createElement('div'); div.style.left = x + 'px'; div.style.top = y + 'px'; div.className = 'point'; document.body.appendChild(div); } function createLine(x1,y1,x2,y2){ var tmp, x, y; if(x1 >= x2){ tmp = x1; x1 = x2; x2 = tmp; tmp = y1; y1 = y2; y2 = tmp; } for(var i = x1 ; i < x2; i++){ x = i; y = (y2 - y1)/(x2 - x1)*(x - x1)+y1; point(x,y); } } </script> </body></html> ?????,?主?考下:
?用鼠???名?展??????
b585974ae3b7dba3039af53a9593f9c4
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
b064ea1963483f6bff4d1dc648487091
b2386ffb911b14667cb8f0f91ea547a7Organization6e916e0f7d1e588d4f442bf645aedb2f
46d5fe1c7617e3914f214aaf043f4ccf
b203858bb33aa17060946094c228aab9
531ac245ce3e4fe3d50054a55f265927
c105f1604655c18ada9eb5f1299942d5
function bluring(){
if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus();
}
document.onfocusin=bluring;
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
7f0004267241d69d19b8fda47911f741
d0dc54adf72cb57ad82e2ab830ac4473
25edfb22a4f469ecb59f1190150159c68d767d7c97b14deac8f24675aebeb6fb4a9ac43c101f1ef91adebc0611c53fc2董事长5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68
d9c350dc226604ee38a9229e465fccc1
25edfb22a4f469ecb59f1190150159c6c394056b6321f727a863e85c2f458fa1aac9746a0c62bd59fd00c92c888c2196总经理5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68
3f3e05f16067e5705de6e1353c8d92f2
25edfb22a4f469ecb59f1190150159c67e420f479f493c3df7c4bbaabca9f1fdbf105d2543d3b6e2565ed52cc2866d3d主任5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c67d8c4cd9048dd36c54f28a3cdf8ba641f4ed449d2ed1daccd31cc15cb21911a2科 9548b16d0a9bf5170b307812338ac848
25edfb22a4f469ecb59f1190150159c64ea8b8d5627170f25bd1c4e0b99e4d73280d6902e63098d8a3494133dffa0b82一组5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c68d56416dad0bdffc502335c8e9b647a0280d6902e63098d8a3494133dffa0b82二组5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c67d8c4cd9048dd36c54f28a3cdf8ba6413242981a4879854f3db4e4499a34bd3a布兰妮8bd09887036444a8f0b595237491ccda
25edfb22a4f469ecb59f1190150159c64ea8b8d5627170f25bd1c4e0b99e4d73280d6902e63098d8a3494133dffa0b82A组5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c67d8c4cd9048dd36c54f28a3cdf8ba641b959a54fe67d6323cd8a0a462d1eef0dB组0468589710c60a96e6cf456cf4fedd2616b28748ea4df4d9c2150843fecfba68
1a06fd96770b8a8f5d16320da0f5eeae
25edfb22a4f469ecb59f1190150159c64ea8b8d5627170f25bd1c4e0b99e4d73280d6902e63098d8a3494133dffa0b82A组5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c67d8c4cd9048dd36c54f28a3cdf8ba641280d6902e63098d8a3494133dffa0b82B组5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c68d56416dad0bdffc502335c8e9b647a0280d6902e63098d8a3494133dffa0b82C组5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c68d56416dad0bdffc502335c8e9b647a0280d6902e63098d8a3494133dffa0b82C组5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c68d56416dad0bdffc502335c8e9b647a0280d6902e63098d8a3494133dffa0b82强仁5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c68d56416dad0bdffc502335c8e9b647a0280d6902e63098d8a3494133dffa0b82经理5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e