En programacion.net os hemos hablado en muchas ocasiones sobre librerías para crear gráficos de todo tipo, pero en este artículo os hablaremos de la más popular de todas: Chart.js. Y es que esta librería de Javascript es muy fácil de utilizar, y por eso suele ser la opción predilecta para muchos desarrolladores. Pero entrando en materia, ¿para qué sirven esta clase de librerías? Las librerías de gráficos, como su propio nombre indica, generan distintos tipos de gráficos para representar datos en base a una información dada, ya sea en forma de fichero externo, o en forma de query. Esto es increíblemente útil sobre todo en backoffices y en zonas privadas donde se hace un tratamiento de los datos más exigentes. En dichos entornos se suelen mostrar los datos de manera más gráfica a los usuarios para que sean más entendibles.
Así pues, vamos a ver cómo crear gráficos de todo tipo mediante Javascript con la librería Chart.js.
Instalación
Lo primero que tienes que hacer es descargarte la librería a través de su GitHub o bien llamarla vía CDN. Una vez incluída la librería, podemos comenzar con el código.
Uso
Para utilizar Chart.js tenemos que declarar un elemento canvas donde se representará el gráfico a mostrar. Así que, lo declararemos tal que así:
<canvas id="myChart" width="500" height="500"></canvas>
Como veis, nuestro canvas tendrá una dimensión de 500 píxeles de ancho por 500 píxeles de alto.
Ahora vamos a convertir nuestro canvas en un gráfico hecho y derecho. Para ello, abrimos un script y declaramos:
var ctx = document.getElementById('myChart').getContext('2d');
Con esto referenciamos nuestro canvas en la variable ctx, la cual, tendremos que pasar como parámetro en la declaración del objeto Chart.
La clase Chart cuenta con muchas propiedades. Entre otras:
- type: Para el tipo de gráfico que queremos mostrar
- datasets: Información a mostrar en el gráfico
- label: Nombre del gráfico
- data: Datos a representar.
- backgroundColor: Color de fondo de cada uno de los datos a representar, en el mismo orden.
- borderColor: Color del borde de cada uno de los datos a representar, en el mismo orden.
- borderWidth: Ancho del borde de cada uno de los datos a representar.
Una vez visto todo esto, este sería el código para mostrar un gráfico de barras:
type: 'bar',
data: {
labels: ['Iron Man', 'Capitan America', 'Hulk', 'Thor', 'Viuda Negra', 'Ojo de Halcon'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
Si quieres mostrar un gráfico de líneas, el valor del tipo tendría que ser 'line', y si por el contrario quieres un gráfico de sectores o tarta, debes utilizar el valor 'pie'.
En resumen, el código necesario para mostrar un gráfico de barras con Chart.js sería tal que así:
<canvas id="myChart" width="500" height="500"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Iron Man', 'Capitan America', 'Hulk', 'Thor', 'Viuda Negra', 'Ojo de Halcon'],
datasets: [{
label: '# de votos',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
Y hasta aquí nuestro artículo sobre Chart.js, sin duda alguna una de las librerías JS de gráficos más popular entre la comunidad de desarrolladores. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. ¡Nos leemos!