Calificaciones del editor: Calificaciones de los usuarios: [Total: 0 Promedio: 0].ilfs_responsive_below_title_1 { ancho: 300px; } @media (ancho mínimo: 500 px) {.ilfs_responsive_below_title_1 { ancho: 300 px; } } @media (ancho mínimo: 800 px) {.ilfs_responsive_below_title_1 { ancho: 336 px; } }
Chartist es una biblioteca de generación de gráficos SVG de código abierto y gratuita que se puede utilizar. Es muy avanzado y admite la generación de muchos gráficos con muchos parámetros. Con esto, puede generar gráficos coloridos de cualquier tamaño y ponerlos en su sitio web. Incluso es compatible con la animación usando CSS y, por lo tanto, con la ayuda de esta biblioteca, podrá generar tablas y gráficos animados.
Al crear paneles y páginas web para mostrar algún tipo de datos relacionados con los informes, necesita tablas. Muchas veces, necesitaban ser dinámicos o estáticos. Existen herramientas para eso, pero no como Chartist. Este es probablemente uno de su tipo. Viene con una documentación muy detallada y muy buenos ejemplos para que pueda aprender a generar gráficos con bastante rapidez.
Lista de tipos de gráficos admitidos por Chartist:
Gráfico de barras (incluidos apilados y horizontales) Gráfico de líneas Gráfico circular Gráfico de áreas Gráfico de anillos Gráfico de calibre Gráfico de dispersión de líneas Diagrama SVG animado Ruta Gráfico de líneas bipolares Series temporales
Características de los gráficos generados por Chartist:
Configuración de respuesta extrema. Colocación de etiquetas Etiquetas multilínea Barras superpuestas para dispositivos móviles Agujeros en los datos Animación CSS Animación SVG Animaciones SMIL avanzadas Compatibilidad con complementos
¿Cómo usar Chartsit para generar gráficos SVG?
Hay varias formas de usar esta biblioteca. Dependiendo del tipo de desarrollador frontend que sea, puede usarlo. Viene como un módulo de nodo, así como un archivo de secuencia de comandos incrustable que puede servir directamente en HTML a través de CDN.
Para simplificar, puede usar esto en documentos HTML con bastante facilidad. Solo tienes que importar estos archivos en la sección
de tu sitio web. https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.jsDespués de vincular las bibliotecas, solo tiene que escribir un elemento
Ahora, agregue una etiqueta de secuencia de comandos que realmente generará el gráfico en el contenedor especificado. Esto es realmente muy simple. Si conoce muy bien JavaScript, puede revisar la documentación para ver cómo generar una cuadro. Para fines de demostración, puede usar el siguiente código. Agréguelo justo debajo del elemento
Ya casi terminaste. Simplemente abra el archivo HTML en el navegador. El gráfico se generará ahora para usted. Puede jugar con el código JS para generar un gráfico personalizado basado en diferentes datos. Además, puede generar un tipo diferente de gráfico de esta manera.
La documentación en el sitio web principal de Chartist está muy bien detallada. Tiene muchos ejemplos incluso sobre cómo crear gráficos animados. Como desarrollador front-end, deberá revisar esa documentación para generar un gráfico. Y con algo de código, incluso puede hacerlos exportables también.
Reflexiones finales:
Debo decir que Chartist es una joya de herramienta para que los desarrolladores y diseñadores integren gráficos personalizados en puesta en escena, así como sitio web en producción. Es muy simple y realmente no tiene que escribir un código de pieza muy largo a menos que no esté creando algo realmente complejo. El repositorio de GitHub ya tiene más de 10.000 estrellas, lo que es un gran logro en sí mismo.