인터넷정보

막대 그래프 동적으로 보여주기

알 수 없는 사용자 2007. 10. 18. 14:16
사용자 삽입 이미지

http://oxtag.com/html/ex/graph20041126.html



bar1.png 는 업로드 파일 다운받으세요.
그림파일의 width 속성을 실시간으로 변경하기

<table width=700>
<tr>
<td colspan=2>왕초보 홈페이지만들기 클럽 인기투표</td>
</tr>
<tr>
<td width=100>아마데우스</td><td width=600><img src=http://oxtag.com/zboard/data/js/bar1.png id=chart0 width=1 height=11>130표</td>
</tr>
<tr>
<td>순아순아</td><td><img src=http://oxtag.com/zboard/data/js/bar1.png id=chart1 width=1 height=11>272표</td>
</tr>
<tr>
<td>toto</td><td><img src=http://oxtag.com/zboard/data/js/bar1.png id=chart2 width=1 height=11>99표</td>
</tr>
</table>


<script language=javascript>
var data=new Array(130,272,99);
for(i=0;i<3;i++){
if(eval("chart" + i + ".width") < data[i]){
gph("chart" + i,data[i]);
}
}
function gph(what,limit){
if(eval(what + ".width") < limit){
if(eval(what + ".width")+5 > limit)
eval(what +".width=" + limit);
else
eval(what +".width=" + what + ".width + 5");
setTimeout("gph('"+ what + "'," + limit + ")",50);
}
}
</script>
반응형