Создатель линейных графиков

Шаг 1 / 4

Добавьте данные динамики

Сравните от двух до двадцати упорядоченных подписей с одной-четырьмя сериями. Данные остаются в этом браузере.

Подпись

Превратите последовательность значений в понятный линейный график с несколькими сериями. Импортируйте CSV или данные с табуляцией с двумя-двадцатью подписями категорий и одной-четырьмя сериями, затем выберите палитру, сетку, маркеры и сглаживание. График показывает, как значения меняются в общем порядке категорий. Сам график и экспорт SVG, PNG и CSV создаются локально в браузере.

Как создать линейный график

  1. 1

    Подготовьте общий столбец категорий

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

  2. 2

    Импортируйте данные и настройте вид

    Импортируйте CSV или TSV, затем выберите палитру, сетку, маркеры и сглаживание, которые помогают проследить значения, не скрывая рисунок исходных данных.

  3. 3

    Проверьте смысл и экспортируйте

    Убедитесь, что порядок категорий и подписи серий верны, затем скачайте текущий график в SVG или PNG. Экспортируйте и CSV, если читателю нужны точные значения.

Начните с последовательности, которую может объяснить линия

Линейный график полезнее всего, когда порядок категорий имеет смысл: месяцы, этапы проекта, температура в моменты измерения или последовательные версии продукта. Он показывает, как каждая серия меняется в этом общем порядке. Он не объясняет причину изменения, не предсказывает следующее значение и не превращает несвязанные категории в осмысленный тренд.

Оставьте первый столбец для подписей категорий и используйте по одному столбцу для каждой серии. Имена столбцов становятся именами, по которым читатель различает линии.

Вопрос Линейный график помогает, когда На что обратить внимание
Показатель растёт или снижается со временем? Категории представляют упорядоченные периоды, например дни или месяцы Линия соединяет соседние периоды, но не доказывает причинность
Два показателя менялись по-разному? Обе серии используют одинаковые категории и единицы измерения Дайте каждой серии конкретное имя, а не полагайтесь только на цвет
Где произошло изменение? Категории являются последовательными этапами или версиями Используйте маркеры, когда нужно находить отдельные наблюдения
Читателю нужны точные значения? Вы предоставляете CSV или связанную таблицу данных По одной картинке значения приходится оценивать

Пример: регистрации по месяцам

Импортируйте этот CSV, чтобы построить две линии для четырёх месяцев. Первая строка задаёт имя столбца категории и двух серий. Каждая следующая строка содержит категорию и её значения.

Month,Website registrations,Newsletter registrations
January,120,84
February,146,91
March,132,118
April,171,126

Линия регистраций на сайте растёт с января до февраля, снижается в марте и достигает самого высокого показанного значения в апреле. Регистрации на рассылку растут во все показанные месяцы. Если источник использует табуляцию вместо запятых, импортируйте эквивалентные данные TSV: структура остаётся той же.

Маркеры, сетка и сглаживание

Маркеры позволяют легче найти каждое переданное наблюдение. Сетка помогает приблизительно считывать значения, особенно когда линии расположены близко. Сглаживание меняет визуальный путь между наблюдениями, поэтому используйте его осторожно: кривая может сделать промежуточное значение более достоверным на вид, чем позволяют исходные данные. Для дискретных категорий, нерегулярных наблюдений или отчётов, где важна точность, оставляйте маркеры включёнными и публикуйте CSV рядом с изображением.

Сделайте график понятным не только по цвету

Цвет не должен быть единственным способом различить серии. Дайте каждой серии явное видимое имя и предоставьте таблицу или CSV, когда важны точные значения или тренд. Короткий текстовый вывод тоже может описать главное, например какая серия растёт, снижается или меняет направление.

SVG или PNG является визуальным экспортом, но сам по себе не заменяет полную альтернативу для доступности. При публикации графика добавляйте исходные данные и краткое текстовое описание важных связей. Это соответствует рекомендациям W3C: графики относятся к сложным изображениям, которым нужна текстовая альтернатива, а информация не должна передаваться только цветом.

Инструмент обрабатывает данные и создаёт скачиваемые SVG, PNG и CSV локально в браузере. Загрузка страницы остаётся обычным веб-запросом; сохраните экспорт, если хотите оставить график после закрытия вкладки.

Часто задаваемые вопросы

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

Используйте строку заголовков. Поместите подписи категорий в первый столбец, затем по одной именованной серии в каждый следующий столбец. Каждая последующая строка должна содержать одну категорию и значения этих серий.

Используйте маркеры, когда отдельные наблюдения должно быть легко найти. Сглаживание ускоряет чтение общего рисунка, но может намекать на промежуточные значения, которые не измерялись. Сохраняйте несглаженную линию и предоставляйте исходные данные, когда важна точность.

Нет. Он показывает изменение значений в упорядоченных категориях и может выявить закономерности для дальнейшего изучения, но не устанавливает причину, не прогнозирует будущее значение и не оценивает качество данных.

Используйте ясные имена серий, не полагайтесь только на цвет и публикуйте исходный CSV или эквивалентную таблицу с коротким текстовым выводом об основном тренде. Это даёт читателю точные значения без необходимости оценивать их по изображению.

Текущий график можно экспортировать в SVG или PNG, а данные в CSV. Обработка и экспорт создаются локально в браузере; обычная загрузка страницы остаётся стандартным веб-запросом.

Сопутствующие инструменты

Генератор мемов

Создавайте мемы по популярным шаблонам вроде Drake, Distracted Boyfriend или Doge либо загружайте свое изображение. Верхний и нижний текст, шрифт Impact, обводка и тень.

Генератор QR-кодов

Создавайте QR-код из текста или URL в браузере и скачивайте его в PNG.

Изменение размера изображений

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

Создание GIF

Преобразуйте серию изображений или короткое видео в анимированный GIF. Настройте частоту кадров, повторы и размер перед экспортом.

Генератор штрихкодов

Создавайте сканируемые 1D штрихкоды в Code 128, Code 39, EAN-13, UPC-A, ITF-14 и Codabar. Экспортируйте в PNG, SVG или PDF для печати.

WebP в JPG

Конвертируйте изображения WebP в JPG/JPEG прямо в браузере. Выберите качество, объедините прозрачность с цветом фона и скачайте без загрузки файлов на сервер.