Chart-Maker — Веб-приложение для построение графиков и диаграмм в браузере

Онлайн / Офлайн генератор, 29 типов графиков та диаграмм, экспорт в PNG JPEG WEBP AVIF SVG, журнал, подробная инструкция, установка приложения

Пользователям Приложения
Приложение Chart-Maker
Разработчикам Библиотеки
Библиотеки Chart-Maker
Параметры графика
Дополнительно
JSON
Предпросмотр
Как пользоваться — подробная инструкция

Панель «Параметры графика» содержит все элементы управления, а рядом — живой предпросмотр, который обновляется автоматически при каждом изменении. На широком экране они располагаются рядом, а на телефоне — друг под другом: предпросмотр под настройками.

Порядок работы: 1) выберите тип графика; 2) введите заголовок и название набора данных; 3) заполните данные в таблице ниже; 4) при необходимости отмените или повторите изменения; 5) откройте «Экспорт», чтобы скачать картинку или сохранить проект.

Всего 29 тип, сгруппированы по способу ввода данных:

  • Подпись / значение: столбчатая, линейная, с областью, горизонтальная, круговая, кольцевая, радар, полярная, облако слов.
  • Точки X / Y: точечная (X, Y), пузырьковая (X, Y, размер).
  • Несколько наборов: с накоплением, сгруппированная, мультилинейная, комбинированная (у каждого набора свой тип — столбцы или линия).
  • Категория и список значений: ящик с усами, скрипичная.
  • Иерархия: древовидная карта (подпись, значение, группа).
  • Сетка: тепловая карта (X, Y, значение).
  • Потоки: санки (откуда, куда, поток).
  • Карта: картограмма (страна из списка, значение).
  • Столбчатая с погрешностями
  • Свечной / OHLC
  • Воронка
  • Венна
  • Граф (сеть)
  • Индикатор
  • Функция (y = f(x))

Таблица данных подстраивается под выбранный тип. «Добавить строку» добавляет запись, крестик — удаляет.

  • Подпись / значение: подпись и число.
  • Точки: X и Y (для пузырьковой ещё размер).
  • Несколько наборов: категории задаются через запятую, значения каждого набора — списком чисел через запятую; в комбинированной у каждого набора выбирается столбцы или линия.
  • Ящик / скрипичная: в поле значений — список чисел через запятую.
  • Тепловая карта: X, Y (категории) и значение.
  • Санки: откуда, куда и величина потока.
  • Картограмма: страна выбирается из выпадающего списка (названия — на языке интерфейса), плюс значение.
  • Столбчатая с погрешностями: Подпись, Значение, Погрешность.
  • Свечной / OHLC: Дата, O/H/L/C.
  • Воронка: Подпись, Значение.
  • Венна: Множества (через запятую), Значение.
  • Граф (сеть): Узлы (через запятую), Откуда/Куда.
  • Индикатор: Значение, Макс.
  • Тип Функция строит график y = f(x). Введите выражение — например sin(x), x^2, sqrt(x) — диапазон X (мин и макс) и число точек. Функция вычисляет выражение и рисует кривую; формула также показывается в списке данных под графиком.

Кнопка «Экспорт» открывает окно.

  • Формат: PNG, JPEG, WEBP, AVIF (настоящий формат, кодируется в браузере — кодировщик загружается при первом использовании), SVG (вектор) и PDF (страница размером с изображение; кодировщик загружается при первом использовании).
  • Ширина и высота — точный пиксельный размер сохранённого файла; пусто — текущий размер графика.
  • Включить данные — добавляет в изображение список данных под графиком.
  • Скачать изображение — сохраняет картинку с непрозрачным фоном под цвет графика.
  • Печать — открывает диалог печати браузера с графиком как изображением; оттуда можно напечатать или выбрать «Сохранить как PDF».
  • Сохранить проект — файл .json со всеми настройками; флажок «Включить историю и журнал» добавляет их в файл.
  • в combo/multi каждый набор может использовать левую или правую ось Y.

Кнопка «Импорт» открывает окно с зоной, куда можно перетащить файл проекта .json или нажать и выбрать его. После выбора файла кнопка «Применить проект» станет активной и загрузит настройки (а также историю и журнал, если они были сохранены).

  • Ctrl/Cmd + Z — отменить
  • Ctrl/Cmd + Y или Ctrl/Cmd + Shift + Z — повторить
  • Ctrl/Cmd + S — сохранить проект
  • Ctrl/Cmd + E — окно экспорта
  • Ctrl/Cmd + O — окно импорта
  • Ctrl/Cmd + J — журнал
  • Ctrl/Cmd + , — настройки

В полях ввода Ctrl+Z и Ctrl+Y работают как обычное редактирование текста.

  • Отмена / Повтор: откатывают и возвращают изменения данных и параметров.
  • Журнал: хранит действия, подсказки и ошибки; его можно очистить.

Раздел «Дополнительно» над таблицей данных группирует необязательные настройки: подзаголовок; сглаживание, ступенчатые, штриховые и залитые линии; накопительная и логарифмическая ось Y; прореживание; позиция легенды; размер точек и толщина линии; длительность и сглаживание анимации; а также эффекты по требованию — подписи значений, масштаб/панорама, аннотации, линия тренда и перекрестие. В combo и multi каждый набор может использовать левую или правую ось Y. Каждый параметр появляется только для типов, к которым он применим.

Цвета. В блоке «Фон холста» можно задать фон (прозрачный, цвет или изображение) и отдельно переопределить цвета: графика (серии), линий сетки, цифр и подписей на осях, заголовка, текста набора/легенды, а также текста списка данных и его фона. «Сбросить» возвращает все цвета к теме. Всё это сохраняется в проекте.