0

Necesito dibujar el siguiente chart mediante SVG, alguien podria ayudarme a llegar al objetivo? ya que eh tratado sin tener éxito ya que no se dibujar en svg tambien me eh apoyado con librerías pero tampoco llego a lo esperado.

La barra de incremento seria la blanca. Y debería ser responsivo.

introducir la descripción de la imagen aquí

2 respuestas 2

4

Para dibujar este tipo de "chart" en SVG necesitas utilizar la propiedad stroke-dasharray.

// calcula el perimetro del circulo #test
let perimetro = 50 * 2 * Math.PI;
let _input = document.querySelector("[type='range']");

_input.addEventListener("input",()=>{  
  dibujar_chart();  
})

window.addEventListener("load",()=>{  
  dibujar_chart();  
})

function dibujar_chart(){
  let valor = Number(_input.value);
  let dash = perimetro * valor / 360;
  let espacio = perimetro - dash;
  test.style.strokeDasharray = dash + " " + espacio
}
svg{width:100vh; display:block;margin:0 auto; background:#258dd9;
transform:rotate(-90deg)}

div{
 position:relative;
 bottom:2em;
 width:90vh;
 height:1em;
 margin:0 auto;
}

[type="range"]{display:block;width:100%;}

#test{stroke-dasharray: 100 300;
}
<svg viewBox="0 0 200 200">
  <circle id="centro" cx="100" cy="100" r="30" fill="#94c7ec"></circle>
  
  <circle id="borde" cx="100" cy="100" r="50" stroke-width="14" stroke="#94c7ec" fill="none"></circle>
  
    <circle id="test" cx="100" cy="100" r="50" stroke-width="8" stroke="#fff" fill="none" ></circle>
  
</svg>

<div><input type="range" min="0" max = "360" value="45" /></div>

Por favor lea más acerca de cómo dibujar línea discontinuas en SVG con stroke-dasharray: Dibujar líneas

0

Finalmente lo que hice para conseguir el objetivo fue revisar lo que aparece en esta publicaciónde hace un par de tiempo atrás.

Lo que me llevo a hacer lo siguiente:

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.textContent);

        var percent = parseInt(percent.textContent, 10),
                perimeter = getCirclePerimeter();

            // Validamos el valor ingresado
            if (isNaN(percent) || percent > 2000) {
                percent = 2000;
            } else if (percent < 0) {
                percent = 0;
            }
            this.value = percent;

            // Calculamos cuanto restar!
            var offset = perimeter * (0 - percent) / 2000;
            circle.style.strokeDashoffset = offset;
            cont.setAttribute('data-pct', percent);
html {background-color: black}

#svg #bg, #svg #bar {
    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;
    }
<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)"></circle>

                                                        <circle cx="100" cy="100" r="60" stroke-width="0" stroke="none" fill="#b7d9f2" />
                                                    </svg>
</div>

<span id="percent" class="hidden">3000</span>

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.