a675576674 2016-10-11 11:26 采纳率: 0%
浏览 1042

前端网页标签百分比定位问题，利用table和img标签制作一个平面直角坐标系图形。

前端网页标签百分比定位问题，利用table和img标签制作一个平面直角坐标系图形。img当箭头，table制作直角坐标系的骨架。采用百分比布局，但是一缩放img位置就乱了

<!doctype html>

Insert title here

function test(option){

var createElement = function(tag,parentTag){

if(tag!=null&tag.length!=0){

var element = document.createElement(tag);

if(parentTag!=null){

parentTag.appendChild(element);

}

return element;

}else{

return null;

}

};

var title = createElement('div',option.container);

var img1 = createElement('img',option.container);

var img2 = createElement('img',option.container);

title.style.textAlign="left";

title.style.marginBottom="28px";

var root = createElement('div',option.container);

root.style.marginTop="0px";

option.container.style.height="450px";

option.container.style.width="764px";

option.container.style.margin="auto";

title.innerHTML="图表名称:"+option.title;

var table = createElement('table',root);

table.style.width="99%";

var tbody = createElement('tbody',table);

table.style.borderCollapse='collapse';

var tds = new Array();

for(var trNum=0;trNum<3;trNum++){

var tr = createElement('tr',tbody);

for(var tdNum=0;tdNum<3;tdNum++){

var td = createElement('td',tr);

tds[tds.length] = td;

}

}

var divs = new Array();

for(var divNum=0;divNum<4;divNum++){

var div = createElement('div');

divs[divs.length] = div;

div.style.border="1px solid black";

div.style.backgrounDcolor="green";

div.style.textAlign="center";

div.style.width="80%";

div.style.height="146px";

div.style.marginLeft="31px";

div.style.lineHeight="4";

div.style.marginBottom="30px";

}

tds[0].style.paddingRight="30px";

tds[0].style.textAlign="right";

tds[0].style.borderRight="5px solid #84C0F2";

tds[0].style.width="20%";

tds[0].innerHTML="
"+option.legend[0]+"
";

var asd = document.getElementById("#asd");

tds[1].appendChild(divs[0]);

tds[1].style.width="40%";

tds[2].appendChild(divs[1]);

tds[2].style.width="40%";

tds[3].style.paddingRight="30px";

tds[3].style.textAlign="right";

tds[3].style.borderRight="5px solid #84C0F2";

tds[3].innerHTML=option.legend[1];

tds[4].appendChild(divs[2]);

tds[5].appendChild(divs[3]);

tds[8].style.overflow="hidden";

for(var td2Num=0;td2Num<2;td2Num++){

tds[td2Num+7].style.borderTop="5px solid #84C0F2";

tds[td2Num+7].style.textAlign="center";

tds[td2Num+7].style.height="68px";

tds[td2Num+7].innerHTML=option.legend[2+td2Num];

}

for(var i=0;i<divs.length;i++){

divs[i].innerHTML=option.legend[i+4]+"
"+option.data[i]+"家";

divs[i].style.backgroundColor=option.color[i];

}

root.style.overflow="hidden";

img1.src = "123.png";

img2.src = "123.png";

img1.style.position="relative";

img1.style.marginLeft="97.6%";

img1.style.marginBottom="-51%";

img1.style.height="20px";

img1.style.width="20px";

img2.style.position="relative";

img2.style.marginLeft="18.7%";

img2.style.marginBottom="-1%";

img2.style.height="20px";

img2.style.width="20px";

}

container = document.getElementById("box");

var option = {

title:"四象线图",

container:container,

legend:['高价值','低价值','低频率','高频率','体验用户','优质用户','流逝用户','潜力用户'],

data:['112','78','44','220'],

color:['#FAEBD7','#FF3333','#DDDDDD','#87CEEB']

};

test(option);

  • 写回答

1条回答 默认 最新

  • devmiao 2016-10-11 11:43
    关注

    http://blog.csdn.net/zhongguohaoshaonian/article/details/52351795

    评论

报告相同问题？

悬赏问题

  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器