Построить график онлайн
Столбчатые, линейные и круговые диаграммы: вставьте данные, скачайте PNG или SVG.
- Мгновенно
- Бесплатно
- Приватно (обработка локально)
- Без регистрации
Построить график онлайн по своим данным
С этим инструментом можно за несколько секунд построить график онлайн или диаграмму: столбчатую, линейчатую (с горизонтальными полосами), с накоплением, с областями, круговую или кольцевую, а также обычный линейный график. Введите числа в таблицу (до 50 строк и 6 рядов) или вставьте диапазон, скопированный из Excel, Google Таблиц или CSV-файла. Предпросмотр перерисовывается при каждом изменении, а результат можно скачать в PNG или SVG либо скопировать в буфер обмена.
Не нужно открывать электронную таблицу и регистрироваться: это быстрый способ проиллюстрировать реферат, курсовую или диплом, подготовить слайд к совещанию, опубликовать картинку в соцсетях или следить за продажами и бюджетом небольшого бизнеса. Изображения получаются чистыми, без водяных знаков, с круглыми значениями на осях и числами в русском формате (1 234,5; 12 %).
-
Выберите тип диаграммы
Нажмите «Столбчатая», «Линейчатая», «С накоплением», «График», «С областями», «Круговая» или «Кольцевая». Круговая и кольцевая диаграммы берут первый ряд таблицы.
-
Введите или вставьте данные
На вкладке «Данные» заполните таблицу (подписи в столбце 1, по столбцу на ряд) или откройте «Вставить таблицу» и нажмите «Импортировать и заменить». Кнопки «Добавить строку», «Добавить ряд» и «Поменять строки и столбцы» перестраивают таблицу.
-
Добавьте заголовки и оформление
Вкладка «Заголовки и оси» задаёт заголовок, подзаголовок и названия осей; «Оформление» управляет цветами, легендой, форматом чисел (префикс, суффикс, знаки после запятой), размером текста и подписями значений.
-
Экспортируйте изображение
Выберите «Размер изображения» (16:9, квадрат, вертикальный или 4:3) и «Фон», затем нажмите «Скачать PNG», «Скачать SVG» или «Копировать изображение», чтобы вставить его в документ.
Как строится диаграмма
Диаграмма рисуется в формате SVG движком, написанным специально для этого сайта, без сторонних библиотек. Шкалы, подписи и цвета пересчитываются при каждом изменении, чтобы изображение оставалось читаемым при любом объёме данных.
- Круглые деления шкалы: шаг сетки равен 1, 2 или 5, умноженным на степень десяти (0, 20, 40, 60, 80), по методу «nice numbers», описанному Полом Хекбертом в сборнике Graphics Gems (1990).
- Ось от нуля: столбцы и полосы всегда начинаются с нуля, ведь их длина должна быть пропорциональна значению; отрицательные значения уходят ниже базовой линии. Для графиков и областей можно снять флажок «Ось от нуля», чтобы лучше видеть колебания.
- Подписи без наложений: названия категорий переносятся на две строки, наклоняются на 45° или выводятся через одну, если места мало; маленькие секторы круговой диаграммы получают внешнюю подпись с выноской.
- Сглаженные линии: при включённой одноимённой опции монотонная интерполяция (метод Штеффена) проходит через каждую точку и не создаёт пиков и провалов, которых нет в данных.
- Числа по-русски: пробел между разрядами и десятичная запятая, автоматическое сокращение больших чисел (12 тыс., 1,2 млн), свободные префикс и суффикс (₽, $, %, кг) с неразрывным пробелом.
- Точный экспорт: SVG использует явно заданные цвета и системный шрифт; PNG создаётся из этого же SVG ровно в выбранном размере (например, 1200 × 675 пикселей), а с опцией высокого разрешения вдвое больше (2400 × 1350).
Какую диаграмму выбрать для ваших данных?
| Задача | Тип диаграммы | Как лучше | Чего избегать |
|---|---|---|---|
| Сравнить значения по категориям | Столбчатая | Ось от нуля, не больше 12 категорий, логичный порядок | Обрезанной оси: вдвое более высокий столбец должен означать вдвое большее значение |
| Ранжировать элементы с длинными названиями | Линейчатая | Сортировать от большего к меньшему | Алфавитного порядка, когда нужно показать рейтинг |
| Показать меняющуюся структуру | С накоплением | От 2 до 4 рядов, самый важный внизу | Слишком многих сегментов: хорошо сравниваются только сумма и нижний ряд |
| Показать динамику во времени | График | Равные интервалы, не больше 5 линий | Соединения линией категорий без порядка (страны, товары) |
| Подчеркнуть объём во времени | С областями | От 1 до 3 рядов, ось от нуля | Наложения множества рядов, которые закрывают друг друга |
| Показать долю каждого элемента в целом | Круговая или кольцевая | Не больше 6 секторов, проценты на диаграмме | Почти равных секторов и отрицательных значений |
Классические правила визуализации данных: если сомневаетесь, отсортированная линейчатая диаграмма читается легче всего.
Где пригодится этот конструктор диаграмм
- Учёба: аккуратный график для реферата, курсовой, диплома или лабораторной работы, готовый к вставке в Word или Google Документы.
- Совещания и презентации: формат 16:9 для PowerPoint или Google Презентаций, прозрачный фон для цветного шаблона.
- Соцсети: квадрат 1080 × 1080 или вертикальный 1080 × 1350 для постов, крупный текст с помощью «Размер текста».
- Малый бизнес и НКО: продажи по месяцам, распределение бюджета, посещаемость, без подписки на программы.
- Блог, рассылка, статья: SVG весом в несколько килобайт, идеально чёткий на экранах высокой плотности.
Частые ошибки и как их исправить
- Ряды и категории перепутаны: если по горизонтальной оси идут годы, а не месяцы, нажмите «Поменять строки и столбцы».
- Красные ячейки: в них текст («12 кг», «около 40»), и они пропускаются; оставьте только число, а единицу укажите в поле «Суффикс».
- Слишком много секторов: если их больше шести, объедините мелкие значения в строку «Прочее» или перейдите на линейчатую диаграмму.
- Слишком похожие цвета: фиолетовая палитра состоит из оттенков одного цвета; если рядов больше трёх, выберите «Яркая (для дальтоников)» или задайте цвет ряда, нажав на цветной квадратик в заголовке таблицы.
- Текст не читается на телефоне: для картинки в соцсети выберите квадратный или вертикальный формат и размер текста «Крупный».
Все вычисления выполняются в вашем браузере: данные не покидают устройство, регистрация не нужна. Локальная копия последней диаграммы хранится в хранилище браузера (кнопка «Пример» её удаляет). Ограничения: 50 строк и 6 рядов (поэтому поменять строки и столбцы можно, только если строк не больше шести); круговая и кольцевая диаграммы используют только первый ряд и пропускают нулевые и отрицательные значения; SVG отображается системным шрифтом, поэтому на другом компьютере может выглядеть немного иначе (PNG не меняется).
Частые вопросы
Как построить график по таблице Excel?
Выделите диапазон в Excel или Google Таблицах (подписи в первом столбце, названия рядов в первой строке) и скопируйте его сочетанием Ctrl+C (Cmd+C на Mac). Вставьте его в блок «Вставить таблицу» и нажмите «Импортировать и заменить»: строка заголовков и столбец подписей распознаются автоматически, как и десятичная запятая и пробелы между разрядами. Чтобы дополнить уже заполненную таблицу, можно вставить блок ячеек без заголовков прямо в ячейку: он заполнится начиная с неё.
Какую диаграмму выбрать для процентов?
Чтобы показать долю каждого элемента в целом, подходит круговая или кольцевая диаграмма, если секторов не больше пяти-шести. Если их больше или доли близки, лучше линейчатая диаграмма, отсортированная по убыванию: длины мы сравниваем гораздо точнее, чем углы. Чтобы показать, как структура меняется со временем, используйте столбцы с накоплением.
В каком формате скачивать: PNG или SVG?
PNG подходит почти для всего: это растровое изображение, которое открывается в Word, PowerPoint, Google Презентациях, почте и соцсетях. SVG хранит график в векторном виде: он остаётся чётким при любом размере, весит несколько килобайт и редактируется в Inkscape, Illustrator или Figma. Для плаката или печати включите «PNG высокого разрешения (×2)» или используйте SVG.
Как вставить диаграмму в Word, PowerPoint или Google Презентации?
Быстрее всего нажать «Копировать изображение», а затем Ctrl+V (Cmd+V на Mac) в документе. Можно также скачать PNG и выбрать «Вставка > Рисунки» (в Google Презентациях «Вставка > Изображение»). Word и PowerPoint (Microsoft 365, Office 2019 и новее) принимают и SVG, который остаётся чётким при увеличении; Google Презентации SVG не импортируют, поэтому там используйте PNG.
Как сделать диаграмму понятной для людей с дальтонизмом?
Примерно каждый двенадцатый мужчина плохо различает некоторые красные и зелёные оттенки. Выберите палитру «Яркая (для дальтоников)»: она основана на палитре Окабе и Ито, которая остаётся различимой при самых распространённых формах дальтонизма. Сохраните легенду и по возможности показывайте значения, чтобы смысл не держался только на цвете.
Это бесплатно? Мои данные никуда не отправляются?
Да, сервис полностью бесплатный, без регистрации и без водяных знаков на экспортированных изображениях. Диаграмма рассчитывается и рисуется в вашем браузере, поэтому цифры не отправляются ни на какой сервер. На устройстве хранится только локальная копия, чтобы вы могли вернуться к последней диаграмме; кнопка «Пример» её удаляет.