동적 막대그래프

<style>

.g_width, .g_height {width: 100%;}

.g_width td:first-child { width: 10%}

.g_width div { background-color: blue; height: 20px}

.g_height tr:first-child td {height: 300px; vertical-align: bottom}

.g_height div { background-color: blue; width: 20px}

</style>

<table id="graph1" class="g_width">

 <tr><td>국어</td><td></td></tr>

 <tr><td>영어</td><td></td></tr>

 <tr><td>수학</td><td></td></tr>

</table>

<table id="graph2" class="g_height">

 <tr><td></td><td></td><td></td></tr>

 <tr><td>국어</td><td>영어</td><td>수학</td></tr>

</table>

<script>

function Graph(label) {

this.obj = document.getElementById(label);

this.begin = []; this.end = []; this.div = []; this.vertexes = [];

}

Graph.prototype.display = function(i, way) {

var _this = this, timer= []; 

timer[i] = setInterval(function () { 

if (_this.begin[i] >= _this.end[i]) clearInterval(timer[i]);

if (way == 'w')  

_this.div[i].style.width = _this.begin[i] + '%'; 

else

_this.div[i].style.height = _this.begin[i] + '%'; 

_this.begin[i] +=1;  

}, 30);

};

Graph.prototype.draw = function(way) {

way == 'w' ? this.width() :this.height();

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

this.begin[i] = 1;

this.end[i] = this.vertexes[i];

this.display(i, way); 

}

}

Graph.prototype.width = function() {

for (var i=0; i<this.obj.rows.length; i++) {

var cell = this.obj.rows[i].cells[1];

this.div[i] = document.createElement('div');

cell.appendChild(this.div[i]); 

}

}

Graph.prototype.height = function(l) {

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

var cell = this.obj.rows[0].cells[i];

this.div[i] = document.createElement('div');

cell.appendChild(this.div[i]);

}

}

var graph1 = new Graph('graph1');

graph1.vertexes = [10, 90, 40];

graph1.draw('w');

var graph2= new Graph('graph2');

graph2.vertexes = [50, 20, 80];

graph2.draw('h');

</script>