Плагин chartjs-plugin-zoom

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

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

Установка и подключение

Плагин распространяется как отдельный модуль и подключается после основной библиотеки Chart.js.

Установка через npm

npm install chartjs-plugin-zoom

Подключение в проекте

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

Chart.register(zoomPlugin);

При использовании CDN-версий порядок подключения критичен: сначала Chart.js, затем плагин.

Архитектура и принцип работы

Плагин интегрируется в жизненный цикл графика Chart.js через систему плагинов, перехватывая:

  • события мыши (wheel, drag)
  • события касания (touch)
  • обновления осей (scales)
  • перерисовку canvas

Каждое взаимодействие изменяет параметры диапазона осей (min, max) без модификации исходных данных.

Базовая конфигурация

Основная конфигурация задаётся в секции options.plugins.zoom.

const config = {
  type: 'line',
  data: {
    labels: [...],
    datasets: [...]
  },
  options: {
    plugins: {
      zoom: {
        pan: {
          enabled: true,
          mode: 'x'
        },
        zoom: {
          wheel: {
            enabled: true
          },
          pinch: {
            enabled: true
          },
          mode: 'x'
        }
      }
    }
  }
};

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

  • x — масштабирование по оси X
  • y — масштабирование по оси Y
  • xy — обе оси одновременно

Масштабирование (zoom)

Колесо мыши

zoom: {
  wheel: {
    enabled: true,
    speed: 0.1
  }
}
  • speed регулирует интенсивность масштабирования
  • отрицательные значения инвертируют направление

Pinch-жесты

Используются на сенсорных устройствах:

zoom: {
  pinch: {
    enabled: true
  }
}

Панорамирование (pan)

Панорамирование позволяет смещать область просмотра без изменения масштаба.

pan: {
  enabled: true,
  mode: 'x',
  threshold: 10
}

Параметры

  • threshold — минимальное смещение для активации
  • mode — направление движения

Программное управление масштабом

Плагин предоставляет API для управления состоянием zoom из кода.

Сброс масштаба

chart.resetZoom();

Применение программного масштаба

chart.zoom(1.5);

Панорамирование через код

chart.pan({
  x: 50,
  y: 0
});

Ограничение диапазонов

Для предотвращения выхода за допустимые пределы используются ограничения:

zoom: {
  limits: {
    x: {
      min: 'original',
      max: 'original'
    }
  }
}

Варианты значений

  • original — исходный диапазон данных
  • числовые значения — фиксированные границы
  • процентные ограничения — относительные диапазоны

Поддержка осей и масштабов

Плагин работает со всеми типами шкал Chart.js:

  • линейные (linear)
  • категориальные (category)
  • временные (time)
  • логарифмические (logarithmic)

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

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

Множественные оси

При наличии нескольких осей конфигурация задаётся отдельно для каждой:

zoom: {
  zoom: {
    x: { enabled: true },
    y: { enabled: false }
  }
}

или через общий режим:

mode: 'xy'

События и обратные вызовы

Плагин предоставляет возможность реагировать на изменения масштаба.

zoom: {
  onZoom: ({ chart }) => {
    console.log('zoom изменён');
  },
  onZoomComplete: ({ chart }) => {
    console.log('zoom завершён');
  }
}

Аналогично для панорамирования:

pan: {
  onPan: ({ chart }) => {},
  onPanComplete: ({ chart }) => {}
}

Интеграция с пользовательскими контролами

Часто zoom/pan дополняется внешними кнопками управления.

Пример: кнопка сброса

document.getElementById('reset').addEventListener('click', () => {
  chart.resetZoom();
});

Пример: фиксированный зум

document.getElementById('zoomIn').addEventListener('click', () => {
  chart.zoom(1.2);
});

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

При больших наборах данных важно учитывать:

  • перерисовка canvas происходит на каждом событии
  • чрезмерная детализация снижает FPS
  • временные шкалы требуют оптимизации данных

Рекомендации:

  • уменьшение количества точек перед отрисовкой
  • использование decimation-алгоритмов Chart.js
  • ограничение диапазонов zoom

Работа с адаптивными графиками

При изменении размеров контейнера поведение zoom может требовать синхронизации:

  • пересчёт scale bounds
  • сохранение текущего диапазона
  • предотвращение сброса zoom при resize

Комбинирование с другими плагинами Chart.js

Плагин совместим с большинством расширений:

  • annotation plugin (аннотации на графиках)
  • tooltip кастомизация
  • datalabels

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

Типовые сценарии использования

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

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

  • zoom не изменяет исходный dataset
  • resetZoom восстанавливает только состояние осей
  • при переключении dataset состояние может сбрасываться
  • pinch-зум зависит от устройства и браузера
  • логарифмические шкалы требуют корректной подготовки данных
Оглавление