0

¿Cómo podría cambiar los valores de stroke-dasharray de tal forma que al momento de cambiar su valor cambie de clase y de color?.

Como se muestra en fiddle tengo 3 botones. Al presionar 8 am se ponga al 100% y al presionar 12 pm aparezca 50% y 4 pm al 20% y, de ser posible, el texto de la clase percentage.

.flex-wrapper {
    display: flex;
    flex-flow: row nowrap;
  }
  
  .single-chart {
    width: 33%;
    justify-content: space-around ;
  }
  
  .circular-chart {
    display: block;
    margin: 10px auto;
    max-width: 80%;
    max-height: 250px;
  }
  
  .circle-bg {
    fill: none;
    stroke: #eee;
    stroke-width: 3.8;
  }
  
  .circle {
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
  }
  
  @keyframes progress {
    0% {
      stroke-dasharray: 0 100;
    }
  }
  
  .circular-chart.orange .circle {
    stroke: #ff9f00;
  }
  
  .circular-chart.green .circle {
    stroke: #4CC790;
  }
  
  .circular-chart.red .circle {
    stroke: #e53c3c;
  }
  
  .percentage {
    fill: #SDFASF;
    font-family: sans-serif;
    font-size: 0.5em;
    text-anchor: middle;
  }
<div class="single-chart">
    <svg viewBox="0 0 36 36" class="circular-chart red">
        <path class="circle-bg"
            d="M18 2.0845
                a 15.9155 15.9155 0 0 1 0 31.831
                a 15.9155 15.9155 0 0 1 0 -31.831"
            />
        <path class="circle"
            stroke-dasharray="20, 100"
            d="M18 2.0845
                a 15.9155 15.9155 0 0 1 0 31.831
                a 15.9155 15.9155 0 0 1 0 -31.831"
                />
        <text x="18" y="20.35" class="percentage">20%</text>
    </svg>
</div>

<button class= "circle " type="button"  name=""  stroke-dasharray="100" onclick="circular-chart green">8:00 AM</button>
<button class= "circle " type="button"  name=""  stroke-dasharray="50" onclick="circular-chart orange">12:00 pm</button>
<button class= "circle " type="button"  name=""  stroke-dasharray="20" onclick="circular-chart red">4:00 pm</button>

Enlace al Fiddle (original).

2
  • ¿Que has intentado?¿Que fallos te está dando?¿Has probado a utilizar la pseudoclase :focus de CSS o el evento onfocus de Javascript? Commented el 11 nov. 2019 a las 21:13
  • buscare info acerca del evento y la pseudo clase gracias
    – Yisus Spec
    Commented el 11 nov. 2019 a las 21:35

2 respuestas 2

1

Lo que necesitas para que tu animación quede bien es hacer uso de transiciones, y no animaciones:

https://developer.mozilla.org/es/docs/Web/CSS/transition

De modo que se animará automáticamente cualquier cambio en un atributo CSS.

Además, he almacenado en juegos de datos (dataset) la información que debe cambiar, para facilitar actualizar o editar el código HTML:

https://developer.mozilla.org/es/docs/Web/API/HTMLElement/dataset

Y, por último, en vez de usar los atributos HTML onclick, he usado addEventListener:

https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener

Con todos estos cambios realizados, este es el resultado:

/* Cuando cargue el DOM agregamos los eventos "clic" */
document.addEventListener('DOMContentLoaded', () => {
  /* Precargamos los elementos necesarios */
  let circulo = document.querySelector('svg .circle');
  let porc = document.querySelector('svg .percentage');
  /* Agregamos un evento "clic" a los botones */
  document.querySelectorAll('button[data-porc]').forEach(
    (boton) => {
      boton.addEventListener('click', (e) => {
        /* Asignamos la clase almacenada en "data-class" */
        circulo.className.baseVal = e.target.dataset.class;
        /* Mostramos el porcentaje almacenado en "data-porc" */
        porc.innerHTML = e.target.dataset.porc + "%";
      });
    }
  );
  /* Simulamos click en el botón preselecionado */
  setTimeout(() => {
    document.querySelector('button[data-porc][selected]').click();
  }, 100);
});
.single-chart {
  width: 33%;
  justify-content: space-around;
}
  
.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 250px;
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}

