웹마당넷 |[GRAPH] 동적 막대그래프

Javascript Example

제 목

[GRAPH] 동적 막대그래프

작성자

운영자

등록일

200809230110446

조회수

29,474

동적 막대그래프 자바스크립트 소스입니다.

obxGetColor, obxStickGraph

항목 1		동적 드로우, 기본출력
항목 2		정적 드로우, 기본출력
항목 3		동적 드로우, "# hit" 출력
항목 4		정적 드로우, "# hit" 출력
항목 5		정적 드로우, "# hit" 출력

생성 : <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> 출처 : http://www.muhwa.com/!/sample/obxstickgraph/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> obxGetColor, obxStickGraph</title>
 <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) 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(300) ;
 grp.add('id1',100,'F8CF7B');
 grp.add('id2',200,'#D1D3D3');
 grp.add('id3',500,'FDB480','# hit ($ %)');
 grp.add('id4',300,'3399ff','# hit');
 grp.add('id5',300,'3399ff','# 개 ($ %)');
 </script>
 <style>
  td {font: 11px gulim}
 </style>
</head>
 

<body>
<table>
<tr>
 <td>
  항목 1 
 </td>
 <td width="500">
  <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>
<tr>
 <td>
  항목 5  
 </td>
 <td>
  <script>grp.draw('id5', true);</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>

출처 : http://www.muhwa.com/!/sample/obxstickgraph/