---
title: "Графики"
id: "1339"
type: "page"
slug: "charts"
published_at: "2026-08-15T23:32:26+00:00"
modified_at: "2026-10-17T12:50:57+00:00"
url: "https://pastukhov.com/agents/analytics/docs/charts/"
markdown_url: "https://pastukhov.com/agents/analytics/docs/charts.md"
excerpt: "Графики строятся на ECharts. Всего 28 типов диаграмм — от привычных линий и столбцов до…"
---

# Графики

[https://pastukhov.com/agents/analytics/docs/charts/.md](https://pastukhov.com/agents/analytics/docs/charts/.md)

Графики строятся на ECharts. Всего 28 типов диаграмм — от привычных линий и столбцов до воронок, карт и диаграмм связей. Данные берутся из SQL-запросов к подключённым источникам, а внешний вид настраивается переопределениями оформления.

## Линии и столбцы

- **Линейный график** (`LineChartContent`) — как величина меняется во времени: выручка, трафик, цена. Поддерживаются несколько серий, сглаживание, заливка области под линией, шаги для «стоит на месте, потом скачок» (тарифы, складские остатки) и приведение кривых разного масштаба к 100;
- **Столбчатая диаграмма** (`BarChartContent`) — сравнение категорий между собой: каналы, товары, регионы. Столбцы складываются в стеки, есть 100-процентный стек для состава, сортировка и топ-N для длинных списков;
- **Комбинированная диаграмма** (`ComboChartContent`) — столбцы одного показателя и линия другого на двух осях с подписями: расход и его доля, объём продаж и средний чек.

## Сравнение: план против факта

- **Гантельная диаграмма** (`DumbbellChartContent`) — две точки на одну сущность, соединённые линией: план и факт, «до» и «после», оценка и реальность. Длина и направление отрезка показывают разрыв, подписи — величину расхождения: удобно сравнивать поставщиков, менеджеров, площадки;
- **Пулевая диаграмма** (`BulletChartContent`) — полоса значения против отметки цели и цветных коридоров допуска: укладывается ли показатель в норму. Цвет сам зависит от того, что лучше — больше цели или меньше;
- **Наклонная диаграмма** (`SlopeChartContent`) — одна линия на сущность между двумя периодами: как изменился рейтинг или значение. Падающие линии красные, растущие зелёные, видно и обгон, и смену мест;
- **Диаграмма Парето** (`ParetoChartContent`) — категории по убыванию с линией накопленной доли: сколько немногих позиций дают большую часть потерь или выручки. Пунктир по умолчанию стоит на 80%.

## Состав, доли и потоки

- **Кольцевая диаграмма** (`DoughnutChartContent`) — доли целого: внутренний и внешний радиус, легенда, режим розовой диаграммы для наглядности мелких секторов;
- **Дерево** (`TreemapChartContent`) — доли целого прямоугольниками: честная замена кругу, когда частей много и секторы становятся неразличимы. Родительская колонка вкладывает категории друг в друга, режим «солнечные лучи» раскладывает то же дерево кольцами;
- **Диаграмма-водопад** (`WaterfallChartContent`) — из чего сложился итог: цена → скидки → комиссии → прибыль. Каждый столбец — шаг со знаком, последний показывает итог;
- **Диаграмма потоков** (`SankeyChartContent`) — куда перетекают деньги или товары: ширина ленты равна объёму. Если данные образуют кольцо, график честно предупредит вместо кривой картинки.

## Распределения

- **Гистограмма** (`HistogramChartContent`) — как распределены значения одной числовой колонки: где основная масса, а где длинный хвост. Расчёт идёт на сервере (`POST /api/query/histogram`) — данные не гоняются в браузер целиком;
- **Диаграмма размаха** (`BoxPlotChartContent`, box plot) — медиана, квартили и выбросы: сравнить разброс между группами. Квартили считаются на сервере (`POST /api/query/boxplot`);
- **Диаграмма-скрипка** (`ViolinChartContent`) — полная форма распределения по каждой группе: два горба, очередь, тяжёлый хвост, которых диаграмма размаха не показывает. Режим «пчелиный рой» рисует по точке на каждое наблюдение;
- **Тепловая карта** (`HeatmapContent`) — плотность значений по двум колонкам: каждая ячейка окрашена по величине;
- **Календарная тепловая карта** (`CalendarHeatmapContent`) — каждый день в клетке календаря, цвет — по значению: дневной ритм (всплески в будни, тихие выходные), который месячная сводка стирает.

## Воронки, сроки и чувствительность

- **Воронка** (`FunnelChartContent`) — этапы сужающимися полосами: сколько людей доходит до каждого шага и сколько теряется между ними (просмотры → корзина → заказ). Порядок этапов берётся из запроса;
- **Диаграмма Ганта** (`GanttChartContent`) — полосы «с даты по дату» на каждой строке, с вертикальной отметкой сегодняшнего дня: сезонные окна, планы поставок, сроки возвратов. Цвет полосы задаёт колонка состояния;
- **Диаграмма-торнадо** (`TornadoChartContent`) — какой фактор сильнее всего двигает результат: полоса на каждый фактор показывает исход при худшем и лучшем значении. Сверху — самый влиятельный.

## Профили и география

- **Лепестковая диаграмма** (`RadarChartContent`) — профиль объекта по 3–8 критериям: кандидаты сравниваются не строками таблицы, а формой. Область можно заливать цветом;
- **Параллельные координаты** (`ParallelCoordinatesChartContent`) — своя ось на каждый показатель, своя линия на каждый объект: сразу видно, у кого ровно хорошо, а у кого провал по одному показателю при хороших остальных;
- **Диаграмма Венна** (`VennChartContent`) — пересечение двух или трёх групп: сколько клиентов общие, сколько уникальны. Площадь круга — размер группы, линза — пересечение;
- **Карта регионов** (`MapChartContent`) — 85 субъектов России или 176 стран мира, окрашенных по значению: когда история географическая, картинка и есть ответ. Названия регионов сопоставляются с картой, нераспознанные перечисляются под ней.

## Связи и состояния

- **Граф связей** (`NodeGraphChartContent`) — узлы и рёбра по списку связей: кто с кем и насколько тесно (толщина ребра). Узлы можно перетаскивать;
- **Таймлайн состояний** (`StateTimelineChartContent`) — цветные интервалы по каждой метке: когда показатель был в каком состоянии;
- **История состояний** (`StatusHistoryChartContent`) — сетка ячеек по времени: дискретные периоды для каждой метки, вся лента состояний разом.

Оба хороши вместе с оповещениями: переходы правил «спокойно → ожидание → сработало → восстановилось» видны прямо в отчёте.

## Финансовые ряды и зависимости

- **Свечи** (`CandlestickChartContent`) — финансовые ряды open/high/low/close с объёмом торгов из ваших баз;
- **Точечная диаграмма** (`ScatterChartContent`) — связь двух числовых колонок: цена и спрос, конверсия и расход. Размер точки задаёт третья колонка (`zValueColumn`), цвет — колонка-разделитель (`colorColumn`); линия тренда показывает направление связи, опорные линии — пороги и границы.

## Шкалы и приборы

- **Гейдж** (`GaugeContent`) — метрика в виде спидометра с нижней и верхней границей шкалы;
- **Линейка-гейдж** (`BarGaugeContent`) — ранжированный ряд значений, каждый столбик окрашен по порогам: рейтинги, нормативы, светофор по списку.

## Общие возможности

Общие возможности есть у всех графиков, независимо от типа:

- **Опорные линии и коридоры** — норма, цель, граница допуска: линия на фиксированном значении, на статистике по самим данным (медиана, 10-й и 90-й процентили) или на значении из колонки запроса. Коридор задаётся двумя границами. Проверка «укладываемся ли в норму» читается с картинки, а не считается в голове;
- **Отмеченные события** — вторая короткая таблица с датами и подписями: на графике появляются точки-метки и затенённые периоды — акции, сбои, праздники, смена тарифа. Причина провала или всплеска видна рядом с самим провалом;
- **Интервалы** — у столбцов и точек «усы» доверительного интервала, у линий — полоса по каждой серии: пессимистичный и оптимистичный сценарий вокруг основной кривой;
- **Подписи значений и отмеченные точки** — числа прямо на графике (когда их немного), а выбросы выделяются значком с пояснением: видно и сам скачок, и чем он вызван;
- **Сравнение с прошлым** — пунктирная линия-«призрак» того же показателя неделю, месяц или год назад и сглаживание скользящим средним: тренд виден, а недельный шум не мешает;
- **Разрезы панелями** — одна и та же картинка по каждому каналу, категории или складу: набор небольших графиков в общем масштабе, по которым ряды сравниваются честно;
- **Настройка осей** — своя подпись и формат оси, нижняя и верхняя граница, логарифмическая шкала, перевёрнутая ось для мест и рейтингов, сортировка и топ-N с честной пометкой, сколько категорий скрыто, а также временная ось, которая оставляет разрывы вместо сжатия пропущенных дней;
- **Всплывающие подсказки** — можно дополнить колонками запроса: при наведении видно не только значение, но и контекст (например, число клиентов рядом с суммой), а на точечной диаграмме точка подписывается именем.

Заголовки и легенды есть у каждого графика, а внешний вид меняется без правки запроса — переопределениями оформления: цвета по порогам, стили линий и точек, скрытие серий. Подробнее — в разделе [Оформление](/agents/analytics/docs/overrides)
.

[← Оглавление документации](/agents/analytics/docs)