1. Начните с вопроса, а не с меню диаграмм
Один набор данных можно показать несколькими способами. Если нужно найти самый крупный канал, удобны упорядоченные столбцы. Если понять, как менялось число заказов по дням, — линия или столбцы по времени. Если сравнить состав заказов за две недели, — полосы, каждая из которых соответствует 100%.
Выбор начинается с предложения «Я хочу, чтобы читатель увидел…». Если продолжить его сложно, возможно, на экране пока нет ясного вопроса. Не обязательно добавлять график: для проверки точных сумм небольшая таблица часто удобнее.
| Вопрос | С чего начать | Что важно сохранить |
|---|---|---|
| Какая группа больше? | Горизонтальные столбцы | Общий ноль и понятный порядок |
| Как меняется показатель? | Линия или столбцы по времени | Последовательность дат, пропуски, единицы |
| Из чего состоит итог? | Полоса с долями | Состав целого и его размер |
| Как разбросаны значения? | Гистограмма | Границы интервалов и единица наблюдения |
| Связаны ли два показателя? | Диаграмма рассеяния | Что означает точка; связь не доказывает причину |
| Какое точное значение? | Таблица или карточка | Подпись, период и формат числа |
2. Договоримся о данных примера
Продолжим учебный пример магазина из первой статьи: за 5–11 октября 2026 года было 1 475 оплаченных заказов, за 28 сентября — 4 октября — 1 638. Недели завершены, время московское. Каждый заказ учитывается один раз по уникальному ID, по времени полной оплаты.
Для этой статьи отдельно зададим учебные распределения по каналам, дням и типам покупателей. Раньше этих подробностей в примере не было: мы не восстановили их из недельного итога, а создали для иллюстрации. Суммы по каналам и дням сверяются с теми же 1 475 заказами.
Все макеты ниже статические. Числа подписаны прямо на графиках, чтобы смысл не зависел от наведения мыши. Под каждым примером есть объяснение оформления.
3. Сравнить группы: горизонтальные столбцы
Вопрос: «Какой канал связан с наибольшим количеством оплаченных заказов?» В нашем примере у каждого заказа ровно один канал: последний известный непрямой переход за 30 дней до оплаты; при его отсутствии — прямой заход. Это условное правило примера, а не описание настроек какой-либо системы аналитики.
Почему это удобно читать
Названия расположены горизонтально, поэтому их не нужно поворачивать мысленно. Столбцы идут от большего к меньшему: лидер виден сразу. Общая начальная линия позволяет сравнивать длины. Один спокойный оттенок сохраняет внимание на величине, а точные значения справа помогают проверить разницу.
В макете верхняя граница шкалы — 650 заказов. Это техническая отметка, а не результат измерения. Она оставляет место справа от наибольшего значения. Полосы пропорциональны числам и начинаются от нуля.
Из этого графика нельзя заключить, что поиск — самый выгодный канал. Для такого решения понадобятся расходы, качество заказов, возвраты и правила распределения результата. Заголовок «Самый эффективный канал» обещал бы больше, чем показывают данные.
Сортировка по величине тоже подходит не всегда. Возрастные группы, этапы процесса и месяцы обычно лучше сохранять в естественном порядке.
4. Показать динамику: линия с ясными подписями
Вопрос: «Как распределялись заказы внутри недели?» Расположим дни по времени и подпишем значения. Для семи точек это ещё не перегружает график. На длинном ряду можно оставить меньше подписей, выделить важные точки и дать доступ к таблице.
Посмотреть числа таблицей
| День | Заказы |
|---|---|
| Пн | 193 |
| Вт | 207 |
| Ср | 198 |
| Чт | 219 |
| Пт | 231 |
| Сб | 246 |
| Вс | 181 |
| Итого | 1 475 |
Что делает линию аккуратной
Лёгкие горизонтальные направляющие помогают оценить уровень. Вертикальные линии здесь не нужны: дней немного, подписи хорошо различимы. Точки обозначают фактические наблюдения, а соединяющие их отрезки помогают увидеть последовательность. Изгибы между днями не сглажены: плавная кривая могла бы создать видимость неизвестных нам промежуточных значений.
Здесь подойдут и вертикальные столбцы: каждый день — отдельный завершённый интервал. Линия удобна, когда важен ход изменения, столбцы — когда нужно подчеркнуть объём каждого периода. Выбирайте по вопросу и привычкам читателя.
Если данные за среду не загрузились, нельзя ставить ноль: это выглядело бы как отсутствие заказов. Покажите пропуск и поясните его. Если интервал не завершён, обозначьте это рядом с графиком и не сравнивайте его итог с полным периодом без оговорки.
По одной неделе нельзя утверждать, что по воскресеньям продажи всегда падают. Нужны другие недели и проверка условий: акции, доступность товаров, праздники, сбои и полнота данных.
Ещё три варианта: от эффектного обзора до компактной карты
Одни и те же данные можно подать с разным характером. Ниже — три самостоятельных примера оформления: тёмная обзорная карточка, светлый график с точками и компактная тепловая карта. Выбирайте их по вопросу читателя, а не только по внешнему виду.
Для сравнения добавлены вымышленные распределения предыдущей недели. Их сумма — 1 638 заказов; текущей — 1 475. Это дополнительные учебные данные, а не результаты реального магазина.
Две недели — один ритм?
Оплаченные заказы · сравнение по дням недели
−9,95% к предыдущей неделе
Когда подходит тёмная карточка
Для обзорного экрана с небольшим количеством крупных графиков. Светлая линия хорошо заметна, а мягкая заливка добавляет глубину. Шкала начинается от нуля; градиент не обозначает ещё один показатель. Предыдущий период показан пунктиром, поэтому ряды различимы не только по цвету.
Сравниваются одинаковые дни недели, а не совпадающие календарные даты. В рабочем отчёте нужно проверить праздники, акции и полноту периодов. Не используйте тёмный фон только для одного случайного блока, если он не должен привлекать особое внимание.
Где потеряли больше заказов
Два периода на одной шкале · количество заказов
Когда удобны соединённые точки
Когда важно увидеть сразу два значения и расстояние между ними. Кружки обозначают периоды, соединяющий отрезок — размер изменения. Стрелки здесь не нужны: порядок периодов задают подписи. Справа вынесена абсолютная разница, чтобы не заставлять читателя считать в уме.
В отличие от столбцов, здесь величина передаётся положением точки. Не растягивайте каждую строку по собственной шкале: в этом примере шкала общая, от 0 до 650 заказов. Канал со снижением на 71 заказ не обязательно хуже остальных по окупаемости.
Неделя в одном взгляде
Чем насыщеннее ячейка, тем больше оплаченных заказов
Когда полезна тепловая карта
Когда нужно компактно показать повторяющийся рисунок: дни по неделям, часы по дням или категории по периодам. Для двух недель это демонстрация оформления; на более длинной истории такая форма может помочь заметить повторяемость.
Цветовая шкала должна быть общей. Если каждую строку красить относительно её собственного максимума, разница между неделями исчезнет. Пропуск показывают отдельным нейтральным состоянием, а не цветом нулевого значения.
Все данные для проверки этих трёх вариантов
| День | 28 сентября — 4 октября | 5–11 октября |
|---|---|---|
| Пн | 224 | 193 |
| Вт | 238 | 207 |
| Ср | 217 | 198 |
| Чт | 251 | 219 |
| Пт | 263 | 231 |
| Сб | 272 | 246 |
| Вс | 173 | 181 |
| Итого | 1 638 | 1 475 |
Как выбрать: линия — для хода изменения, соединённые точки — для сравнения двух периодов в группах, тепловая карта — для поиска повторяющихся участков. Их можно сочетать, если каждый отвечает на свой вопрос.
6. Два полезных графика, которые часто забывают
Гистограмма: что скрывается за средним
Средний чек может вырасти из-за нескольких крупных заказов, хотя большинство покупателей тратят столько же. Гистограмма группирует чеки по диапазонам и показывает, сколько заказов попало в каждый. По горизонтали — интервалы суммы, по вертикали — число заказов.
Начните с одинаковой ширины интервалов и подпишите границы так, чтобы одно значение попадало только в один диапазон. Для неравных интервалов обычные высоты количества могут вводить в заблуждение: потребуется другое представление, например плотность, где количество отражает площадь. Не выбирайте интервалы только ради красивой формы.
Диаграмма рассеяния: есть ли связь
Каждая точка может обозначать день: по горизонтали расходы на рекламу, по вертикали оплаченные заказы. Такое представление помогает увидеть совместное изменение и необычные дни. Но связь ещё не доказывает, что дополнительные расходы вызвали дополнительные заказы: на оба показателя могли повлиять сезонность или акция.
Подпишите единицу наблюдения и проверьте задержку между расходом и оплатой. Если платежи приходят через несколько дней, сопоставление только внутри одной даты может скрывать связь или давать неверное впечатление.
7. Как красивый график может обмануть
- Обрезанный ноль у обычных столбцов. Их длина передаёт величину. Если начать шкалу почти у минимального значения, небольшое отличие будет выглядеть огромным. Для маленьких различий можно выбрать точки на явно подписанной шкале.
- Слишком узкая шкала линии. Линейный график иногда можно начинать не с нуля, чтобы увидеть небольшие колебания. Но подписи и диапазон должны быть очевидными. Не превращайте незначительное движение в визуальную катастрофу.
- Две независимые вертикальные шкалы. Линии расходов и заказов могут казаться совпадающими из-за выбранных диапазонов. Часто понятнее два графика друг под другом с общей осью времени.
- Объёмные эффекты и тени. Перспектива затрудняет оценку длины и площади. Плоские формы, аккуратные подписи и свободное пространство обычно дают более ясный результат.
- Скрытые категории. Если показываете только лидеров, обозначьте оставшиеся как «Прочие» или явно подпишите ограничение. Иначе читатель примет часть данных за весь итог.
- Сравнение процентов без размера групп. Одинаковая конверсия при разных количествах наблюдений не означает одинаковую точность. Покажите знаменатель, а при оценке эффекта — неопределённость.
8. Соберите единый стиль графиков
В примерах повторяются молочный фон карточки, спокойный синий для данных, светлая сетка и тёмные подписи. Это связывает графики между собой. Более насыщенный цвет можно оставить для выбранной группы, а остальные сделать спокойнее, если сравнение остаётся различимым.
Сначала заголовок с вопросом или наблюдением, затем период и единицы, ниже сам график. Короткое пояснение после него сообщает, что можно заключить и где проходит граница вывода. Если заголовок описывает результат, в рабочем отчёте он должен обновляться вместе с фильтрами и данными.
Убирайте легенду, когда подпись можно поставить прямо у ряда. Сохраняйте цвета одной категории на разных экранах. Не используйте один и тот же синий для поиска на одной странице и рекламы на другой, если читатель должен переносить смысл цвета между ними.
На телефоне проверьте не только размер картинки, но и читаемость чисел. Длинный временной ряд можно показать с прокруткой внутри блока или отдельным мобильным представлением. Ключевые значения и пояснения должны быть доступны без наведения мыши.
9. Проверьте график до публикации
- Сформулируйте вопрос одним предложением.
- Убедитесь, что единица наблюдения, период и единицы измерения понятны.
- Сверьте исходные числа, итоги и проценты.
- Проверьте начало шкалы, порядок категорий и пропуски.
- Посмотрите, не обещает ли заголовок причинного объяснения без доказательств.
- Откройте график на узком экране и проверьте подписи.
- Попросите человека объяснить увиденное без ваших подсказок.
Практическое задание: возьмите один свой график и сделайте два варианта с теми же числами. В первом подчеркните сравнение групп, во втором — точные значения. Проверьте на конкретном вопросе, какой вариант помогает ответить увереннее. Красота здесь складывается из ясного порядка, аккуратных деталей и честного представления данных.
Хороший график помогает увидеть главное
Не нужно искать необычную диаграмму для каждого показателя. Несколько простых форм, последовательно оформленных и правильно подписанных, могут сделать дашборд и красивым, и полезным.
Материалы о дашбордах