Chartist.js, una biblioteca de código abierto para gráficos responsivos

 

 

 


Índice
  1. Su configuración individual
    1. Cenador
    2. MNP
    3. CDN
  2. Crea tu primer gráfico
  3. Contenedores responsivos con proporciones intrínsecas
  4. Configuración avanzada
    1. Anulación de configuración responsiva
  5. Aplicar estilo a SVG con CSS
    1. Locura de animación CSS
  6. Animando con SONRISA
    1. Animar elementos del gráfico utilizando la API de eventos
  7. Extensibilidad
    1. Ampliando el proceso de dibujo
  8. Recursos
    1. Contribuir
    2. Otras lecturas

Más sobre Gion ↬

 

  • Planificación y proceso del sistema de diseño, con Nathan Curtis
  • Chartist fue desarrollado para una necesidad muy particular: crear gráficos responsivos simples. Si bien otras bibliotecas de gráficos hacen un gran trabajo visualizando datos, siempre falta algo para satisfacer esta necesidad simple pero exigente. En este artículo, Gion Kunz le mostrará cómo utilizar Chartist para crear sus propios y hermosos gráficos responsivos. Aprenderá algunos conceptos clave de Chartist, cómo extenderlo fácilmente y también algunas características avanzadas, como anulaciones de configuración responsivas y la API de animación.

     

    La lista de bibliotecas de gráficos para la web ya es bastante larga y es posible que se pregunte por qué tendríamos que ampliarla. Siempre que necesite desarrollar el panel de una aplicación, incorporar algunas estadísticas de uso o simplemente visualizar algunos datos, se encontrará buscando una biblioteca de gráficos que se ajuste a sus necesidades.

    Chartist fue desarrollado para una necesidad muy particular: crear gráficos responsivos simples. Si bien otras bibliotecas de gráficos hacen un gran trabajo visualizando datos, siempre falta algo para satisfacer esta necesidad simple pero exigente.

    En este artículo, le mostraremos cómo utilizar Chartist para crear sus propios y hermosos gráficos responsivos. Aprenderá algunos conceptos clave de Chartist, cómo extenderlo fácilmente y también algunas características avanzadas, como anulaciones de configuración responsivas y la API de animación.

    Su configuración individual

    Puedes integrar la biblioteca Chartist en tu proyecto de muchas maneras. Está disponible en Bower y NPM, pero también directamente desde una red de entrega de contenido (CDN). También se expone como un módulo CommonJS, como un módulo AMD o simplemente en el objeto de ventana global. Puede decidir cuál es la mejor manera de integrar la biblioteca según la configuración de su proyecto.

    Chartist actualmente utiliza un contenedor de definición de módulo universal para satisfacer una amplia gama de casos de uso. En lugar de usar Chartist directamente desde el Chartistespacio de nombres en el objeto de la ventana, puede usar cargadores de módulos, como RequireJS, o agrupar sus gráficos en su aplicación con Browserify o webpack.

    Cenador

    Para instalar Chartist como una dependencia de front-end usando Bower, simplemente ejecute el siguiente comando en la carpeta de su proyecto:

    bower install chartist --save

    MNP

    Si prefieres NPM como repositorio o si estás usando un paquete de navegador CommonJS como Browserify o webpack, entonces querrás instalar Chartist usando NPM:

    npm install chartist --save

    CDN

    Otra forma rápida de empezar con Chartist es utilizar una CDN. La gente de jsDelivr hace un trabajo fantástico al mantener actualizada una gran cantidad de bibliotecas con su equilibrio de carga personalizado , y lo hacen todo de forma gratuita. Para utilizar los recursos de Chartist desde una CDN, incluya lo siguiente en su HTML:

    script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"/scriptlink href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" /

    Crea tu primer gráfico

    Una vez que haya elegido el método que se adapta a sus necesidades, puede comenzar a elaborar su primer gráfico. En el transcurso de este artículo, usaremos JSBin para crear nuestros gráficos. JSBin es una excelente herramienta colaborativa de depuración de desarrollo web y Chartist está disponible directamente en el menú "Agregar biblioteca". Si desea probar Chartist rápidamente, le recomiendo usar JSBin.

     

    Comencemos con un gráfico de líneas simple. Para esto, primero agregaremos un elemento contenedor a nuestro bodycon la clase ct-chart.

    !DOCTYPE htmlhtmlhead script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"/script link href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" / meta charset="utf-8" titleChartist | Simple line chart/title/headbody div/div/body/html

    Ahora podemos inicializar un gráfico de líneas en el contenedor con solo unas pocas líneas de JavaScript. Creemos tres series, con cinco valores cada una. También estableceremos una lista de etiquetas para el eje x. Como segundo argumento, el Chartist.Lineconstructor acepta un objeto de opciones. Aquí podemos especificar un fijo widthy heightpara nuestro gráfico.

    new Chartist.Line('.ct-chart', { labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], series: [ [2, 3, 2, 4, 5], [0, 2.5, 3, 2, 3], [1, 2, 2.5, 3.5, 4] ]}, { width: 320, height: 240});

    Editar en JSBin

    Contenedores responsivos con proporciones intrínsecas

    En el ejemplo anterior, utilizamos un fijo widthy heightpara el gráfico. Esto no siempre es deseado, y en el diseño responsivo debemos mantener nuestros elementos fluidos y no pensar en dimensiones fijas.

    Chartist usa sus propias clases para configurar contenedores con relaciones de aspecto fijas (proporciones intrínsecas). Por lo general, esta es una técnica que se aplica a videos e iframes responsivos, y utiliza el truco CSS de proporción intrínseca para establecer un contenedor de proporción fija. Con la implementación en Chartist, puedes incluso establecer el ancho de un contenedor conservando la relación de aspecto.

    Usemos una de las clases de contenedores responsivos generadas en Chartist para dimensionar nuestro gráfico. He elegido ct-golden-section, pero puedes elegir cualquiera de la lista de clases de contenedor generadas . Cuando utiliza la versión Sass de Chartist, también puede generar fácilmente sus propios contenedores de relación de aspecto fija.

    body div/div/body

    Debido a que ahora especificamos un contenedor con una relación de aspecto fija en nuestro gráfico, ya no necesitamos depender de dimensiones fijas al inicializar nuestro gráfico. Eliminemos el widthy heighten nuestra configuración.

    new Chartist.Line('.ct-chart', { labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], series: [ [2, 3, 2, 4, 5], [0, 2.5, 3, 2, 3], [1, 2, 2.5, 3.5, 4] ]});

    Editar en JSBin

    Ahora tenemos un gráfico que responde a los cambios en los medios. Intente cambiar el tamaño del panel de salida en JSBin para ver cómo el gráfico se adapta a los cambios en el tamaño de la ventana.

    Configuración avanzada

    Uno de los principios fundamentales de Chartist es una clara separación de preocupaciones a través de tecnologías web estándar. Esto incluye aplicar todas las configuraciones relacionadas con la apariencia con CSS. Además, una serie de configuraciones le permiten controlar el comportamiento de su gráfico. Estas configuraciones se aplican mediante JavaScript y se pueden pasar a su gráfico durante la inicialización.

     

    Creemos un gráfico de barras simple que visualice algunos datos de los días de la semana.

    new Chartist.Bar('.ct-chart', { labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'], series: [ [2, 8, 2, 4, 5, 8, 10], [4, 5, 8, 2, 6, 3, 10] ]}, { seriesBarDistance: 30, axisX: { showGrid: false }});

    Editar en JSBin

    En las opciones, podemos controlar la distancia de las barras y decirle a Chartist que no represente la cuadrícula en el eje x. Para obtener una lista completa de opciones, siempre puede visitar la documentación API de Chartist .

    De forma predeterminada, las etiquetas en el eje x están alineadas a la izquierda. Para alinearlos al centro, necesitamos agregar un estilo CSS. También queremos cambiar el ancho de la barra a 20 píxeles.

    .ct-chart .ct-bar { stroke-width: 20px;}.ct-chart .ct-label.ct-horizontal { text-align: center;}

    Editar en JSBin

    Ya tenemos un gráfico de barras atractivo para pantallas grandes.

    Anulación de configuración responsiva

    El ejemplo anterior funciona bien en pantallas de escritorio, pero no en dispositivos con resoluciones de pantalla ajustadas. Las barras son demasiado anchas, las etiquetas demasiado grandes y los nombres de los días de la semana están escritos completos. Además, es necesario ajustar la distancia de las barras.

    Algunos de estos cambios se pueden realizar en CSS modificando el ancho de la barra en una consulta de medios. Pero, ¿cómo hacemos para aplicar diferentes configuraciones en JavaScript? Chartist proporciona un mecanismo para este propósito llamado anulación de configuración receptiva.

    Miremos el ejemplo anterior y reescribámoslo con un enfoque centrado en los dispositivos móviles. Optimizaremos nuestras consultas de medios para el contenido con el que estamos trabajando, introduciendo un punto de interrupción a 300 píxeles y otro a 600 píxeles.

    .ct-chart .ct-label.ct-horizontal { text-align: center;}.ct-chart .ct-bar { stroke-width: 5px;}@media screen and (min-width: 300px) { .ct-chart .ct-bar { stroke-width: 10px; }}@media screen and (min-width: 600px) { .ct-chart .ct-bar { stroke-width: 20px; }}

    Si queremos adaptar nuestro gráfico a un medio en particular, podemos utilizar las anulaciones de configuración receptivas. Simplemente le decimos a Chartist que herede y anule nuestra configuración en función de las mismas consultas de medios en nuestro CSS. Chartist utiliza window.matchMediapara implementar una herencia en nuestra configuración similar a lo que hace CSS con nuestros estilos.

    El siguiente ejemplo utiliza labelInterpolationFncpara pasar una función que nos permite interpolar o incluso reemplazar el valor original de la etiqueta para el eje dado. Esto significa que podemos controlar cómo se muestran los nombres de los días de la semana en el eje x.

     

    new Chartist.Bar('.ct-chart', { labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'], series: [ [2, 8, 2, 4, 5, 8, 10], [4, 5, 8, 2, 6, 3, 10] ]}, { seriesBarDistance: 6, axisX: { showGrid: false, // Only return first letter of weekday names labelInterpolationFnc: function(value) { return value[0]; } }}, [ // Over 300px, we change the bar distance and show the first three letters of the weekdays ['screen and (min-width: 300px)', { seriesBarDistance: 15, axisX: { labelInterpolationFnc: function(value) { return value.slice(0, 3); } } }], // Over 600px, we increase the bar distance one more time and show the full weekdays ['screen and (min-width: 600px)', { seriesBarDistance: 30, axisX: { labelInterpolationFnc: function(value) { return value; } } }]]);

    Editar en JSBin

    En el ejemplo anterior, puede ver lo fácil que es crear un gráfico que funcione tanto en dispositivos móviles como en computadoras de escritorio, manteniendo al mismo tiempo una separación clara de las preocupaciones.

    Aplicar estilo a SVG con CSS

    Diseñar SVG en línea con CSS es fácil y eficiente porque puedes reutilizar estilos para diferentes gráficos. Puede incluir clases de CSS que definan la apariencia de sus gráficos y que mantengan la lógica separada de la apariencia. Mundo Gore

    Estas son algunas de las propiedades CSS más útiles para diseñar SVG en línea:

    • fillEstablece el color del relleno de una forma. Puedes usar RGBa.
    • strokeEstablece el color del contorno alrededor de tu forma.
    • stroke-widthEstablece el ancho de un contorno.
    • stroke-dasharrayEspecifica un trazo discontinuo para un contorno.
    • stroke-linecapEstablece el trazo de final de línea para el contorno de una forma. Esto se puede configurar en round, butto square.

    Consulte la especificación SVG 1.1 para obtener una lista completa de las propiedades de estilo SVG .

    Apliquemos nuestras nuevas habilidades de estilo y creemos un gráfico de líneas con tres series de aspecto diferente. Usaremos todas las propiedades de estilo anteriores para darle a nuestro gráfico una apariencia única.

    .ct-chart .ct-label.ct-vertical,.ct-chart .ct-label.ct-horizontal { color: rgba(255, 255, 255, 0.5);}.ct-chart .ct-grid.ct-vertical,.ct-chart .ct-grid.ct-horizontal { stroke: rgba(255, 255, 255, 0.1); shape-rendering: crispEdges;}.ct-chart .ct-series.ct-series-a .ct-line { stroke: #4ECDC4; stroke-width: 10px; stroke-linecap: round;}.ct-chart .ct-series.ct-series-b .ct-line { stroke: #C7F464; stroke-width: 2px; stroke-dasharray: 5px 2px;}.ct-chart .ct-series.ct-series-c .ct-line { stroke: #FF6B6B; stroke-width: 3px; stroke-linecap: round; stroke-dasharray: 30px 5px;}

    Editar en JSBin

    Si juegas un poco con este ejemplo, verás rápidamente lo fácil que es diseñar SVG con CSS. Además, es posible que hayas notado el shape-rendering: crispEdgesestilo en las líneas de la cuadrícula. Si bien no he incluido la shape-renderingpropiedad en la lista de propiedades de estilo útiles, la encontrará bastante útil en algunas situaciones. Le permite darle al navegador algunos consejos sobre cómo renderizar SVG. Los valores auto, optimizeSpeedy crispEdgesestán geometricPrecisionrespaldados por la especificación. Destinada al control del rendimiento, esta propiedad también es útil para representar ciertas formas sin suavizado. En algunos gráficos, incluido el ejemplo anterior, hacer que las líneas de la cuadrícula se vean muy nítidas con el crispEdgesvalor tiene un efecto muy agradable.

     

    Locura de animación CSS

    Soy un gran admirador de la animación… bueno, siempre que respalde el contenido y transmita información al usuario. Puede significar la diferencia entre que una UX funcione bien o no. El diseño de materiales de Google es un gran ejemplo de diseño de animación funcional. Sin embargo, para este artículo no nos centraremos en la animación funcional, sino que nos volveremos un poco locos con las posibilidades que tenemos a nuestra disposición. El soporte del navegador para la animación de propiedades SVG es bastante estable ahora, e incluso puedes animar las propiedades stroke-dasharrayy stroke-dashoffset. Mejoremos el ejemplo anterior con algunossignificativoanimación.

    Simplemente usando algo de CSS3, podemos crear algunas animaciones locas en nuestro gráfico.

    @keyframes width-pulse { 0% { stroke-width: 6px } 50% { stroke-width: 14px; } 100% { stroke-width: 6px; }}@keyframes dashoffset-seven { 0% { stroke-dashoffset: 7px; } 100% { stroke-dashoffset: 0px; }}@keyframes dasharray-craziness { 0% { stroke-dasharray: 7px 2px; } 80% { stroke-dasharray: 7px 100px; stroke-width: 10px } 100% { stroke-dasharray: 7px 2px; }}.ct-chart .ct-label.ct-vertical,.ct-chart .ct-label.ct-horizontal { color: rgba(255, 255, 255, 0.5);}.ct-chart .ct-grid.ct-vertical,.ct-chart .ct-grid.ct-horizontal { stroke: rgba(255, 255, 255, 0.1); stroke-dasharray: 2px; shape-rendering: crispEdges;}.ct-chart .ct-series.ct-series-a .ct-line { stroke: #4ECDC4; stroke-width: 10px; stroke-linecap: round; animation: width-pulse 2s infinite;}.ct-chart .ct-series.ct-series-b .ct-line { stroke: #C7F464; stroke-width: 2px; stroke-dasharray: 5px 2px; animation: dashoffset-seven 200ms infinite linear;}.ct-chart .ct-series.ct-series-c .ct-line { stroke: #FF6B6B; stroke-width: 3px; stroke-linecap: round; stroke-dasharray: 30px 5px; animation: dasharray-craziness 10s infinite linear;}

    Editar en JSBin

    Como puede ver, diseñar y animar SVG usando CSS es muy divertido. Si desea obtener más información, le recomiendo el artículo de Sara Soueidan " Estilizar y animar archivos SVG con CSS ".

    Animando con SONRISA

    La animación CSS es una excelente manera de inyectar algo de vida a un gráfico. Sin embargo, hay algunas cosas que no puedes animar con CSS. Si desea animar parámetros individuales de un elemento SVG para transformar una forma, entonces usaría las Chartist.SvgAPI para crear cómodamente animaciones SMIL.

    SMIL es potente, pero la API declarativa, que utiliza animateelementos, puede resultar confusa por su complejidad. Chartist ofrece una API de alto nivel que le permite aprovechar fácilmente las animaciones SMIL en sus gráficos.

    El objetivo de Chartist es simplificar el manejo de SMIL preservando al mismo tiempo la semántica especificada por el W3C. Chartist utiliza su propia biblioteca de manipulación SVG, a la que se puede acceder a través de Chartist.Svg. Similar a jQuery, proporciona un objeto contenedor alrededor de nodos DOM SVG reales, lo que le brinda algunos métodos convenientes para manipular el SVG subyacente. Puede obtener una descripción general completa explorando la Chartist.Svgdocumentación de la API .

     

    Para animar un elemento SVG, primero necesita obtener un objeto contenedor pasando un nodo SVG al Chartist.Svgconstructor.

    var element = new Chartist.Svg(document.querySelector('#my-specific-svg-element'));

    Luego puedes llamar a la animatefunción en tu elemento envuelto con un objeto de definición de animación:

    element.animate({ opacity: { dur: 1000, from: 0, to: 1 }, x1: { dur: '1000ms', from: 100, to: 200, easing: 'easeOutQuart' }, y1: { begin: 1000, dur: '2s', from: 0, to: 100 }});

    Esto creará tres animateelementos SMIL, cada uno de los cuales contiene los atributos de animación SMIL especificados en los objetos de definición. La API de animación chartista tiene algunas particularidades. Las propiedades beginy dur(es decir, duración) pueden especificarse como números sin unidades; Chartist convertirá los números a milisegundos automáticamente. Chartist también admite una easingpropiedad en el objeto de definición de animación que SMIL no admite directamente. La easingpropiedad le permite especificar una función de aceleración Chartist.Svg.Easing, que se traducirá a una función de interpolación SMIL.

    Chartist maneja las animaciones SMIL en un modo guiado especial de forma predeterminada. El modo guiado incluye el siguiente comportamiento, que facilita el manejo y la optimización de las animaciones activadas inmediatamente:

    • Antes de que comience la animación (incluso cuando se retrasa con begin), el atributo animado ya estará configurado en el fromvalor de la animación.
    • beginestá configurado explícitamente indefinitepara que pueda iniciarse manualmente sin depender de la hora de inicio del documento (es decir, creación).
    • El animateelemento se ve obligado a utilizar fill="freeze".
    • La animación se activa beginElement()dentro de un tiempo de espera, donde el comienzo del objeto de definición se interpreta en milisegundos. Si no se especifica ningún comienzo, el tiempo de espera se activa inmediatamente.
    • Después de la animación, el valor del atributo del elemento se establece en el tovalor de la animación.
    • Luego, el animateelemento se elimina del DOM.

    También puede desactivar el modo guiado pasando falsecomo segundo argumento a la animatefunción.

    Animar elementos del gráfico utilizando la API de eventos

    Chartist proporciona algunos eventos que puede utilizar para interceptar el proceso de creación de gráficos. Los draweventos de Chartist se activan cada vez que se crea un elemento del gráfico en el DOM. Dado que tenemos el Chartist.Svgcontenedor y todos los datos relevantes disponibles en la devolución de llamada del evento, esto lo convierte en un lugar perfecto para agregar nuestras animaciones.

     

    Este ejemplo se parece más a una fiesta de confeti que a un gráfico, pero debería ilustrar lo fácil que es crear animaciones personalizadas. El ejemplo utiliza la API de eventos Chartist y agrega animaciones a puntos en un gráfico de líneas.

    var seq = 0;chart.on('created', function() { seq = 0;});chart.on('draw', function(data) { if(data.type === 'point') { seq++; data.element.animate({ x1: { from: data.x - 50, to: data.x, begin: seq * 80, dur: 800, easing: Chartist.Svg.Easing.easeOutQuint }, opacity: { from: 0, to: 1, begin: seq * 80, dur: 300, } }); }});

    Editar en JSBin

    Extensibilidad

    Debido a que Chartist usa SVG en línea en el DOM, ampliar la funcionalidad principal es muy fácil. Si bien los elementos SVG en DOM tienen los mismos eventos que los elementos DOM normales, puedes usar fácilmente la biblioteca DOM de tu elección y agregar funcionalidad personalizada a los elementos de tu gráfico.

    Este ejemplo le muestra cómo agregar información sobre herramientas simple a un gráfico usando jQuery. Cuando el usuario pasa el cursor sobre un punto de datos, la información sobre herramientas debería volverse visible y mostrar el valor de los datos.

    var $tooltip = $('div/div').appendTo($('.ct-chart'));$(document).on('mouseenter', '.ct-point', function() { var seriesName = $(this).closest('.ct-series').attr('ct:series-name'), value = $(this).attr('ct:value'); $tooltip.text(seriesName + ': ' + value); $tooltip.removeClass('tooltip-hidden');});$(document).on('mouseleave', '.ct-point', function() { $tooltip.addClass('tooltip-hidden');});$(document).on('mousemove', '.ct-point', function(event) { $tooltip.css({ left: event.offsetX - $tooltip.width() / 2, top: event.offsetY - $tooltip.height() - 20 });});

    Editar en JSBin

    El ejemplo anterior utiliza eventos DOM regulares para agregar información sobre herramientas simple. Es posible que hayas notado el uso del ct:valueatributo del elemento de puntos del gráfico de líneas y el ct:series-nameatributo del grupo de series. Chartist tiene su propio espacio de nombres XML, que utiliza para exponer algunos metadatos al SVG. Esto facilita la extracción de información del DOM y su uso para funciones personalizadas.

    Ampliando el proceso de dibujo

    El sistema de eventos de Chartist es poderoso y es una gran herramienta para ampliar su gráfico con funciones personalizadas. El siguiente ejemplo utiliza el drawevento del gráfico de líneas para reemplazar los elementos de puntos aburridos con algo espectacular.

    var smashingImgTag = 'img src="https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/images/smashing-windows-icon-70-70.png" alt="Smashing Logo" /';chart.on('draw', function(data) { if(data.type === 'point') { var smashingFoob = data.element.parent().foreignObject(smashingImgTag, { width: 40, height: 40, x: data.x - 20, y: data.y - 20 }); data.element.replace(smashingFoob); }});

    En el ejemplo anterior, reemplazamos cada elemento de punto justo después de haberlo dibujado (insertado en el árbol DOM) con un elemento foreignObjectque contiene una imagen. A foreignObjectle permite incrustar elementos HTML en un SVG. La Chartist.SvgAPI proporciona una forma fácil y cómoda de crear foreignObjects. Para obtener detalles sobre la Chartist.SvgAPI, visite la documentación de la API .

    Recursos

    • “ Documentación API ”, Chartist Más información sobre cómo utilizar la biblioteca
    • " Ejemplos ", Chartist proporciona algunos gráficos de ejemplo donde puede codificarlos instantáneamente en línea.
    • “ Scalable Vector Graphics 1.1 (Segunda edición) ”, W3C La especificación SVG
    • “ Animación SMIL 3.0 ”, W3C La especificación SMIL
    • “ Objeto extranjero ”, Red de desarrolladores de Mozilla

    Contribuir

    Estamos constantemente buscando personas para involucrarse. Si tiene algo de tiempo libre y está interesado en contribuir, seleccione un problema en el que trabajar o abra uno nuevo.

    Otras lecturas

    • Diseño de gráficos circulares flexibles y mantenibles con CSS y SVG
    • Lo que se debe y no se debe hacer en el diseño infográfico
    • Cree un gráfico de barras animado con HTML, CSS y jQuery
    • Diversión con la física en la visualización de datos

    (vf, al, il, mrn)Explora más en

    • Codificación
    • javascript
    • Visualización de datos
    • SVG





    Tal vez te puede interesar:

    1. 40 bibliotecas útiles de JavaScript
    2. Bibliotecas prácticas de JavaScript y complementos de jQuery
    3. Bibliotecas de JavaScript útiles y complementos de jQuery: parte 2
    4. Bibliotecas JavaScript útiles y complementos jQuery

    Chartist.js, una biblioteca de código abierto para gráficos responsivos

    Chartist.js, una biblioteca de código abierto para gráficos responsivos

    Índice Su configuración individual C

    programar

    es

    https://pseint.es/static/images/programar-chartist-867-0.jpg

    2024-04-04

     

    Chartist.js, una biblioteca de código abierto para gráficos responsivos
    Chartist.js, una biblioteca de código abierto para gráficos responsivos

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20