Программная активация hover-состояния

Работа с программной активацией hover-состояния в Chart.js строится вокруг управления активными элементами графика, взаимодействием с тултипом и внутренним механизмом обработки событий. В отличие от DOM-ориентированных библиотек, Chart.js не хранит hover как отдельное визуальное состояние в стиле CSS. Вместо этого используется модель активных элементов (active elements), которая определяет, какие точки, сегменты или элементы считаются «под курсором».

Hover в Chart.js определяется через массив активных элементов, каждый из которых описывается парой:

  • datasetIndex — индекс набора данных
  • index — индекс элемента внутри набора

Эта структура используется как для реального наведения мыши, так и для программного управления состоянием.

Активные элементы хранятся внутри экземпляра графика и синхронизируются с:

  • tooltip
  • подсветкой элементов
  • hover-анимациями
  • внешними обработчиками событий

Программная установка hover-состояния

Основной механизм активации — метод:

chart.setActiveElements([
  { datasetIndex: 0, index: 2 }
]);
chart.update();

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

Множественная активация:

chart.setActiveElements([
  { datasetIndex: 0, index: 1 },
  { datasetIndex: 0, index: 3 }
]);
chart.update();

Такой режим используется для сценариев сравнения точек или группового выделения.

Синхронизация с tooltip

Hover в Chart.js тесно связан с тултипом. Программная активация элементов не всегда автоматически отображает tooltip, поэтому требуется отдельное управление.

Типовой паттерн:

chart.setActiveElements([
  { datasetIndex: 1, index: 4 }
]);

chart.tooltip.setActiveElements([
  { datasetIndex: 1, index: 4 }
]);

chart.update();

В некоторых конфигурациях достаточно только setActiveElements, но при кастомных tooltip (особенно external tooltip) синхронизация выполняется вручную.

Режимы взаимодействия и влияние на hover

Поведение hover определяется настройкой interaction:

options: {
  interaction: {
    mode: 'nearest',
    intersect: true
  }
}

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

Основные режимы:

  • nearest — ближайший элемент к позиции
  • index — все элементы одного индекса
  • dataset — весь набор данных
  • point — конкретные точки

Программный hover фактически задаёт результат работы этих режимов вручную.

Сброс hover-состояния

Для снятия активации используется установка пустого массива:

chart.setActiveElements([]);
chart.tooltip.setActiveElements([]);
chart.update();

Это возвращает график в исходное состояние без подсветки.

Hover через события

Chart.js предоставляет доступ к событиям, которые можно использовать для синхронизации программного hover с пользовательским вводом:

options: {
  onHover: (event, elements, chart) => {
    chart.canvas.style.cursor = elements.length ? 'pointer' : 'default';
  }
}

Однако программное управление чаще применяется вне событий, например:

  • при клике на элементы интерфейса
  • при внешней фильтрации данных
  • при синхронизации нескольких графиков

Программная имитация наведения курсора

Иногда требуется не просто активировать элемент, а имитировать реальное поведение hover. Это включает:

  • активацию элементов
  • обновление tooltip
  • перерасчёт анимаций

Пример комплексного подхода:

function activatePoint(chart, datasetIndex, index) {
  const active = [{ datasetIndex, index }];

  chart.setActiveElements(active);
  chart.tooltip.setActiveElements(active);

  chart.update();
}

Такой метод часто используется при внешних контроллерах (например, списках или таблицах), синхронизированных с графиком.

Hover в линейных и точечных графиках

Для line и scatter hover работает на уровне точек. При программной активации:

  • выделяется маркер точки
  • увеличивается радиус (если задан hoverRadius)
  • меняется стиль точки

Ключевые параметры:

  • pointHoverRadius
  • pointHoverBackgroundColor
  • pointHoverBorderWidth

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

Hover в столбчатых диаграммах

В bar charts hover применяется к прямоугольникам. При активации:

  • изменяется цвет заливки
  • применяется hover-граница
  • может изменяться смещение

Параметры:

  • backgroundColor
  • hoverBackgroundColor
  • borderColor
  • hoverBorderColor

Программная активация делает бар «активным», как при наведении мыши.

Hover в pie и doughnut диаграммах

В круговых диаграммах hover связан с сегментами. Дополнительно используется параметр:

  • hoverOffset

Пример поведения:

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

Программная активация:

chart.setActiveElements([
  { datasetIndex: 0, index: 2 }
]);
chart.update();

Синхронизация нескольких графиков

Программный hover часто используется для координации нескольких экземпляров Chart.js.

Пример логики:

function syncHover(sourceChart, targetChart, index) {
  const active = [{ datasetIndex: 0, index }];

  targetChart.setActiveElements(active);
  targetChart.tooltip.setActiveElements(active);
  targetChart.update('none');
}

Ключевой момент — использование режима обновления 'none', чтобы избежать анимационных задержек.

Использование внешних интерфейсов

Программная активация hover особенно эффективна при интеграции с UI-элементами:

  • таблицы данных
  • списки значений
  • кастомные легенды

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

Важные особенности внутреннего состояния

Механизм hover в Chart.js зависит от нескольких внутренних структур:

  • _active — текущие активные элементы
  • tooltip._active — активные элементы тултипа
  • interaction — правила выбора элементов

Несоответствие между ними может приводить к рассинхронизации отображения, особенно при ручном управлении.

Поэтому при программной активации часто требуется обновлять сразу оба слоя: график и tooltip.

Поведение при анимации

При вызове update() после setActiveElements запускается анимационный цикл. Hover-состояние включается не мгновенно, а через текущий pipeline обновления.

Для мгновенного эффекта используется:

chart.update('none');

Это отключает анимацию и делает переход мгновенным, что важно для интерактивных интерфейсов.

Ограничения программного hover

  • не всегда синхронизируется с нативным pointer-event без дополнительной логики
  • требует ручного управления tooltip в кастомных реализациях
  • может конфликтовать с внешними плагинами взаимодействия
  • зависит от текущего режима interaction

Несмотря на это, механизм остаётся основным способом внешнего управления состоянием hover в Chart.js.

Оглавление