11

Tengo este código, necesito volverlo dinámico

<svg  width="240" height="240" viewBox="0 0 240 240"><circle cx="120" 
cy="120" r="120" fill="#ebeced"></circle><path d="M 120.0,120.0 L 120.0,0.0 A 
120.0,120.0 0 1 1 75.71350260559888,8.471052418954017 Z" fill="#58d6a6"></path>
<circle cx="120" cy="120" r="100" fill="#ffffff"></circle></svg>

<svg width="240" height="240" viewBox="0 0 240 240"><circle cx="120" cy="120" 
r="120" fill="#ebeced"></circle><path d="M 120.0,120.0 L 120.0,0.0 A 120.0,120.0 
0 1 1 55.59949741795174,18.744998804110452 Z" fill="#58d6a6"></path><circle 
cx="120" cy="120" r="100" fill="#ffffff"></circle></svg>

Dejo 2 ejemplos, no encuentro una relación, como debe variar.

Esa gráfica ahora significa 90% de X, quiero volverlo dinámico para cualquier porcentaje.

Acá está mi avance:

function circlePath(cx, cy, r){
var variables="M" + cx + "," + cy + "m" + (-r) + ",0a" + r + "," + r + " 0 1,0 " + (r * 2) + ",0a" + r + "," + r + " 0 1,0 " + (-r * 2) + ",0";;

var pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path");
pathEl.setAttribute(variables);
document.querySelector('svg').appendChild(pathEl);
}

circlePath(120,120,120);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg  class="circulo" width="240" height="240" viewBox="0 0 240 240"><circle cx="120" 
cy="120" r="120" fill="#ebeced"></circle ><path d="M 120.0,120.0 L 120.0,0.0 A 
120.0,120.0 0 1 1 75.71350260559888,8.471052418954017 Z" fill="#58d6a6"></path>
<circle cx="120" cy="120" r="100" fill="#ffffff"></circle></svg>

Me basé en: https://stackoverflow.com/questions/5737975/circle-drawing-with-svgs-arc-path

y acá un ejemplo: http://jsfiddle.net/godly/zL5Su/

¡Pero no funciona!

2 respuestas 2

15

También podrías resolverlo usando:

  • stroke-dasharray: que nos permite especificar el largo del guion.

  • stroke-dashoffset: que nos permite especificar cuanto restar al largo del guion.

  • transition: que nos permite definir la transición entre dos estados de un elemento.

  • transform: que nos permite usando rotate, girar el circulo y posicionar el inicio de la barra en la parte superior.

Entonces, tenemos que:

  • El radio (r) del circulo es 90.

  • La formula para calcular el perímetro (P) de una circunferencia: 2π * r

    P = 2π * r
    P = 2π * 90
    P = 565.48
    
  • Establecemos stroke-dasharray igual al 565.48, que es el perímetro (P).

  • Establecemos stroke-dashoffset igual al 0 (no restar nada), lo que nos genera un guion del 100% del largo establecido.

  • Si quisiéramos generar un guion del 30% (x) del perímetro de la circunferencia, tendríamos que calcular cuanto restar al largo del guion:

    offset = P * (100 - x) / 100
    offset = 565.48 * (100 - 30) / 100
    offset = 395.836
    

Demo:

function getCirclePerimeter() {
  var radius = parseInt(circle.getAttribute('r'), 10);
  return 2 * Math.PI * radius;
}

var cont = document.getElementById('cont');
var bg = document.getElementById('bg');
var circle = document.getElementById('bar');
var percent = document.getElementById('percent');

// Inicializamos
bg.style.strokeDasharray = 
  circle.style.strokeDasharray = getCirclePerimeter();
cont.setAttribute('data-pct', percent.value);

percent.addEventListener('input', function() {
  var percent = parseInt(this.value, 10),
    perimeter = getCirclePerimeter();
  
  // Validamos el valor ingresado
  if (isNaN(percent) || percent > 100) {
    percent = 100;
  } else if (percent < 0) {
    percent = 0;
  }
  this.value = percent;
    
  // Calculamos cuanto restar!
  var offset = perimeter * (100 - percent) / 100;
  circle.style.strokeDashoffset = offset;
  cont.setAttribute('data-pct', percent);
});
.percent {
  position: absolute;
}
#svg circle {
  fill: transparent;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .2s linear;
  stroke: #ebeced;
  stroke-width: 20px;
}
#svg #bar {
  stroke: #58d6a6;
}
#cont {
  height: 200px;
  width: 200px;
  margin: 10px auto;
  position: relative;
}
#cont:after {
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  content: attr(data-pct)"%";
  font-size: 32px;
  color: #58d6a6;
}
<label class="percent">
  <input id="percent" name="percent" value="100" type="number" min="0" max="100" size="1"/>%
</label>
<div id="cont">
  <svg id="svg" width="200" height="200" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle id="bg" r="90" cx="100" cy="100"></circle>
    <circle id="bar" r="90" cx="100" cy="100" transform="rotate(-90 100 100)" id="bar"></circle>
  </svg>
</div>

0
14
+200

Lo primero, un poco de trigonometría (cortesía de Paul Dixon): para obtener el punto dentro de una circunferencia a partir de cierto ángulo, debes aplicar la siguiente fórmula:

x = cx + r * cos(a)
y = cy + r * sin(a)

