前端网页标签百分比定位问题,利用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个回答

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问