[Javascript] Crear graficas de pie y doughnut con la libreria Chart.js
Las graficas de pie y dona(doughnut) son utiles cuando queremos comprar valores, por ejemplo en encuestas, ventas por almacen, por empleado o cualquier uso que se le quiera dar.
La libreria Chart.js cuenta con la posibilidad de crear este tipo de graficas de pie y dona (doughnut).
Ya hace tiempo les habia explicado como crear graficas de barras y lineas usando chart.js.
Grafica de Pie
Este es el codigo para crear una grafica de Pie, solo falta incluir la libreria chart.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var ctx = document.getElementById("chart1"); | |
| var red = "#f00"; | |
| var orange = "#f50"; | |
| var yellow = "#ff0"; | |
| var green = "#0f0"; | |
| var blue = "#00f"; | |
| var myPieChart = new Chart(ctx,{ | |
| type: 'pie', | |
| data: { | |
| datasets: [{ | |
| data: [ 1,2,3,4,5 ], | |
| backgroundColor: [ red, orange, yellow,green, blue], | |
| label: 'Dataset 1' | |
| }], | |
| labels: [ "Red", "Orange", "Yellow", "Green", "Blue" ] | |
| }, | |
| options: { | |
| responsive: true | |
| } | |
| }); |
En el ejemplo se puede ver que en esta grafica de pie consta de 5 valores y todos deben coincidir.
- data: 1,2,3,4,5
- backgroundColor: red, orange, yellow, green, blue
- labels: Red, Oranje, Yellow, Green, Blue
Es decir el orden en que se encuentran los elementos equivalen a como se mostraran, por ejemplo: valor 1, color red, etiqueta Red.
La diferencia entre la grafica de pie y doughnut es solo el parametro type=’pie’ que para una grafica de dona se cambia por type=’doughnut’.
Multiples Datasets
Una caracteristica especial de las graficas con Chart.js es que se pueden agregar multiples datasets y hacer graficas muy visuales.
Y aqui el codigo:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var ctx = document.getElementById("chart1"); | |
| var red = "#f00"; | |
| var orange = "#f50"; | |
| var yellow = "#ff0"; | |
| var green = "#0f0"; | |
| var blue = "#00f"; | |
| var myPieChart = new Chart(ctx,{ | |
| type: 'pie', | |
| data: { | |
| datasets: [{ | |
| data: [ 1,2,3,4,5 ], | |
| backgroundColor: [ red, orange, yellow,green, blue], | |
| label: 'Dataset 1' | |
| }, | |
| { | |
| data: [ 2,6,9,3,1 ], | |
| backgroundColor: [ red, orange, yellow,green, blue], | |
| label: 'Dataset 2' | |
| } | |
| ], | |
| labels: [ "Red", "Orange", "Yellow", "Green", "Blue" ] | |
| }, | |
| options: { | |
| responsive: true | |
| } | |
| }); |
Descargar
Descarga los archivos de ejemplo completos grafica de pie, grafica de pie con multiple dataset, grafica de doughnut y grafica de doughnut con multiple data set.
[sociallocker]Link de descarga: http://atomcurve.com/11227357/chartjs2-pie
Despues de hacer click, esperar unos segundos y despues hacer click en “saltar publicidad” arriba a la derecha y despues descargara.
[/sociallocker]Conclusion
Como pueden ver crear graficas usando Chart.js es muy facil y practico, ustedes pueden hacer sus propias pruebas, incluirlo en sus sistemas y demas.
Les invito a que se suscriban al blog para que reciban un email cada vez que publique nuevos articulos.
Tambien les invito a que apoyen mi trabajo enviando una donacion voluntaria ya que esto me ayuda a crear contenido nuevo dia con dia.