Añadir una leyenda
Esta es una continuación de gráficos circulares (2)
Para añadir una leyenda tenemos que reorganizar un poco las cosas. Vamos a mover el gráfico circular unos 75px hacia la derecha. De esta manera creamos el espacio necesario para la leyenda.
// desplaza el gráfico unos 75px hacia la derecha
var offset = 75;
// las coordenadas del centro del gráfico
var X = (canvas.width / 2) - offset;
var Y = canvas.height / 2;
También tenemos que escribir una función, laLeyenda(), que hace exactamente esto: crea la leyenda.
laLeyenda( )
Las variables lx y ly representan las coordenadas de la esquina derecha arriba de la leyenda.
También hay que definir algunas propiedades del texto:
ctx.textBaseline="top";
ctx.font="12px Verdana";
A continuación para cada propiedad del objeto oData for(var propiedad in oData) dibujamos una línea de la leyenda ( casilla y texto ).
En paralelo restamos el valor de esta propiedad de otrosValue ( inicialmente el valor de otrosValue = 100, o sea 100% ).
De esta manera al final del bucle tendremos calculado el porcentaje de usuarios que utilizan otros navegadores.
Veamos el código.
function laLeyenda() {
var ly = Y;
var lx = (canvas.width / 2) - offset + r + 30;
ctx.textBaseline = 'top';
ctx.font = '12px Verdana';
var otrosValue = 100;
// para cada propiedad en el objeto oData
for (var propiedad in oData) {
// el color que representa el navegador
ctx.fillStyle = oColores[propiedad];
// dibuja la casilla
ctx.fillRect(lx, ly, 15, 15);
// dibuja el texto
ctx.fillStyle = '#333';
// la descripción: navegador y porcentaje de usuarios
ctx.fillText(propiedad + ': ' + oData[propiedad] + '%', lx + 25, ly);
// calcula el porcentaje de usuarios que utilizan otros navegadores
otrosValue -= oData[propiedad];
// calcula el valor de ly para la siguiente línea
ly += 23;
}
// el porcentaje de usuarios que utilizan otros navegadores
otrosValue = Math.round(otrosValue * 10) / 10;
ctx.fillStyle = oColores.otros;
ctx.fillRect(lx, ly, 15, 15);
ctx.fillStyle = '#333';
ctx.fillText('otros: ' + otrosValue + '%', lx + 25, ly);
}Poniendolo todo junto
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'
};
var r = 100;
// desplaza el gráfico unos 75px hacia la derecha
var offset = 75;
// las coordenadas del centro del gráfico
var X = (canvas.width / 2) - offset;
var Y = canvas.height / 2;
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;
}
}
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 laLeyenda() {
var ly = Y;
var lx = (canvas.width / 2) - offset + r + 30;
ctx.textBaseline = 'top';
ctx.font = '12px Verdana';
var otrosValue = 100;
// para cada propiedad en el objeto oData
for (var propiedad in oData) {
// el color que representa el navegador
ctx.fillStyle = oColores[propiedad];
// dibuja la casilla
ctx.fillRect(lx, ly, 15, 15);
// dibuja el texto
ctx.fillStyle = '#333';
// la descripción: navegador y porcentaje de usuarios
ctx.fillText(propiedad + ': ' + oData[propiedad] + '%', lx + 25, ly);
// calcula el porcentaje de usuarios que utilizan otros navegadores
otrosValue -= oData[propiedad];
// calcula el valor de ly para la siguiente línea
ly += 23;
}
// el porcentaje de usuarios que utilizan otros navegadores
otrosValue = Math.round(otrosValue * 10) / 10;
ctx.fillStyle = oColores.otros;
ctx.fillRect(lx, ly, 15, 15);
ctx.fillStyle = '#333';
ctx.fillText('otros: ' + otrosValue + '%', lx + 25, ly);
}
dibujarGrafico();
laLeyenda();
}
}