github-actions[bot]
001c2097a3
Created by Github action <!-- mintlify-editor-comments:start --> Mintlify --- 0 threads from 0 users in Mintlify - No unresolved comments <!-- mintlify-editor-comments:end --> <!-- mintlify-comment--> <a href="https://dashboard.mintlify.com/twenty/twenty/editor/i18n-docs?source=pr_comment" target="_blank" rel="noopener noreferrer"><picture><source media="(prefers-color-scheme: dark)" srcset="https://d3gk2c5xim1je2.cloudfront.net/assets/open-mintlify-editor-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://d3gk2c5xim1je2.cloudfront.net/assets/open-mintlify-editor-light.svg"><img src="https://d3gk2c5xim1je2.cloudfront.net/assets/open-mintlify-editor-light.svg" alt="Open in Mintlify Editor"></picture></a> <!-- /mintlify-comment --> Co-authored-by: github-actions <github-actions@twenty.com>
276 lines
19 KiB
Plaintext
276 lines
19 KiB
Plaintext
---
|
||
title: Настройки диаграмм
|
||
description: Настройте диаграммы, чтобы показывать данные именно так, как вам нужно.
|
||
---
|
||
|
||
import { ChartIcon } from '/snippets/chart-icon.mdx';
|
||
|
||
## Доступ к настройкам диаграмм
|
||
|
||
1. Нажмите кнопку **Редактировать** в правом верхнем углу дашборда
|
||
|
||
<img src="/images/user-guide/dashboard/dashboard-edit.png" alt="Режим редактирования" />
|
||
|
||
2. Панель переходит в режим редактирования
|
||
3. Нажмите на любой виджет, чтобы выбрать его
|
||
4. Справа откроется панель настроек
|
||
|
||
Настройки сгруппированы по разделам:
|
||
|
||
* **Данные**: какие данные получать и как их фильтровать
|
||
* **Ось X**: как группировать и сортировать категории (столбчатые/линейные диаграммы)
|
||
* **Ось Y**: что измерять и как отображать (столбчатые/линейные диаграммы)
|
||
* **Стиль**: цвета, подписи и визуальные параметры
|
||
|
||
<Note>
|
||
Некоторые настройки отображаются только после задания других настроек. Например, **Детализация по дате** появляется только при выборе поля даты.
|
||
</Note>
|
||
|
||
---
|
||
|
||
## Настройки данных
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="database" />Источник </span>
|
||
|
||
Выберите объект, из которого получать данные.
|
||
|
||
1. Нажмите **Источник**
|
||
2. Выберите объект (Сделки, Люди, Компании и т. д.)
|
||
|
||
Доступны все ваши стандартные и пользовательские объекты. Изменение источника сбрасывает другие настройки, поскольку параметры полей зависят от выбранного объекта.
|
||
|
||
<img src="/images/user-guide/dashboard/dashboard-chart-settings-source.png" alt="Источник" />
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="filter" />Фильтр </span>
|
||
|
||
Ограничьте, какие записи включать в диаграмму.
|
||
|
||
1. Нажмите **Фильтр**
|
||
2. Откроется конструктор фильтров
|
||
3. Нажмите **+ Добавить фильтр**
|
||
4. Выберите поле, условие и значение
|
||
5. При необходимости добавьте ещё фильтры
|
||
|
||
Фильтры работают так же, как в табличных представлениях. Используйте их, чтобы сосредоточиться на конкретных сегментах данных.
|
||
|
||
**Пример**: отфильтруйте сделки, где этап равен "Won", чтобы показать только закрытые сделки.
|
||
|
||
<img src="/images/user-guide/dashboard/dashboard-chart-settings-filters.png" alt="Фильтр" />
|
||
|
||
<Tip>
|
||
Для полей даты используйте **Относительно**, чтобы создать динамические фильтры вроде "За последние 7 дней" или "Этот месяц", которые обновляются автоматически.
|
||
</Tip>
|
||
|
||
<Tip>
|
||
Поддерживаются расширенные фильтры — добавляйте несколько правил фильтрации и комбинируйте их логикой **И** или **ИЛИ**.
|
||
</Tip>
|
||
|
||
---
|
||
|
||
## Настройки оси X
|
||
|
||
Эти настройки управляют горизонтальной осью столбчатых и линейных диаграмм — обычно тем, как ваши данные группируются по категориям.
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="axis-x" />Отображаемые данные </span>
|
||
|
||
Выберите поле, по которому группировать данные. Это определяет категории, отображаемые на оси X.
|
||
|
||
**Пример**: выберите "Stage", чтобы видеть данные, сгруппированные по этапам воронки, или "Created date", чтобы видеть данные во времени.
|
||
|
||
<img src="/images/user-guide/dashboard/dashboard-chart-settings-x-data-on-display.png" alt="Отображаемые данные" />
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="calendar" />Детализация по дате </span>
|
||
|
||
При группировке по полю даты выберите период группировки.
|
||
|
||
| Вариант | Группирует данные по | Пример результата |
|
||
| ---------------- | -------------------------- | ------------------------------------------------------ |
|
||
| **День** | Каждый календарный день | 1 янв., 2 янв., 3 янв.... |
|
||
| **Неделя** | Календарные недели | Неделя 1, Неделя 2, Неделя 3... |
|
||
| **Месяц** | Календарные месяцы | январь, февраль, март... |
|
||
| **Квартал** | Финансовые кварталы | Q1, Q2, Q3, Q4 |
|
||
| **Год** | Календарные годы | 2023, 2024, 2025 |
|
||
| **День недели** | День недели (агрегировано) | понедельник, вторник... (все понедельники объединены) |
|
||
| **Месяц года** | Месяц (агрегировано) | январь, февраль... (все январские значения объединены) |
|
||
| **Квартал года** | Квартал (агрегировано) | Q1, Q2, Q3, Q4 (все Q1 объединены) |
|
||
|
||
Варианты «день недели/месяц года/квартал года» агрегируют данные за весь период. Используйте **День недели**, чтобы увидеть, в какие дни обычно больше всего сделок. Используйте **Месяц**, чтобы видеть динамику по месяцам.
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="arrows-sort" />Сортировка по </span>
|
||
|
||
Управляйте порядком категорий на оси X.
|
||
|
||
* **Позиция** — использует порядок, заданный в настройках поля Select
|
||
* **Алфавитный** — от A до Z (или хронологически для дат)
|
||
* **По значению** — упорядочено по метрике (сначала наибольшее или наименьшее)
|
||
* **Вручную** — перетащите, чтобы задать свой порядок
|
||
|
||
<img src="/images/user-guide/dashboard/dashboard-chart-settings-x-sort.png" alt="Сортировать по" />
|
||
|
||
**Совет**: для этапов воронки используйте **Позиция**, чтобы показать этапы в порядке вашего процесса продаж (Lead → Qualified → Proposal → Won).
|
||
|
||
<Note>
|
||
Доступные параметры зависят от типа поля. Поля Select имеют все варианты; поля даты и текста — меньше.
|
||
</Note>
|
||
|
||
<Tip>
|
||
При сортировке **Вручную** перетаскивайте категории, чтобы создать пользовательский порядок — идеально для выделения отдельных сегментов или для наглядного рассказа о ваших данных.
|
||
</Tip>
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="eye-off" />Исключить нулевые значения </span>
|
||
|
||
Скрывайте категории с нулевыми значениями или без данных.
|
||
|
||
* **Вкл.**: категории без записей скрываются
|
||
* **Выкл.**: отображаются все категории, даже пустые
|
||
|
||
Используйте это, чтобы «очистить» диаграммы с разреженными данными.
|
||
|
||
---
|
||
|
||
## Настройки оси Y
|
||
|
||
Эти настройки определяют, что вы измеряете и как это отображается.
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="axis-y" />Отображаемые данные </span>
|
||
|
||
Выберите поле и операцию для расчёта метрики.
|
||
|
||
* **Подсчёты** — Подсчитать все, Подсчитать пустые, Подсчитать непустые, Подсчитать уникальные значения
|
||
* **Математика** — Сумма, Среднее, Мин., Макс. (числовые поля)
|
||
* **Проценты** — Процент пустых, Процент непустых
|
||
|
||
В полях Boolean доступен подсчёт true/false. В сводных диаграммах с полями даты доступны операции "Самая ранняя/самая поздняя".
|
||
|
||
**Пример**: выберите "Amount" с операцией Sum, чтобы увидеть общую сумму сделок по категориям, или Count all, чтобы увидеть количество сделок.
|
||
|
||
<img src="/images/user-guide/dashboard/dashboard-chart-settings-y-data-on-display.png" alt="Отображаемые данные" />
|
||
|
||
<Note>
|
||
Доступные параметры зависят от типа поля и вида диаграммы. Если вы не видите ожидаемую операцию, проверьте тип поля.
|
||
</Note>
|
||
|
||
### Соотношение
|
||
|
||
Для полей Select, Multi-select или Boolean вы можете вычислить процент конкретного значения.
|
||
|
||
1. Выберите поле Select, Multi-select или Boolean
|
||
2. Включите **Соотношение**
|
||
3. Выберите вариант для измерения
|
||
|
||
**Пример**: покажите сделки со статусом "Won" в процентах от всех сделок. Если из 50 всего 10 со статусом "Won", диаграмма покажет 20%.
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="filters" />Группировать по </span>
|
||
|
||
Добавьте второе измерение, чтобы создать несколько рядов (несколько столбцов или линий).
|
||
|
||
1. Сначала задайте поле для оси X
|
||
2. Нажмите **Группировать по**
|
||
3. Выберите второе поле
|
||
|
||
**Пример**: сгруппируйте сделки по Stage (ось X) И по Owner (Группировать по), чтобы увидеть разрез по воронке каждого человека рядом.
|
||
|
||
<img src="/images/user-guide/dashboard/dashboard-chart-settings-y-group-by.png" alt="Группировать по" />
|
||
|
||
Когда задана группировка, на диаграмме появятся несколько цветов и отобразится легенда.
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="calendar" />Детализация по дате </span>
|
||
|
||
Когда группировка выполняется по полю даты, выберите период (те же варианты, что и для оси X).
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="arrows-sort" />Сортировка по </span>
|
||
|
||
Когда **Группировать по** задано, управляйте порядком сгруппированных рядов (например, какой столбец владельца отображается первым в каждой категории).
|
||
|
||
Те же варианты, что и для сортировки по оси X — Позиция, Алфавитный и Вручную — за исключением того, что **сортировка по значениям недоступна** для вторичной группировки.
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="chart-bar-popular" />Накопительный итог </span>
|
||
|
||
Показывать нарастающий итог вместо отдельных значений.
|
||
|
||
* **Выкл.**: каждый столбец/точка показывает своё значение
|
||
* **Вкл.**: каждый столбец/точка показывает сумму всех предыдущих значений плюс своё
|
||
|
||
**Пример**: январь = 10, февраль = 15
|
||
|
||
* Накопительный итог выкл.: показаны 10 и 15
|
||
* Накопительный итог вкл.: показаны 10 и 25 (10 + 15)
|
||
|
||
Используйте накопительный итог, чтобы отслеживать прогресс к цели во времени.
|
||
|
||
<img src="/images/user-guide/dashboard/dashboard-chart-settings-y-cumulative.png" alt="Накопительный" />
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="math-min" />Мин. диапазон / <ChartIcon icon="math-max" />Макс. диапазон </span>
|
||
|
||
Установите фиксированные минимальные и максимальные значения для оси Y.
|
||
|
||
* Оставьте пустым для автоматического масштабирования
|
||
* Введите число, чтобы зафиксировать границу
|
||
|
||
**Когда использовать:**
|
||
|
||
* Установите минимум в 0 для корректных визуальных сравнений
|
||
* Установите оба значения для согласованных шкал на нескольких диаграммах
|
||
* Сфокусируйтесь на определённом диапазоне значений, задав оба параметра
|
||
|
||
---
|
||
|
||
## Настройки стиля
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="color-swatch" />Цвета </span>
|
||
|
||
Задайте цветовую схему для диаграммы. Выберите из множества цветовых палитр.
|
||
|
||
<Note>
|
||
При группировке по полю Select диаграмма автоматически использует цвета, заданные для каждой опции в настройках поля.
|
||
</Note>
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="gizmo" />Подписи осей </span>
|
||
|
||
Выберите, какие подписи осей показывать: **Нет**, **Ось X**, **Ось Y** или **Обе** (только для столбчатых и линейных диаграмм).
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="stack-2" />Накопительные столбцы / Накопительные линии </span>
|
||
|
||
Когда задана группировка, выберите, как отображать несколько рядов.
|
||
|
||
* **Выкл. (Группированные)**: ряды отображаются рядом друг с другом. Используйте для сравнения точных значений между группами.
|
||
* **Вкл. (Накопительные)**: ряды накладываются друг на друга. Используйте для показа состава — как части формируют целое.
|
||
|
||
**Пример**: сделки по этапам, сгруппированные по владельцу
|
||
|
||
* Группированные: точные значения каждого владельца рядом
|
||
* Накопительные: общее число сделок на этапе с вкладом каждого владельца
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="badge-2k" />Подписи данных </span>
|
||
|
||
Показывайте значения прямо на элементах диаграммы (столбцах, точках, секторах).
|
||
|
||
* **Вкл.**: значения отображаются на диаграмме
|
||
* **Выкл.**: значения не отображаются (чище внешний вид)
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="text-caption" />Легенда </span>
|
||
|
||
Показывать или скрывать легенду (отображается только при заданной группировке).
|
||
|
||
* **Вкл.**: легенда показывает, что означает каждый цвет
|
||
* **Выкл.**: легенда не отображается
|
||
|
||
<Tip>
|
||
**Наведите курсор** на элемент легенды, чтобы подсветить эту группу. **Нажмите**, чтобы временно скрыть её на диаграмме.
|
||
</Tip>
|
||
|
||
---
|
||
|
||
## Особенности отдельных диаграмм
|
||
|
||
### Круговые диаграммы
|
||
|
||
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="chart-pie" size={16} /></span> **Каждый сектор представляет** – Определите, как группируются секторы
|
||
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="eye-off" size={16} /></span> **Скрыть пустую категорию** – Удалить секторы с нулевым значением
|
||
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="number-123" size={16} /></span> **Показывать значение в центре** – Отображать агрегированное значение (сумма, среднее, количество и т. д.)
|
||
|
||
### Сводные диаграммы
|
||
|
||
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="caret-left" size={16} /></span> **Префикс** – Добавить текст перед числом (например, `$`)
|
||
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="caret-right" size={16} /></span> **Суффикс** – Добавить текст после числа (например, `%`)
|