Dibujo gráfico de círculo animado utilizando SVG y Raphael. js
| Autor: | mramkumar-mani |
|---|---|
| Views Total: | 3,404 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 19, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Una pequeña biblioteca de JavaScript que aprovecha la < a href = "https://github.com/DmitryBaranovskiy/raphael" > Raphael. js biblioteca para dibujar animado, configurable, basado en SVG, gráfico circular/progreso indicador en la Página Web.
Funcionamiento
Incluya la biblioteca de Raphael. js necesaria en la Página Web.
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.2.1/raphael.min.js"></script>
Descargue e incluya el archivo principal de JavaScript Circle-Chart. js en la parte inferior de la Página Web.
<script src="js/circle-chart.js"></script>
Envuelva el valor porcentual que WAN para presentar en un elemento DIV de la siguiente manera:
<div class="circle-chart circle-chart--with-track"> 60% </div>
Renderizar un gráfico circular en la página web:
var el = document.querySelector('.circle-chart--with-track');
var demo = new CircleChart(el, { /* options here */ }); Opciones y valores predeterminados.
stroke: 20, maxVal: 100, colour: '#394c7c', animationSpeed: 4000, edgeWidth: 0, edgeGap: undefined, edgeColour: undefined, trackColour: '#bec3ce'
