Gráficos circulares (1)
Las estadísticas son importantes. Los gráficos circulares, también llamados gráficos de tarta ( pie charts ),
son recursos estadísticos que se utilizan para representar porcentajes y proporciones.
A continuación vamos a dibujar un gráfico circular que muestra las tendencias en el uso de los principales navegadores.
Empezamos con modestia, haciendo algo muy sencillo, que ampliaremos y mejoraremos hasta conseguir un gráfico expresivo, que podrá ser reutilizado con otros datos.
El HTML
Estadísticas de uso de navegadores
( para el mes de enero del año 2014 )
El JavaScript
En el JavaScript mpezamos declarando un objeto oData
y algunas propiedades de este: los nombres de los principales navegadores
y el porcentaje de usuarios que utilizan cada navegador.
var oData = { 'IE': '10.2', 'Firefox': '26.9', 'Chrome': '55.7', 'Safari': '3.9', 'Opera': '1.8' };
También declaramos otro objeto oColores
, donde el nombre del navegador va asociado al color que le representa.
var oColores = { 'IE': '#6495ED', 'Firefox': '#FF8C00', 'Chrome': '#FFD700', 'Safari': '#32CD32', 'Opera': '#DC143C', 'otros': '#ddd' };
En el centro del <canvas>
( X,Y
) dibujamos un círculo con el radio r = 100
y un color de relleno fillStyle ="#ddd"
.
Este círculo representa la base del gráfico que vamos a dibujar.
// el radio del gráfico; var r = 100; // las coordenadas del centro del canvas var X = canvas.width / 2 var Y = canvas.height / 2; // dibuja un circulo gris en el centro del canvas ctx.fillStyle = '#ddd'; ctx.moveTo(X, Y); ctx.arc(X, Y, r, 0, 2 * Math.PI); ctx.fill();
Encima dibujamos un sector circular, equivalente al porcentaje de usuarios que utilizaban Internet Explorer en el mes de enero del 2014.
var ap = 0; var af = (2 * Math.PI / 100) * oData.IE; var Xap = X + r * Math.cos(ap); var Yap = Y + r * Math.sin(ap); ctx.beginPath(); ctx.fillStyle = oColores.IE; ctx.moveTo(X, Y); ctx.lineTo(Xap, Yap); ctx.arc(X, Y, r, ap, af); ctx.closePath(); ctx.fill(); } }
El ángulo de partida del sector circular ap = 0
y el ángulo final af = (2*Math.PI/100)*oData.IE
donde (2*Math.PI/100)
representa el 1% de la circunferencia, y oData.IE
corresponde a la propiedad IE
del objeto oData
. En este caso oData.IE = 10.2
Xap
e Yap
son las coordinadas en la circunferencia donde empieza el sector circular, y el color de relleno de este fillStyle = oColores.IE
.
Recuerde como dibujar un sector circular en el canvas
var canvas = document.getElementById('lienzo');
if (canvas && canvas.getContext) {
var ctx = canvas.getContext('2d');
if (ctx) {
var oData = {
'IE': '10.2',
'Firefox': '26.9',
'Chrome': '55.7',
'Safari': '3.9',
'Opera': '1.8'
};
var oColores = {
'IE': '#6495ED',
'Firefox': '#FF8C00',
'Chrome': '#FFD700',
'Safari': '#32CD32',
'Opera': '#DC143C',
'otros': '#ddd'
};
// el radio del gráfico;
var r = 100;
// las coordenadas del centro del canvas
var X = canvas.width / 2
var Y = canvas.height / 2;
// dibuja un circulo gris en el centro del canvas
ctx.fillStyle = '#ddd';
ctx.moveTo(X, Y);
ctx.arc(X, Y, r, 0, 2 * Math.PI);
ctx.fill();
// dibuja un sector circular
var ap = 0;
var af = (2 * Math.PI / 100) * oData.IE;
var Xap = X + r * Math.cos(ap);
var Yap = Y + r * Math.sin(ap);
ctx.beginPath();
ctx.fillStyle = oColores.IE;
ctx.moveTo(X, Y);
ctx.lineTo(Xap, Yap);
ctx.arc(X, Y, r, ap, af);
ctx.closePath();
ctx.fill();
}
}
Estadísticas de uso de navegadores
( para el mes de enero del año 2014 )
Aligerando el código
Observamos que podemos escribir una función que dibuja un sector circular. Esto aligerará mucho el código más adelante.
La función sectorCircular( ap, af, color )
toma 3 argumentos: ap
( ángulo de partida ), af
( ángulo final ) y el color
.
function sectorCircular(ap, af, color) {
var Xap = X + r * Math.cos(ap);
var Yap = Y + r * Math.sin(ap);
ctx.beginPath();
ctx.fillStyle = color;
ctx.moveTo(X, Y);
ctx.lineTo(Xap, Yap);
ctx.arc(X, Y, r, ap, af);
ctx.closePath();
ctx.fill();
}