Comparación de datos de tabla de dos columnas mediante JavaScript y CSS3

Vista prévia

Descripción

Un JavaScript & componente basado en CSS3 que convierte una tabla en un gráfico de barras de t WO-Column animado para la comparación de datos.

Funcionamiento

Cree una tabla de datos normal como sigue.

<table>

<tr>


<th></th>


<th>2014</th>


<th>2015</th>

</tr>

<tr>


<td>Value A</td>


<td>2</td>


<td>8</td>

</tr>

<tr>


<td>Value B</td>


<td>3</td>


<td>9</td>

</tr>

<tr>


<td>Value C</td>


<td>7</td>


<td>11</td>

</tr>

<tr>


<td>Value D</td>


<td>10</td>


<td>9</td>

</tr>

<tr>


<td>Value E</td>


<td>9</td>


<td>10</td>

</tr>

<tr>


<td>Value F</td>


<td>11</td>


<td>10</td>

</tr>

<tr>


<td>Value G</td>


<td>15</td>


<td>9</td>

</tr>

<tr>


<td>Value H</td>


<td>18</td>


<td>10</td>

</tr>

<tr>


<td>Value I</td>


<td>17</td>


<td>11</td>

</tr>

<tr>


<td>Value J</td>


<td>20</td>


<td>12</td>

</tr>
</table>

Los estilos CSS/CSS3 requeridos para la comparación de datos de tabla.

table {

width: 100%;

background: #eee;

padding: 1em;

margin: 1em auto;

box-sizing: border-box;

border: 1px solid #ccc;
}

th { font-size: 1.2em }

td {

font-weight: bold;

border-bottom: 1px solid #fbfbfb;

width: 20%;

padding: .5em .25em;

background-size: 0% 100%;

background-repeat: no-repeat;

-webkit-transition: all .75s ease-out;

-moz-transition: all .75s ease-out;

transition: all .75s ease-out;
}

td:nth-child(2) {

width: 40%;

color: white;

text-shadow: 1px 2px #222;

text-align: right;

background-image: -webkit-linear-gradient(to left, #e74c3c, #e74c3c);

background-image: -moz-linear-gradient(to left, #e74c3c, #e74c3c);

background-image: linear-gradient(to left, #e74c3c, #e74c3c);

background-position: right top;
}

td:nth-child(3) {

width: 40%;

color: white;

text-shadow: 1px 2px #222;

background-image: -webkit-linear-gradient(right, #3498db, #3498db);

background-image: -moz-linear-gradient(right, #3498db, #3498db);

background-image: linear-gradient(right, #3498db, #3498db);

background-position: left top;
}

Agregue el siguiente fragmento de código JavaScript en el documento.

var twoColComp = {

init: function (){


var tables = document.getElementsByTagName('table');



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



if (new RegExp('(^| )two-column-comp( |$)', 'gi').test(tables[i].className)){




 return;



}




var h = tables[i].clientHeight,





 t = tables[i].getBoundingClientRect().top,





wT = window.pageYOffset || document.documentElement.scrollTop,





wH = window.innerHeight;




if(wT + wH > t + h/2){




 this.make(tables[i]);



 }


}

},



make : function(el){


var rows = el.getElementsByTagName('tr'),




vals = [],




max,




percent;



for(var x = 0; x < rows.length; x++) {



var cells = rows[x].getElementsByTagName('td');



for(var y = 1; y < cells.length; y++){




vals.push(parseInt(cells[y].innerHTML, 10));



}


}



max = Math.max.apply( Math, vals );


percent = 100/max;



for(x = 0; x < rows.length; x++) {



var cells = rows[x].getElementsByTagName('td');



for(var y = 1; y < cells.length; y++){




var currNum = parseInt(cells[y].innerHTML, 10);




cells[y].style.backgroundSize = percent * currNum + "% 100%";




cells[y].style.transitionDelay = x/20 + "s";



}


 }



el.className =+ " two-column-comp"

}
}

window.onload = function(){

twoColComp.init();
}

window.onscroll = function(){

twoColComp.init();
}