Más sectores circulares
Esta es una continuación de gráficos circulares (1)
A continuación vamos a dibujar los otros sectores circulares ( para Firefox, Chrome, Safari y Opera ).
Para esto vamos a utilizar la función sectorCircular() que hemos escrito anteriormente.
Tenemos que tener en cuenta que cada nuevo sector circular empieza donde acaba el anterior ( var ap = af ).
Estadísticas de uso de navegadores
( para el mes de enero del año 2014 )
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.beginPath();
ctx.moveTo(X, Y);
ctx.arc(X, Y, r, 0, 2 * Math.PI);
ctx.fill();
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();
}
// dibuja el sector circular que representa IE
var ap = 0;
var af = ap + (2 * Math.PI / 100) * oData.IE;
sectorCircular(ap, af, oColores.IE)
// dibuja el sector circular que representa Firefox
ap = af;
af = ap + (2 * Math.PI / 100) * oData.Firefox;
sectorCircular(ap, af, oColores.Firefox);
// dibuja el sector circular que representa Chrome
ap = af;
af = ap + (2 * Math.PI / 100) * oData.Chrome;
sectorCircular(ap, af, oColores.Chrome);
// dibuja el sector circular que representa Safari
ap = af;
af = ap + (2 * Math.PI / 100) * oData.Safari;
sectorCircular(ap, af, oColores.Safari);
// dibuja el sector circular que representa Opera
ap = af;
af = ap + (2 * Math.PI / 100) * oData.Opera;
sectorCircular(ap, af, oColores.Opera);
}
}
Estadísticas de uso de navegadores
( para el mes de enero del año 2014 )
Aligerando el código
Dibujando los sectores circulares uno por uno observamos que el código se repite de manera monótona y previsible.
Lo que quiere decir que podemos ponerlo todo en una función ( dibujarGrafico() )
function dibujarGrafico() {
var ap = 0;
// para cada propiedad en el objeto oData
for (var propiedad in oData) {
var af = ap + (2 * Math.PI / 100) * oData[propiedad];
sectorCircular(ap, af, oColores[propiedad]);
ap = af;
}
}
Y es así como queda el código:
window.onload = function() {
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;
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();
}
function dibujarGrafico() {
// dibuja la base del gráfico
ctx.fillStyle = '#ddd';
ctx.moveTo(X, Y);
ctx.arc(X, Y, r, 0, 2 * Math.PI);
ctx.fill();
// dibuja los sectores circulares
var ap = 0;
// para cada propiedad en el objeto oData
for (var propiedad in oData) {
var af = ap + (2 * Math.PI / 100) * oData[propiedad];
sectorCircular(ap, af, oColores[propiedad]);
ap = af;
}
}
// llama la función dibujarGrafico;
dibujarGrafico();
}
}
}