Простые диаграммы: какие бывают и как их создавать
2026-02-21 07:01 Diff
https://skillbox.ru/media/design/chart-types/

#подборки

  • 12 июл 2022
  • 0

Простые диаграммы: какие бывают и как их создавать

Десять типов графиков для ваших проектов, отчётов и презентаций.

Иллюстрация: Оля Ежак для Skillbox Media

Пишет о дизайне в Skillbox Media, а в перерывах и сама орудует графическим планшетом. Влюблена в советские шрифты, японскую рекламу и русский язык.

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

В нашей подборке — основные типы диаграмм, которые пригодятся вам для дизайна сайтов, презентаций, инфографик, рекламы и соцсетей.

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

Сравнение доходов и трат по месяцам
Изображение: Md shahin alam / Figma CommunityСравнение торговых сетей по популярности на Карибах
Изображение: Jay Lee / Figma Community

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

Барчарт показывает, насколько прибыльны или убыточны разные сегменты потребительского рынка
Изображение: JakubD / Looker

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

Сравнение объёма продаж разных косметических брендов в четырёх штатах США
Изображение: Anychart

Визуально гистограмма похожа на столбчатый барчарт. Но функция у неё другая — она показывает распределение одной переменной на каком-то временном промежутке. Так можно визуализировать изменения температуры в течение года. Каждый столбик в гистограмме занимает свой отрезок времени на оси координат.

Гистограмма показывает количество рассматриваемых дел в иммиграционных судах США в разные годы
Изображение: Venngage Inc.

Линейная диаграмма показывает динамику изменений переменной в зависимости от какого-то фактора. Так можно показать, например, как меняется уровень сахара в крови утром, днём и вечером в зависимости от съеденных шоколадок в течение дня. Чтобы построить линейный график, на оси координат отмечают значимые точки, а потом соединяют их — и кривая показывает, как данные изменяются от одной контрольной точки к другой.

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

График показывает посещаемость достопримечательностей Шотландии в разные годы
Изображение: Zim Academy

Иногда визуализация получается более точной, если точки не соединять линиями. Потому что линии условны. Посмотрим на график выше: число посетителей зоопарка в период с 1980 по 1985 год, скажем, вряд ли равномерно росло. В какой-то день людей было больше, в какой-то меньше. Эти мелкие изменения невозможно отобразить в таком масштабе — но если бы они были важны зрителю, ровная линия вводила бы в заблуждение.

Вот, например, график, отражающий успехи двух гонщиков на «Формуле-1». Точки показывают их позиции в разных раундах:

Результаты гонок двух участников
Изображение: Efe Akçay / Behance

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

Изображение: Efe Akçay / Behance

Если взять линейный график и залить пространство под ним каким-то цветом, получится диаграмма с областями. По сути, она показывает то же самое, что и график-линия. Разница только в визуализации. Когда мы закрашиваем область каким-то цветом, более наглядно видно объём/количество чего-то.

График показывает объём загружаемых видео в интернет в разные кварталы 2019 и 2020 годов
Изображение: Hubspot

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

Диаграмма показывает хронологию событий. По вертикальной шкале перечисляют сами эти события — список задач. По горизонтальной — временные интервалы. Линии на графике показывают, когда начинается и заканчивается выполнение той или иной задачи.

На диаграмме показан ход проекта по редизайну сайта
Изображение: Venngage Inc.

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

Эту диаграмму также иногда называют «точечная», «диаграмма распределения» или «скаттерплот». Она помогает увидеть зависимость одной переменной от другой. Так можно показать, скажем, как меняется количество часов сна у людей в разном возрасте. Можно даже посмотреть это в разных группах: например, среди жителей разных стран.

У каждой точки на точечной диаграмме две координаты — по оси X и Y. Для обозначения групп, если они есть, используют точки разных цветов.

Диаграмма показывает корреляцию между объёмом инвестиций в интеллектуальную собственность и долей азиатских стран в патентах. Разный цвет точек обозначает патенты в разных сферах
Изображение: Innography / PitchBook / WIPO / McKinsey Global Institute Analysis

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

Диаграмма показывает успехи студента в разных предметах
Изображение: Stack Overflow

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

Это сравнение двух автомобилей по техническим характеристикам
Изображение: Python Charts

Эти диаграммы ещё называют секторными: они показывают доли от целого. Пайчарт — это круг, разделённый на сегменты. Диаграмма-бублик — окружность с пустым центром, также разделённая на сегменты.

Круглые диаграммы спорные в отношении точности визуализации данных. Глядя на доли от окружности, трудно сразу разобраться, насколько одна больше или меньше другой. Эти диаграммы понятны, только если числа значительно различаются: скажем, по кругу можно сравнить 75% и 25%. Но если долей от целого много, а разница между ними не так очевидна, лучше использовать барчарт с накоплением или просто перечислить цифры без визуализации.

Это визуализация данных с помощью пересекающихся кругов. Так можно показать несколько множеств и их пересечения.

Диаграмма показывает, из чего складывается лидерство
Изображение: Wepik

Пересечения показывают, сколько общего есть у этих множеств. Так можно оформить результаты какого-нибудь опроса или показать, какой будет работа, выполненная быстро и дёшево. Можно показывать не только пересечения, но и полную принадлежность одного множества к другому: помещая один маленький круг в более крупный.

Диаграмма показывает государства Британских островов
Изображение: ConceptDraw

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

Как правило, графики никто не рисует руками — для этого используют специальные сервисы:

  • плагины в Figma: Chart Maker, Charts или NB Charts;
  • сервис Datawrapper: в него можно импортировать свои данные и строить даже сложные диаграммы — а потом скачивать их в PNG и использовать в своём дизайне;
  • Raw Graphs — аналогичный инструмент: можно создавать диаграммы и скачивать в разных форматах;
  • ChartBlocks — онлайн-сервис для визуализации данных, где чуть меньше видов диаграмм, зато больше возможностей для кастомизации их дизайна;
  • Google Sheets и Excel — помогут вам сделать график из данных прямо в вашей таблице;
  • инструменты для создания презентаций — у нас есть отдельная подборка.

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

Больше о визуализации данных

Практический курс: «Как зарабатывать на презентациях» Узнать о курсе