Creación de gráficos de círculo animado con Circles. js y SVG

Vista prévia

Descripción

Circles. js es una biblioteca JavaScript ligera y fácil que hace que sea fácil de dibujar un gráfico de círculo animado en SVG con la visualización de porcentaje en su página web. También se puede utilizar como una barra de progreso & barra de carga.

Uso básico

Asegúrese de incluir el script Circles. js en su página web. El procedimiento recomendado es cargarlo en la parte inferior de la página para reducir el tiempo de carga de la página.

<script src="circles.js"></script>

Cree un contenedor para el gráfico circular.

<div id="canvas">
<div class="circle" id="circles-1"></div>
</div>

Llama a Circles. cree con las siguientes opciones

Circles.create({


id:



 'circles-1',


percentage: 43,


radius:

 60,


width:


10,


number:

 7.13,


text:


 '%',


colors:

 ['#D3B6C6', '#4B253A'],


duration:
 400
})

Todas las opciones.

• ID – el elemento DOM que va a contener el gráfico
• porcentaje – el porcentaje dictando el círculo más pequeño
• radio – el radio de los círculos
• ancho – el ancho del anillo (opcional, tiene el valor 10, si no se especifica)
• número – el número que se mostrará en el centro del gráfico (opcional, el porcentaje se mostrará si no se especifica)
• texto – el texto que se mostrará después del número (opcional, no se mostrará nada si no se especifica)
• colores – una matriz de colores, con el primer elemento que colorea el círculo completo (opcional, será ' [' #EEE ', ' #F00 '] ' si no se especifica)
• duración – valor en MS de duración de la animación; (opcional, el valor predeterminado es 500); Si se pasa ' null ', la animación no se ejecutará

Registro de cambios

06/11/2018

• Establezca el valor interno en un número muy pequeño para permitir valores cero