<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> obxGetColor, obxStickGraph</title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" />
<script>
IE=(window.showModalDialog) ? true : false;
function obxGetColor(color,gap) {
var rtn='',col,tmp;
for(var x=0;x <6; x+=2) {
col=parseInt(color.substr(x,2),16)+gap;
if (col > 255) col = 255;
else if (col < 0) col=0;
if(col < 10) rtn+='0'+col.toString(16);
else rtn+=col.toString(16);
}
return rtn;
}
function obxStickGraph(dsize) {
this.step=3;
this.speed=10;
this.total=0;
this.max=0;
this.dsize=dsize;
this.statictext=false;
this.item= new Object();
this.add = function (id,size,color,text) {
this.total += size;
this.max=Math.max(this.max,size);
this.item[id]= {'size' : size, 'color' : color.replace('#',''), 'text' : text}
}
this.draw = function (id,action) {
var dColor=obxGetColor(this.item[id].color,-20);
document.write("<div></div>");
//this.item[id].div=document.body.appendChild(document.createElement('div'));
var divs=document.getElementsByTagName('div');
this.item[id].div=divs[divs.length-1];
this.item[id].div.style.borderLeft="1px solid #"+dColor;
this.item[id].div.style.overflow="hidden";
this.item[id].div.style.height="11px";
if(!action) this.actDraw(id);
else this.actDraw(id,5);
}
this.getCss= function(width,height,color,bwidth,bcolor) {
if(width<1)width=1;
return "overflow:hidden;width:"+width+";height:"+height+";background-color:"+color+";border-right:"+bwidth+"px #"+bcolor+" solid";
}
this.actDraw= function(id,limit) {
var pp = this.item[id].size / this.total;
var sizep = this.item[id].size / this.max;
if(!limit) var size=this.dsize * sizep;
else size=limit;
var hit = Math.round(this.max/this.dsize*size);
var percent =(Math.round(this.max/this.dsize*size)/this.total*100).toString().match(/[0-9]*(?:\.[0-9][0-9])?/);
var text = (this.item[id].text) ? this.item[id].text.replace('#',hit).replace('$',percent) : percent + " %"
var Color=this.item[id].color;
var hColor=obxGetColor(Color,20);
var hhColor=obxGetColor(Color,30);
var dColor=obxGetColor(this.item[id].color,-20);
var add='',d;
if(IE || opera) d=new Array(3,2,1);
else d=new Array(3,4,5);
this.item[id].div.innerHTML= ''
+'<div style="'+this.getCss(size-d[0],1,hColor,1,hhColor)+'"></div>'
+'<div style="'+this.getCss(size-d[1],2,hColor,3,hhColor)+'"></div>'
+'<div style="'+this.getCss(size-d[2],2,hColor,5,hhColor)+'"></div>'
+'<div style="'+this.getCss(size-d[2],1,hhColor,5,hhColor)+'"></div>'
+'<div style="'+this.getCss(size-d[2],2,Color,5,hhColor)+'"></div>'
+'<div style="'+this.getCss(size-d[1],2,Color,3,hhColor)+'"></div>'
+'<div style="'+this.getCss(size-d[0],1,dColor,1,hhColor)+'"></div>'
+'<span style="position:relative;top:'+(-11-IE)+'px;left:'+(((this.statictext)?this.dsize*sizep:size)+5)+'px;font:7pt verdana">'+text+'</span>'
if(limit)
if(this.dsize * sizep > limit) {
obxStickGraphRunObject=this;
setTimeout('obxStickGraphRunObject.actDraw("'+id+'",'+(limit+this.step)+');',this.speed);
}else{
setTimeout('obxStickGraphRunObject.actDraw("'+id+'");',this.speed);
}
}
}
grp=new obxStickGraph(200) ;
grp.add('id1',100,'F8CF7B');
grp.add('id2',200,'#D1D3D3');
grp.add('id3',500,'FDB480','# hit ($ %)');
grp.add('id4',300,'3399ff','# hit');
</script>
<style>
td {font: 11px gulim}
</style>
</head>
<body>
<table>
<tr>
<td>
항목 1
</td>
<td width="300">
<script>grp.draw('id1',true);</script>
</td>
<td>
동적 드로우, 기본출력
</td>
</tr>
<tr>
<td>
항목 2
</td>
<td>
<script>grp.draw('id2');</script>
</td>
<td>
정적 드로우, 기본출력
</td>
</tr>
<tr>
<td>
항목 3
</td>
<td>
<script>grp.draw('id3',true);</script>
</td>
<td>
동적 드로우, "# hit" 출력
</td>
</tr>
<tr>
<td>
항목 4
</td>
<td>
<script>grp.draw('id4');</script>
</td>
<td>
정적 드로우, "# hit" 출력
</td>
</tr>
</table>
<xmp>
생성 :
<script>
grp=new obxStickGraph(200) ;
//젤 긴게 200px 만하게 grp란걸 만든다 (그래프 길이"만" 입니다, 글자 때문에 더 깁니다.)
grp.add('id1',100,'F8CF7B');
//그 grp로 명령을 내립니다.
// "id1" 아이디로 100이란 값을 넣어준다 이때 색은 F8CF7B로
//색은 조금 어두운 부분(그래프 밑부분)색입니다
grp.add('id2',200,'#D1D3D3');
grp.add('id3',500,'FDB480','# hit ($ %)');
// 4번째 인자는 출력 문잡니다. #은 값으로 $는 퍼센트값으로 바뀝니다
grp.add('id4',300,'3399ff','# hit');
</script>
출력 :
<script>
grp.draw('id1',true);
//아이디에 해당되는 그래프를 출력합니다,
//이때 두번째 인자는 옵션이고 true로 해주면 동적으로 그립니다.(비추-_-;)
</script>
동적옵션코드 :
<script>
grp.step = 3;
grp.speed = 10;
//그려주기(grp.draw()) 전에 이런 코드를 넣어주셔도 됩니다.
//동적으로 그릴때 쓰는 옵션인데
//스텝은 한번에 늘어나는 길이(픽셀)고, 스피드는 한번 돌아가는;; 속도입니다. 적을수록 빠르고 0이 최소값입니다.
+yser님의 조언
grp.statictext=true
//텍스트 표시를 정적으로 합니다.
</script>
</xmp>
</body>
</html>
