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();
}