Repolode
Предложить
timqian

timqian/chart.xkcd

JavaScript-библиотека для построения линейных и других диаграмм в непринуждённом рисованном стиле комикса xkcd с помощью SVG.

Открыть на GitHubСайт
Звёзды
7,872
Форки
207
Открытые issues
3
Последний коммит
17 дней назад

Что это?

chart.xkcd — JavaScript-библиотека, которая рисует диаграммы в мультяшном, слегка небрежном стиле от руки, вдохновлённом комиксом xkcd. Диаграммы отображаются в одном SVG-элементе на странице: достаточно подключить скрипт и передать ему узел <svg>.

Чтобы создать диаграмму, вызовите конструктор, например chartXkcd.Line, передав ему целевой SVG-элемент, а затем укажите заголовок, подписи осей и объект с данными, содержащий метки и наборы данных. Библиотеку можно подключить через CDN или установить из npm; в проекте также есть сайт с документацией и примерами.

Библиотека подойдёт для неформальных презентаций, публикаций в блогах и схем, которым не нужен строгий корпоративный стиль.

Ключевые возможности

  • 01Рисует линейные и другие типы диаграмм в слегка небрежном стиле от руки.
  • 02Отображает всё содержимое в одном SVG-элементе на странице.
  • 03Настраивается с помощью простого объекта с метками и наборами данных.
  • 04Доступна через CDN или npm в виде обычного браузерного скрипта.
  • 05Поддерживает заголовки и подписи осей X и Y.

Сценарии использования

  • Добавление забавной неформальной диаграммы в публикацию блога или презентацию.
  • Иллюстрация оценок или планов в рисованном стиле без корпоративной строгости.
  • Встраивание простых диаграмм в статическую HTML-страницу без этапа сборки.

Быстрый старт

  1. 1

    Добавьте скрипт chart.xkcd и узел SVG на страницу

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

    Создайте линейный график с помощью new chartXkcd.Line на элементе SVG

В подборках

Фронтенд-фреймворки и UI-компонентыКурсы и инструменты для анализа данных

Темы

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

Частые вопросы

Что такое chart.xkcd?
JavaScript-библиотека для построения линейных и других диаграмм в непринуждённом рисованном стиле комикса xkcd с помощью SVG. chart.xkcd — JavaScript-библиотека, которая рисует диаграммы в мультяшном, слегка небрежном стиле от руки, вдохновлённом комиксом xkcd. Диаграммы отображаются в одном SVG-элементе на странице: достаточно подключить скрипт и передать ему узел <svg>.
chart.xkcd можно использовать бесплатно? Какая у него лицензия?
chart.xkcd распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
chart.xkcd всё ещё поддерживается?
Активно поддерживается. Последний коммит в chart.xkcd — 21 окт. 2026 г..
Для чего можно использовать chart.xkcd?
Добавление забавной неформальной диаграммы в публикацию блога или презентацию. Иллюстрация оценок или планов в рисованном стиле без корпоративной строгости. Встраивание простых диаграмм в статическую HTML-страницу без этапа сборки.
Как установить chart.xkcd?
Добавьте скрипт chart.xkcd и узел SVG на страницу: <script src="https://cdn.jsdelivr.net/npm/chart.xkcd@2/dist/chart.xkcd.min.js"></script> Создайте линейный график с помощью new chartXkcd.Line на элементе SVG
Где скачать chart.xkcd?
Исходный код и инструкции по установке — на GitHub: https://github.com/timqian/chart.xkcd

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты

PhilJay / MPAndroidChart

Библиотека графиков для Android: линейные, столбчатые, круговые, радарные, пузырьковые и свечные диаграммы с масштабированием, прокруткой и анимацией, а также модуль Jetpack Compose.

Фронтенд и UI#android#charts#data-visualization
38,2 тыс.9 тыс.KotlinApache-2.0Активно поддерживаетсяОбновлён 29 дней назад