Repolode
Enviar
timqian

timqian/chart.xkcd

Librería de gráficos en JavaScript que representa gráficos de líneas, barras y otros con SVG y un estilo de boceto dibujado a mano, inspirado en xkcd.

Ver en GitHubSitio web
Estrellas
7,872
Forks
207
Issues abiertos
3
Último commit
hace 16 días

¿Qué es?

chart.xkcd es una librería de gráficos en JavaScript que dibuja gráficos con un estilo «de boceto», caricaturesco y hecho a mano, inspirado en el cómic xkcd. Los gráficos se representan en un único elemento SVG de la página, así que solo tienes que incluir el script e indicarle un nodo <svg> para obtener un gráfico.

Para crear un gráfico, instancia un constructor como chartXkcd.Line con el SVG de destino y, después, pasa un título, las etiquetas de los ejes y un objeto de datos con etiquetas y conjuntos de datos. La librería se puede cargar desde un CDN o npm, y el proyecto incluye un sitio de documentación con ejemplos.

Es adecuada para presentaciones informales, publicaciones de blog o diagramas que no requieran un aspecto corporativo pulido.

Funciones clave

  • 01Representa gráficos de líneas y otros tipos con un aspecto de boceto dibujado a mano.
  • 02Dibuja todo en un único elemento SVG de la página.
  • 03Se configura mediante un objeto de datos sencillo con etiquetas y conjuntos de datos.
  • 04Está disponible mediante CDN o npm como un script sencillo para el navegador.
  • 05Admite títulos y etiquetas para los ejes x e y.

Casos de uso

  • Añadir un gráfico informal y divertido a una publicación de blog o presentación.
  • Ilustrar estimaciones o planes con un estilo dibujado a mano y sin aspecto corporativo.
  • Insertar gráficos rápidos en una página HTML estática sin un paso de compilación.

Inicio rápido

  1. 1

    Incluye el script chart.xkcd y un nodo SVG en tu página

    <script src="https://cdn.jsdelivr.net/npm/chart.xkcd@2/dist/chart.xkcd.min.js"></script>
  2. 2

    Crea un gráfico de líneas con new chartXkcd.Line en el elemento SVG

En colecciones

Frameworks frontend y componentes de interfazCursos y herramientas de ciencia de datos

Temas

#chart#svg#data-visualization#javascript#hand-drawn#frontend#graph#html5#html5-charts#svg-sprite

Preguntas frecuentes

¿Qué es chart.xkcd?
Librería de gráficos en JavaScript que representa gráficos de líneas, barras y otros con SVG y un estilo de boceto dibujado a mano, inspirado en xkcd. chart.xkcd es una librería de gráficos en JavaScript que dibuja gráficos con un estilo «de boceto», caricaturesco y hecho a mano, inspirado en el cómic xkcd. Los gráficos se representan en un único elemento SVG de la página, así que solo tienes que incluir el script e indicarle un nodo <svg> para obtener un gráfico.
¿chart.xkcd es gratuito? ¿Qué licencia tiene?
chart.xkcd es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿chart.xkcd sigue mantenido?
Mantenimiento activo. El último commit de chart.xkcd fue el 21 oct 2026.
¿Para qué puedo usar chart.xkcd?
Añadir un gráfico informal y divertido a una publicación de blog o presentación. Ilustrar estimaciones o planes con un estilo dibujado a mano y sin aspecto corporativo. Insertar gráficos rápidos en una página HTML estática sin un paso de compilación.
¿Cómo se instala chart.xkcd?
Incluye el script chart.xkcd y un nodo SVG en tu página: <script src="https://cdn.jsdelivr.net/npm/chart.xkcd@2/dist/chart.xkcd.min.js"></script> Crea un gráfico de líneas con new chartXkcd.Line en el elemento SVG
¿Dónde consigo chart.xkcd?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/timqian/chart.xkcd

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados