Шаг 1: Анализ плана интерактивности из урока 3 (10 мин)Найдите ваш план интерактивностиВ уроке 3 вы отмечали для каждой визуализации:
- Нужен ли фильтр?
- Должна ли она влиять на другие графики?
- Нужен ли drill-down?
- Нужны ли подсказки при наведении?
Пример плана для Pizza SalesKPI "Общая выручка":
- Фильтр: Да (по датам и категориям)
- Cross-filter: Нет (сама не фильтрует)
- Drill-down: Да (по месяцам → дням)
- Tooltips: Да (сравнение с прошлым периодом)
График "Продажи по дням":
- Фильтр: Да (реагирует на все фильтры)
- Cross-filter: Да (клик по дню → фильтрует другие графики)
- Drill-down: Да (день → часы)
- Tooltips: Да (детали дня)
Ваша задача: выпишите план для каждого элемента вашего дашборда.
Шаг 2: Создание основных фильтров (25 мин)Определение нужных фильтровБазовый набор для любого датасета:
- Временной фильтр (даты, периоды)
- Категориальный фильтр (типы, группы, сегменты)
- Числовой фильтр (диапазоны значений)
- Географический фильтр (если есть локации)
Создание временного фильтра:- На странице редактирования дашборда выберите Filter Component>Date
- Перетащите фильтр на дашборд
- Выберите поле с датами из вашего датасета
- Настройте тип фильтра. При необходимости, смените тип фильтра:
- Year - выбор годовых значений
- Year-Month - выбор года и месяца
- Year-Quarter - выбор года и квартала
- Date - конкретная дата
- Date Panel - фильтр-календарь
- Date Interval - интервал дат
- Year-Month Interval - интервал дат на уровне года и месяца
- Button Group - для вывода значений в виде кнопок
5. Разместите в правом верхнем углу дашборда
6. Дайте понятное название: "Период анализа"
Создание текстового фильтра:- На странице редактирования дашборда выберите Filter Component>Text Filter Component или Tree Filter Component
- Определитесь с типом фильтра:
- Text Drop-Down - выпадающий список
- Text List - текстовый список (развернутый)
- Button group - список с кнопками
- Drop-Down Tree - выпадающий иерархический список
- Tree Label - облако тэгов
- List Tree - текстовый иерархический список (развернутый)
3. Вытащите фильтр на дашборд
4. Выберите текстовое поле для фильтрации (например, "Категория товара")
5. При необходимости, задайте дополнительные найстройки фильтра:
- множественный или одиночный выбор
- значение по умолчанию
- установка фильтра как обязательного
6. Задайте название: "Категория" или "Тип товара"
7. Разместите слева сверху
Создание числового фильтра (если нужен):- На странице редактирования дашборда выберите Filter Component>Value Filter Component
- Определитесь с типом фильтра:
- Value Drop-Down - выпадающий список значений
- Value Range - диапазон
- Range Slider - ползунок значений
3. Выберите числовое поле (цена, количество)
4. Вытащите фильтр на дашборд
5. Настройте диапазон значений
6. Задайте название: "Диапазон цен" или "Количество"
7. Разместите рядом с другими фильтрами
Настройка внешнего вида фильтров:- Размер: Достаточно большой для клика пальцем
- Цвет: Нейтральный (серый или белый фон)
- Шрифт: Читаемый, не меньше 12pt
- Группировка: Объедините фильтры в одну зону при помощи Other Components> Frozen Bar of filter Component
Шаг 3: Настройка кросс-фильтрации (взаимодействия) (15 мин)Принцип кросс-фильтрации:Когда пользователь кликает на элемент одного графика, все остальные графики показывают только данные, связанные с этим элементом.
В FineBI этот функционал называется LinkageНастройка базового cross-filtering:- Выберите "источник" взаимодействия:
- Обычно это столбчатая диаграмма или таблица
- Элементы должны быть кликабельными
2. В настройках графика найдите Set Linkage
3. Выберите целевые визуализации:
- Отметьте галочками графики, которые должны реагировать.Обычно это все остальные элементы дашборда
- Отключите фильтрацию для графиков, которые не должны фильтроваться при нажатии.
4. При необходимости, вручную задайте необходимые поля для фильтрации: Edit Dependent Field>Custom. Затем укажите конкретное поле.
Практический пример:Столбчатая диаграмма "ТОП-5 продуктов":
→ При клике на "Пицца Маргарита"
→ KPI показывают только данные по Маргарите
→ Временной график показывает тренд только Маргариты
→ Таблица показывает только строки с Маргаритой
Тестирование cross-filtering:- Кликните на столбец диаграммы
- Проверьте, что другие элементы изменились
- Кликните в пустое место для сброса
- Убедитесь, что все вернулось к исходному виду
Шаг 4: Добавление drill-down функциональности (10 мин)Что такое drill-down?Возможность "провалиться" в детали при клике на элемент.
Drill-down для измерений:- Выберите диаграмму.
- Создайте иерархию - Create Drill Directory:
- Уровень 1: Категория (Пицца, Напитки)
- Уровень 2: Подкатегория (Маргарита, Пепперони)
- Уровень 3: Размер (S, M, L)
3. Замените одно из обычных измерений на измерение с иерархией.
Шаг 5: Дополнительные интерактивные элементы (5 мин)Кнопка сброса фильтров:- Добавьте кнопку в зону фильтров
- Стиль: Сделайте менее заметной, например, серого цвета. Для этого измените настройки (серый цвет)
Улучшение всплывающих подсказок:- Для каждой визуализации настройте Prompt:
- KPI: убрать всплывающую подсказку
- Графики: показывать точные значения и проценты
2. Формат подсказки:
- Название элемента
- Основное значение крупно
- Дополнительная информация мелко
- Подсказка о действии ("Кликните для фильтрации")
Финальное тестирование интерактивностиЧек-лист для проверки:✔ Фильтры работают: Изменяют все связанные визуализации
✔ Cross-filtering работает: Клик на графике фильтрует остальные
✔ Drill-down работает: Можно "провалиться" в детали и вернуться
✔ Tooltips информативны: Показывают полезную дополнительную информацию
✔ Кнопка сброса работает: Возвращает исходное состояние
✔ Визуальные подсказки понятны: Ясно, что интерактивно, а что нет
✔ Скорость отклика: Все работает быстро (до 3 секунд)
Тест "Пользователь-новичок":- Покажите дашборд человеку, который его не видел
- Попросите найти фильтры и применить их
- Попросите найти детали по конкретному элементу
- Если возникают вопросы - улучшите подсказки