Añadir una leyenda

facebook-svg gplus-svg twitter-svg

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 )

Su navegador no soporta 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'
    };
    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();
  }
}

Estadísticas de uso de navegadores
( para el mes de enero del año 2014 )

Su navegador no soporta canvas :(

Continúa leyendo...