Настройка режима взаимодействия (interaction mode)

Режим взаимодействия в Chart.js определяет принцип выбора элементов графика при наведении курсора, касании на сенсорных устройствах и обработке событий навигации. Он управляет тем, какие точки данных, элементы наборов данных и оси считаются активными в конкретный момент времени.

Система взаимодействия строится на двух ключевых параметрах:

• mode — стратегия поиска активных элементов
• intersect — необходимость точного попадания курсора в элемент

Дополнительно учитываются настройки осей и контекста событий (hover, tooltip, events).

Параметр mode

Параметр mode определяет логику выбора элементов графика.

nearest

Режим nearest выбирает ближайший элемент к позиции курсора независимо от того, пересекается ли курсор с самим элементом.

Особенности поведения:

• анализируется расстояние до всех элементов
• выбирается минимальная дистанция
• используется при высокой плотности данных

Применение:

• линейные графики с большим количеством точек
• визуализации временных рядов

index

Режим index группирует элементы по индексу оси X. Активными становятся все точки, соответствующие одному и тому же индексу.

Характеристика:

• синхронное выделение точек разных наборов данных
• привязка к категории или времени

Применение:

• сравнительные графики
• мультисерийные диаграммы

dataset

Режим dataset активирует целый набор данных при наведении на любой его элемент.

Особенности:

• активируется весь dataset
• игнорируется точечная детализация

Применение:

• stacked charts
• визуализация вкладов целых категорий

point

Режим point ограничивает взаимодействие только конкретной точкой данных.

Характеристика:

• точное попадание в элемент обязательно
• отсутствие расширенного поиска ближайших элементов

Применение:

• scatter plots
• диаграммы с дискретными событиями

x

Режим x активирует все элементы, имеющие одинаковое значение по оси X.

Особенности:

• горизонтальная группировка
• игнорирование оси Y

Применение:

• временные диаграммы
• анализ значений по фиксированным моментам времени

y

Режим y активирует элементы с совпадающим значением по оси Y.

Характеристика:

• вертикальная группировка
• используется реже, чем x

Применение:

• анализ уровней одинаковой величины
• поиск совпадающих значений

none

Режим none отключает автоматическое выделение элементов.

Особенности:

• отсутствует hover-логика
• взаимодействие полностью управляется вручную через события

Применение:

• кастомные интерактивные системы
• внешние контроллеры взаимодействия

Параметр intersect

intersect определяет, требуется ли точное пересечение курсора с элементом.

intersect: true

Поведение:

• элемент становится активным только при попадании курсора внутрь его области
• повышается точность взаимодействия

Использование:

• плотные графики с близко расположенными точками
• сценарии, где важна точность выбора

intersect: false

Поведение:

• активные элементы определяются по близости, даже без прямого попадания
• учитывается расстояние до элементов

Использование:

• графики с мелкими элементами
• интерфейсы с плавным наведением

Сочетание mode и intersect

Комбинация параметров формирует итоговую стратегию взаимодействия.

nearest + intersect: false

Наиболее гибкая модель:

• выбирается ближайший элемент
• точное попадание не требуется

Характеристика:

• высокая чувствительность
• удобство при плотных данных

index + intersect: true

Строгая модель:

• активируются элементы только при попадании в область категории
• все элементы индекса выделяются одновременно

Характеристика:

• высокая предсказуемость
• подходит для сравнительных диаграмм

dataset + intersect: false

Групповая модель:

• активируется весь набор данных при приближении к любому элементу
• отсутствует требование точного попадания

Характеристика:

• удобство анализа категорий
• упрощённое восприятие слоёв данных

Поведение tooltip в зависимости от режима

Tooltip использует те же правила, что и interaction mode, если не задано отдельно.

Особенности:

• может отображать один элемент или группу
• синхронизируется с hover-режимом
• поддерживает кастомные callbacks формирования содержимого

При mode: index tooltip отображает набор значений по одной позиции оси X, при mode: dataset — значения одного набора данных.

Interaction в конфигурации осей

Оси могут влиять на поведение взаимодействия через:

• axis: 'x'
• axis: 'y'
• комбинированные сценарии

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

Hover и events

Параметр events задаёт список событий, на которые реагирует график:

• mousemove
• click
• touchstart
• touchmove
• wheel

Если событие отсутствует в списке, interaction mode не применяется.

Практические особенности реализации

Механизм взаимодействия внутри Chart.js строится на следующих этапах:

1. Определение координаты курсора
2. Преобразование координат в систему графика
3. Поиск элементов согласно mode
4. Применение фильтра intersect
5. Формирование активного состояния элементов
6. Обновление tooltip и hover-состояний

Каждый этап выполняется последовательно при каждом событии pointer input.

Поведение при высокой плотности данных

При большом количестве точек:

• nearest снижает нагрузку на выбор элемента за счёт простого поиска ближайшего расстояния
• index уменьшает вычисления, работая с группами
• point увеличивает точность, но снижает удобство взаимодействия

Оптимизация interaction mode напрямую влияет на производительность визуализации.

Кастомизация логики взаимодействия

Поведение может быть переопределено через:

• onHover
• onClick
• external tooltip handler

При использовании внешних обработчиков стандартный interaction mode может использоваться только как источник данных, без влияния на UI.

Логика при комбинированных графиках

В графиках с несколькими типами данных:

• линии
• бары
• точки

interaction mode применяется ко всем элементам одновременно, но с учётом их типа и масштаба координат. Это приводит к различным результатам выбора активных элементов в зависимости от структуры datasets.