Временна́я ось с нерегулярными интервалами

Временная ось в Chart.js строится поверх шкалы типа time, которая предназначена для работы с датами, временными метками и нерегулярными интервалами между точками данных. В отличие от категориальной оси, где значения равномерно распределены по индексам массива, временная шкала вычисляет положение каждой точки исходя из реального временного расстояния между событиями.

Временная ось опирается на числовое представление даты (timestamp в миллисекундах). Каждая точка данных содержит пару x (время) и y (значение), где x может быть строкой даты, объектом Date или числом.

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

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

Такой подход делает временную шкалу подходящей для финансовых графиков, логов, мониторинга и аналитики событий.

Форматы входных данных

Chart.js поддерживает несколько форматов представления времени.

ISO-строки

data: [
  { x: '2026-01-01T10:00:00Z', y: 12 },
  { x: '2026-01-01T12:00:00Z', y: 19 },
  { x: '2026-01-03T09:00:00Z', y: 7 }
]

JavaScript Date

data: [
  { x: new Date('2026-01-01'), y: 12 },
  { x: new Date('2026-01-05'), y: 18 }
]

Unix timestamp (миллисекунды)

data: [
  { x: 1767225600000, y: 12 },
  { x: 1767484800000, y: 19 }
]

Все три варианта приводятся к единому внутреннему представлению — числу времени.

Базовая конфигурация временной оси

Для активации временной шкалы ось x или y настраивается как type: 'time'.

options: {
  scales: {
    x: {
      type: 'time',
      time: {
        unit: 'day'
      }
    }
  }
}

Параметр time.unit управляет базовой единицей отображения:

  • millisecond
  • second
  • minute
  • hour
  • day
  • week
  • month
  • year

Нерегулярные интервалы данных

Главная особенность временной шкалы — поддержка нерегулярных интервалов без дополнительной нормализации данных.

Пример набора с разными промежутками:

data: [
  { x: '2026-01-01', y: 5 },
  { x: '2026-01-02', y: 7 },
  { x: '2026-01-10', y: 3 },
  { x: '2026-02-01', y: 12 }
]

Chart.js автоматически вычисляет:

  • реальное расстояние между датами
  • масштаб оси
  • плотность тиков

При этом отсутствует необходимость добавлять пустые значения для «пропущенных» дней.

Адаптеры дат и зависимость от окружения

Временная шкала не содержит собственного полноценного парсера дат и использует адаптеры времени. Основные варианты:

  • date-fns
  • luxon
  • moment (устаревший, но всё ещё поддерживается)

Пример подключения через date-fns:

import 'chartjs-adapter-date-fns';

Без адаптера временная ось не сможет корректно интерпретировать строки дат.

Управление единицами отображения

Автоматическое определение масштаба можно заменить ручным управлением.

options: {
  scales: {
    x: {
      type: 'time',
      time: {
        unit: 'month',
        stepSize: 2
      }
    }
  }
}

Здесь:

  • unit задаёт базовую единицу (например, месяц)
  • stepSize определяет шаг между метками

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

Минимальные и максимальные границы времени

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

options: {
  scales: {
    x: {
      type: 'time',
      min: '2026-01-01',
      max: '2026-03-01'
    }
  }
}

Это особенно важно при работе с потоковыми данными или историческими срезами.

Форматы отображения тиков

Формат подписей регулируется через displayFormats.

options: {
  scales: {
    x: {
      type: 'time',
      time: {
        displayFormats: {
          day: 'dd.MM',
          month: 'MM.yyyy',
          year: 'yyyy'
        }
      }
    }
  }
}

Формат зависит от текущего уровня масштаба. При увеличении графика отображение автоматически переключается.

Обработка нерегулярных данных и распределение точек

Параметр distribution влияет на интерпретацию значений:

  • linear — точки распределяются по реальному времени
  • series — данные интерпретируются как последовательность

Пример:

options: {
  scales: {
    x: {
      type: 'time',
      distribution: 'linear'
    }
  }
}

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

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

Если между точками существуют большие интервалы, шкала не заполняет их фиктивными значениями. Это приводит к:

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

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

Тики и автошкалирование

Алгоритм формирования тиков учитывает:

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

При необходимости можно отключить автоматическую генерацию:

options: {
  scales: {
    x: {
      type: 'time',
      ticks: {
        autoSkip: false
      }
    }
  }
}

Это приводит к отображению всех возможных меток, что может быть полезно при малом объёме данных.

Работа с часовыми поясами

Временная шкала оперирует UTC-значениями при использовании ISO-строк с суффиксом Z. При отсутствии явного указания зоны время интерпретируется согласно локальному окружению браузера.

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

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

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

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

  • использование разреженных данных
  • агрегация перед рендерингом
  • ограничение диапазона min / max
  • отключение лишних анимаций

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

Поведение tooltip при временной оси

Tooltip группирует данные по ближайшему времени. При наведении:

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

Масштабирование и зум (логическая основа)

Хотя базовая библиотека не предоставляет полноценного зума, временная шкала рассчитана на динамическое изменение диапазона через:

  • изменение min и max
  • обновление данных
  • внешние плагины взаимодействия

Механизм пересчёта остаётся тем же — все значения преобразуются в временную линию с плавающим масштабом.

Влияние плотности данных на визуализацию

При высокой плотности точек временная ось:

  • сжимает метки
  • скрывает часть тиков
  • упрощает подписи

Это предотвращает визуальную перегрузку и сохраняет читаемость даже при тысячах точек на коротком промежутке времени.

Оглавление