.percentage {
  fill: #SDFASF;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}

.circle {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  /* Habilitamos TRANSICIONES (y no animaciones) para
    las propiedades "stroke-dasharray" y "stroke" */
  transition: stroke-dasharray 1s, stroke 1s;
}

/* Ahora configuramos los estilos de destino. Las
  transiciones harán el resto */
.orange {
  stroke: #ff9f00;
  stroke-dasharray: 60 100;
}
.green {
  stroke: #4CC790;
  stroke-dasharray: 100 100;
}
.red {
  stroke: #e53c3c;
  stroke-dasharray: 20 100;
}
<div class="single-chart">
  <svg viewBox="0 0 36 36" class="circular-chart">
    <path class="circle-bg" d="M18 2.0845
      a 15.9155 15.9155 0 0 1 0 31.831
      a 15.9155 15.9155 0 0 1 0 -31.831" />
    <path class="circle" stroke-dasharray="0, 100" d="M18 2.0845
      a 15.9155 15.9155 0 0 1 0 31.831
      a 15.9155 15.9155 0 0 1 0 -31.831" />
    <text x="18" y="20.35" class="percentage">20%</text>
  </svg>
</div>

<button data-class="circle green" data-porc="100">8:00 AM</button>
<button data-class="circle orange" data-porc="50">12:00 PM</button>
<button data-class="circle red" data-porc="20" selected>4:00 PM</button>

0

Para cambiar las clases son con las funciones addClass y removeClass, te deje un ejemplo comentado, se me hizo más fácil hacer una función a la que le mandes el % y ya modifique la propiedad en lugar de estar haciendo una clase para cada %. Pruébalo y me comentas

	function rellenado(id){
		$('.circle').css('stroke-dasharray', id+', 100');
		$('.percentage').html(id + '%');
                /*Para cambiar las clases es con */
	//$('.circle').addClass('circulo50');
	}
	
	.flex-wrapper {
    display: flex;
    flex-flow: row nowrap;
  }
  
  .single-chart {
    width: 33%;
    justify-content: space-around ;
  }
  
  .circular-chart {
    display: block;
    margin: 10px auto;
    max-width: 80%;
    max-height: 250px;
  }
  
  .circle-bg {
    fill: none;
    stroke: #eee;
    stroke-width: 3.8;
  }
  
  .circle {
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
  }

  .circle50{
  	stroke-dasharray:50,100;
  }
  
  @keyframes progress {
    0% {
      stroke-dasharray: 0 100;
    }
  }
  
  .circular-chart.orange .circle {
    stroke: #ff9f00;
  }
  
  .circular-chart.green .circle {
    stroke: #4CC790;
  }
  
  .circular-chart.red .circle {
    stroke: #e53c3c;
  }
  
  .percentage {
    fill: #SDFASF;
    font-family: sans-serif;
    font-size: 0.5em;
    text-anchor: middle;
  }
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

<div class="single-chart">
	<svg viewBox="0 0 36 36" class="circular-chart red">
	  <path class="circle-bg"
		d="M18 2.0845
		  a 15.9155 15.9155 0 0 1 0 31.831
		  a 15.9155 15.9155 0 0 1 0 -31.831"
	  />
	  <path class="circle"
		stroke-dasharray="20, 100"
		d="M18 2.0845
		  a 15.9155 15.9155 0 0 1 0 31.831
		  a 15.9155 15.9155 0 0 1 0 -31.831"
	  />
	  <text x="18" y="20.35" class="percentage">20%</text>
	</svg>
</div>

<button id="me" class= "circle " type="button"  name=""  stroke-dasharray="100" onclick="rellenado(100)">8:00 AM</button>
<button class= "circle " type="button"  name=""  stroke-dasharray="50" onclick="rellenado(50)">12:00 pm</button>
<button class= "circle " type="button"  name=""  stroke-dasharray="20" onclick="rellenado(20)">4:00 pm</button>

6
  • Muchisimas Gracias Manuel, te agradezco muchisimo
    – Yisus Spec
    Commented el 12 nov. 2019 a las 6:06
  • Cuando este grande quiero ser como tu :D
    – Yisus Spec
    Commented el 12 nov. 2019 a las 6:11
  • De nada, cunado gustes Commented el 12 nov. 2019 a las 14:14
  • Uso edge y veo cambiar el porcentaje pero no la barra está mal o no funciona en edge? el de Oscar si me funciona bien
    – franmost
    Commented el 31 mar. 2020 a las 21:15
  • Por lo general edge maneja tag diferentes - pruébalo en chrome o firefox Commented el 1 abr. 2020 a las 17:56

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.