Зум колёсиком мыши

Масштабирование графиков в Chart.js реализуется не встроенными средствами ядра, а через дополнительный плагин — chartjs-plugin-zoom. Он добавляет поддержку интерактивного зума и панорамирования, включая управление колесом мыши.

Базовая интеграция выглядит следующим образом:

import { Chart } from 'chart.js';
import zoomPlugin from 'chartjs-plugin-zoom';

Chart.register(zoomPlugin);

При использовании CDN:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom"></script>

После регистрации плагина появляется доступ к секции options.plugins.zoom, где и настраивается поведение масштабирования.

Включение zoom через колесо мыши

Основная настройка, отвечающая за работу колесика:

options: {
  plugins: {
    zoom: {
      zoom: {
        wheel: {
          enabled: true
        }
      }
    }
  }
}

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

  • wheel.enabled — включает масштабирование при прокрутке мыши

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

Режимы масштабирования

Zoom может работать по-разному в зависимости от режима:

zoom: {
  wheel: {
    enabled: true
  },
  mode: 'x'
}

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

  • ‘x’ — масштабирование только по оси X
  • ‘y’ — масштабирование только по оси Y
  • ‘xy’ — масштабирование сразу по обеим осям

Режим определяет, как интерпретируется жест прокрутки. В аналитических графиках чаще используется x, поскольку временные ряды требуют детального приближения по горизонтали.

Чувствительность колесика

Параметр speed управляет тем, насколько быстро меняется масштаб при прокрутке:

zoom: {
  wheel: {
    enabled: true,
    speed: 0.1
  }
}

Значения:

  • 0.01–0.05 — медленное, точное масштабирование
  • 0.1–0.3 — стандартное поведение
  • 0.5+ — резкое увеличение масштаба

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

Ограничение диапазона масштабирования

Чтобы избежать чрезмерного увеличения или уменьшения, используются лимиты:

zoom: {
  wheel: {
    enabled: true
  },
  limits: {
    x: { min: 'original', max: 'original' },
    y: { min: 'original', max: 'original' }
  }
}

Варианты ограничений:

  • ‘original’ — исходный диапазон данных
  • числовые значения — фиксированные границы
  • отсутствие limits — свободное масштабирование

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

Комбинация с панорамированием

Колесо мыши часто используется совместно с перетаскиванием:

zoom: {
  wheel: {
    enabled: true
  },
  pan: {
    enabled: true,
    mode: 'x'
  },
  mode: 'x'
}

Поведение:

  • колесо мыши — изменение масштаба
  • drag (перетаскивание) — смещение области просмотра

Такой подход имитирует поведение профессиональных аналитических инструментов.

Управление осью фокуса

По умолчанию масштабирование происходит относительно положения курсора. Это поведение можно контролировать через focus:

zoom: {
  wheel: {
    enabled: true
  },
  zoom: {
    focus: 'center'
  }
}

Доступные значения:

  • ‘center’ — масштаб от центра графика
  • ‘mouse’ — масштаб относительно позиции курсора

Режим mouse обеспечивает более точное взаимодействие, так как пользователь «приближает» конкретную точку данных.

Блокировка вертикального зума

При работе с временными рядами часто требуется запретить масштабирование по Y:

zoom: {
  wheel: {
    enabled: true
  },
  mode: 'x'
}

Такой подход:

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

Ограничение скорости реакции на прокрутку

При интенсивной работе колесо мыши может вызывать слишком частые перерисовки. Для сглаживания применяется throttle:

zoom: {
  wheel: {
    enabled: true,
    speed: 0.1
  },
  threshold: 10
}
  • threshold — минимальный интервал между событиями
  • снижает нагрузку на рендеринг
  • уменьшает «дёргание» графика

Инверсия направления масштабирования

Поведение прокрутки можно изменить логически:

zoom: {
  wheel: {
    enabled: true,
    invert: false
  }
}

Возможные варианты:

  • false — стандартное увеличение при прокрутке вверх
  • true — инвертированное поведение

Инверсия используется для согласования поведения с другими интерфейсными компонентами.

Сброс масштабирования

При активном zoom важно иметь возможность вернуть исходное состояние:

chart.resetZoom();

Дополнительно можно ограничить сброс только по осям:

chart.resetZoom({ x: true, y: false });

Это позволяет сохранять частичный фокус анализа.

Взаимодействие с типами графиков

Zoom через колесо мыши ведёт себя по-разному в зависимости от типа диаграммы:

  • Line chart — наиболее предсказуемое поведение, используется для временных рядов
  • Bar chart — масштабирование может изменять плотность столбцов
  • Scatter plot — критично точное позиционирование точки фокуса
  • Mixed charts — требует согласования режимов осей

Особое внимание требуется при работе с дискретными данными, где чрезмерный zoom приводит к визуальной перегрузке.

Производительность при активном масштабировании

Интенсивное использование колесика мыши приводит к частым пересчётам:

  • перерасчёт шкал осей
  • перерисовка canvas
  • обновление анимации

Оптимизация достигается через:

  • отключение анимаций при zoom
options: {
  animation: false
}
  • ограничение числа точек данных
  • использование decimation для больших массивов

Совместимость с другими интерактивными событиями

Zoom через колесо может конфликтовать с:

  • tooltip hover
  • drag selection
  • custom event listeners

При необходимости приоритет события регулируется через eventOptions:

zoom: {
  wheel: {
    enabled: true,
    modifierKey: 'ctrl'
  }
}

В этом случае масштабирование происходит только при удержании клавиши, снижая конфликт с hover-интерактивностью.

Использование модификаторов клавиатуры

Добавление модификатора повышает контроль над интерфейсом:

  • Ctrl + колесо — zoom
  • Shift + колесо — альтернативный режим
  • без клавиш — обычный scroll страницы

Пример:

zoom: {
  wheel: {
    enabled: true,
    modifierKey: 'ctrl'
  }
}

Такое поведение особенно полезно в веб-приложениях с прокручиваемыми контейнерами.

Оглавление