en el que cx y cy son las coordenadas del centro del círculo, r es el radio, y a es el ángulo que quieres expresado en radianes. Eso lo vamos a usar para calcular la posición de destino del arco que vamos a crear.

Y además hay que tener otra parte importante en cuenta: el ángulo se empieza a contar desde el eje de la X (como se indica en el gráfico siguiente), mientras que el porcentaje que quieres mostrar se empieza a contar desde el eje de la Y. Por lo que vas a tener que corregir el ángulo π/2 radianes:

gráfico con círculo y radianes

Teniendo eso en cuenta, para calcular el punto de destino del arco, las cuentas que habrá que hacer serán como esto (se puede simplificar, pero lo he dejado así para que se vea la corrección mejor y ya en radianes):

x = cx + r * cos( 2π * porcentaje - π/2 );
y = cy + r * sin( 2π * percentaje - π/2 );

Y ahora la parte divertida: el valor que va a ir dentro del d en el path que quieres que represente el porcentaje. Sería algo como esto:

M <cx>,<cy> L<cx>,<cx - r> A <r>,<r> <modificador de arco> <x>,<y> Z

Donde:

  • <cx>: es la coordenada X del centro de la circunferencia
  • <cy>: es la coordenada Y del centro de la circunferencia
  • <r>: es el radio de la circunferencia
  • <modificador de arco>: esto serán los tres dígitos (con valores 0 ó 1), que van a depender el valor del ángulo: si es más de 180 será "0 1,1" y si no será "1 0,1". (Daniel Pataki tiene un post muy bueno en inglés, en el que lo explica mejor mientras enseña como crear una gráfica).
  • <x>: es el valor x que calculaste con las fórmulas de arriba.
  • <y>: es el valor y que calculaste con las fórmulas de arriba.

A partir de ahí se puede deducir que <cx - r> es la coordenada X del centro de la circunferencia menos el radio.

Después de explicar qué es cada cosa, voy a poner una descripción de qué es lo que hace. Para ello, voy a suponer que la imagen es un cuadrado de 240x240, la circunferencia tiene un radio de 100 con el centro en 120,120, y que queremos representar un 20% cuyas coordenadas son 215.1056,89.0983. El d sería entonces:

M120,120 L120,20 A100,100 1 0,1 215.1056,89.0983 Z

Esto es lo que hace:

  1. Se sitúa en la posición 120,120 (sin dibujar nada)
  2. Dibuja una línea hasta 120,20
  3. Desde la posición actual, dibuja un arco hasta 215.1056,89.0983
  4. Cierra el arco (dibujando una línea desde el punto actual hasta el original 120,120)

Espero que sirva para entender mejor qué es lo que se hace.

Aquí dejo un ejemplo con el código funcionando:

function circlePath(cx, cy, r, percentil){
  
  var coordx = cx + r * Math.cos( 2 * Math.PI * percentil / 100 - Math.PI / 2 );
  var coordy = cy + r * Math.sin( 2 * Math.PI * percentil / 100 - Math.PI / 2 );
  var modif = percentil >= 50 ? "0 1,1" : " 1 0,1";
  var variables = "M" + cx + "," + cy + " L" + cx +"," + (cx - r) + " A" + r + "," + r + " " + modif + " " + coordx + ", " + coordy + " Z";
  
  var pathEl = document.getElementById("porcentaje");
  pathEl.setAttribute("d", variables);
  pathEl.setAttribute("fill", "red");
  
  document.getElementById("porcentaje-texto").innerHTML = percentil + "%";
}

circlePath(120,120,120, 75);
<svg class="circulo" width="240" height="240" viewBox="0 0 240 240">
  <circle cx="120" cy="120" r="120" fill="#ebeced"></circle>
  <path id="porcentaje" d="" fill="#58d6a6"></path>
  <circle cx="120" cy="120" r="100" fill="#ffffff"></circle>
  <text id="porcentaje-texto" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" fill="black" stroke="none" style="font-size:40px">0%</text>
</svg>

<hr/>

<button onclick="circlePath(120,120,120,10)">10%</button>
<button onclick="circlePath(120,120,120,20)">20%</button>
<button onclick="circlePath(120,120,120,30)">30%</button>
<button onclick="circlePath(120,120,120,40)">40%</button>
<button onclick="circlePath(120,120,120,50)">50%</button>
<button onclick="circlePath(120,120,120,60)">60%</button>
<button onclick="circlePath(120,120,120,70)">70%</button>
<button onclick="circlePath(120,120,120,80)">80%</button>
<button onclick="circlePath(120,120,120,90)">90%</button>

Nota: he hecho un poco de trampa y el código falla para el porcentaje 100%. Podrías añadir una pequeña condición para ese caso en la que se pinte el círculo de rojo en lugar de calcular arcos y demás.

2
  • como podria poner el porcentaje en medio del circulo?
    – hubman
    el 20 abr. 2017 a las 3:55
  • @hubman para poner un porcentaje dentro del círculo, añade el texto al final y posiciónalo centrado siguiendo las instrucciones de esta otra respuesta de StackOverflow en Español. He actualizado el código de arriba para que puedas ver un ejemplo, básicamente lo que necesitas es <text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" fill="black" stroke="none">0%</text>
    – Alvaro Montoro
    el 20 abr. 2017 a las 12:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.