Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
¿Qué es Easy Pie Chart?
Easy Pie Chart es una librería de Javascript que nos va a permitir insertar cómodamente gráficos de quesito en nuestra página web.
Para poder usar los códigos que te mostraré a continuación, será necesario cargar el Javascript de Easy Pie Chart. Puedes descargarlo desde este enlace a su el repositorio de github.
Ejemplo básico
<div class="chart1" data-percent="17"</div>
<script>
const chart1 = new EasyPieChart(document.querySelector('.chart1'), { });
</script>Ejemplo con modificaciones visuales
<div class="chart2" data-percent="80"></div>
<script>
const chart2 = new EasyPieChart(document.querySelector('.chart2'), {
easing: 'easeOutElastic',
delay: 0,
barColor: 'red',
trackColor: 'blue',
scaleColor: false,
lineWidth: 40,
trackWidth: 20,
animate:500,
lineCap: 'butt',
});
</script>Mostrando el porcentaje de crecimiento del quesito
<div class="chart3" data-percent="80"><div class="number"></div></div>
<script>
const chart3 = new EasyPieChart(document.querySelector('.chart3'), {
onStep: function(from, to, currentValue) {
this.el.querySelector('.number').innerText = `${Math.round(currentValue)}%`;
},
});
</script>Con los siguientes estilos, podremos lograr que los números de porcentaje aparezcan en el centro del quesito y que aparezca el símbolo de porcentaje.
<style>
.chart4 canvas{
position:absolute;
}
.chart4{
display: flex;
align-items: center;
justify-content: center;
height: 120px;
background: pink;
}
</style>Volver a cargar la animación de quesito
<script>
const refrescar = () =>{
chart5.update(60);
}
</script>Mostrar la animación del quesito cuando este aparezca en pantalla
Podríamos usar un librería como ScrollMagic para ejecutar un código cuando el quesito aparezca en pantalla. En cualquier caso, debemos tener en cuenta, que cuando el quesito no esté en pantalla, o acabe de cargarse, tendremos que hacer un chart.update(0) para en el momento en que el quesito entre en pantalla, hagamos una animación desde cero hasta el valor deseado.
<script>
const chart1 = new EasyPieChart(document.querySelector('.chart1'), { });
chart1.update(0);
</script>