Zoom и Navigator

Zoom

zoom: { enabled: true } включает зум колесом вокруг курсора, панорамирование перетаскиванием и сброс двойным кликом. Правый клик (при contextMenu) — меню со скачиванием PNG и сбросом зума.

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Zoom and pan' },
    subtitle: { text: 'wheel/pinch — zoom, drag — select area, alt+drag — pan, dblclick — reset' },
    series: [{ type: 'line', xField: 'index', yField: 'value', name: 'Value', marker: { enabled: false } }],
    axes: [
      { type: 'number', position: 'bottom', nice: false },
      { type: 'number', position: 'left' },
    ],
    zoom: { enabled: true, dragSelect: true, panKey: 'alt' },
    contextMenu: { enabled: true },
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  const points = [];
  let value = 100;
  for (let i = 0; i < 120; i++) {
    value += Math.sin(i / 7) * 4 + ((i * 13) % 9) - 4;
    points.push({ index: i, value: Math.round(value * 10) / 10 });
  }
  return points;
}

Navigator

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

Модульная сборка

Zoom входит в ядро, а navigator в сборке через grafit-charts/core — отдельный модуль: register(navigatorModule).

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Navigator' },
    subtitle: { text: 'the window and handles below control the visible range' },
    series: [{ type: 'area', xField: 'date', yField: 'value', name: 'Metric' }],
    axes: [
      { type: 'time', position: 'bottom' },
      { type: 'number', position: 'left' },
    ],
    navigator: { enabled: true, min: 0.6, max: 1 },
    zoom: { enabled: true },
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  const start = Date.UTC(2024, 0, 1);
  const day = 24 * 60 * 60 * 1000;
  const points = [];
  let value = 50;
  for (let i = 0; i < 365; i++) {
    value += Math.sin(i / 30) * 1.5 + ((i * 7) % 5) - 2;
    points.push({ date: new Date(start + i * day), value: Math.round(value * 10) / 10 });
  }
  return points;
}

Опция	Тип	По умолчанию	Описание
enabled	boolean	false	включить навигатор
sync.groupId	string	общая группа	группа синхронизации чартов
sync.nodeInteraction	boolean	true	синхронизация подсветки узлов
zoom.axes	'x' | 'y' | 'xy'	'x'	зумируемые оси
zoom.wheelZoom	boolean	true	зум колесом
zoom.wheelStep	number	0.1	шаг зума за тик колеса
zoom.dragPan	boolean	true	панорамирование перетаскиванием
zoom.panKey	'alt' | 'ctrl' | 'shift' | 'meta'	—	модификатор пана (без него drag — box-zoom)
zoom.dragSelect	boolean	false	выделение области → зум
zoom.doubleClickReset	boolean	true	сброс двойным кликом
zoom.minRatio	number	0.05	минимальная ширина окна (доля домена)
navigator.height	Pixels	24	высота полосы навигатора
navigator.miniChart.enabled	boolean	true	миниатюра серии в полосе
navigator.min	0..1	0	начало окна
navigator.max	0..1	1	конец окна

Pinch-жест на тач-устройствах зумирует вокруг центра жеста. Окно навигатора и зум — одно состояние: колесо обновляет навигатор и наоборот. Текущее окно сохраняется в состоянии чарта.