Timeseries vs Time: в чём разница

Chart.js предоставляет две близкие по назначению, но архитектурно разные шкалы для работы с временными данными: time и timeseries. Обе предназначены для отображения данных по оси времени, однако различаются подходом к хранению, обработке и оптимизации данных.

Time scale

Шкала time исторически является основной временной шкалой в Chart.js и основана на использовании адаптера дат (date adapter), который преобразует входные значения в объекты времени и затем вычисляет позиции на оси.

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

  • поддерживает строки дат, объекты Date, timestamps
  • требует преобразования данных через адаптер (Luxon, Moment, Date-FNS)
  • вычисляет интервалы (день, месяц, год и т.д.) автоматически или вручную
  • ориентирована на равномерную шкалу времени

Типичная структура данных:

data: {
  datasets: [{
    label: 'Продажи',
    data: [
      { x: '2024-01-01', y: 10 },
      { x: '2024-01-02', y: 15 },
      { x: '2024-01-03', y: 8 }
    ]
  }]
}

Настройка шкалы:

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

Шкала time предполагает, что данные уже достаточно структурированы и могут быть точно интерпретированы как временные точки с интервалами.

Timeseries scale

Шкала timeseries была добавлена для более эффективной работы с большими временными наборами данных и отличается упрощённой моделью обработки.

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

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

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

Пример данных:

data: {
  datasets: [{
    label: 'Трафик',
    data: [
      { x: 1704067200000, y: 120 },
      { x: 1704153600000, y: 180 },
      { x: 1704240000000, y: 90 }
    ]
  }]
}

Настройка шкалы:

scales: {
  x: {
    type: 'timeseries'
  }
}

В отличие от time, здесь чаще используется UNIX timestamp, что снижает накладные расходы на парсинг.

Форматы данных и интерпретация

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

Time

  • допускает строки дат ('2024-01-01')
  • использует адаптер для преобразования
  • чувствителен к локали и формату даты
  • требует более строгой интерпретации времени

Timeseries

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

Поведение оси X

Time

Ось времени в time масштабируется по календарной логике:

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

Timeseries

Ось в timeseries ведёт себя ближе к числовой оси с временной интерпретацией:

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

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

Разница становится особенно заметной при увеличении объёма данных.

Time

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

Timeseries

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

Пропуски данных и плотность

Временные ряды редко бывают идеально равномерными.

Time

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

Timeseries

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

Сортировка данных

Time

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

Timeseries

  • более устойчив к несортированным данным
  • внутренне оптимизирует расположение точек

Использование адаптеров дат

Time

Обязательное использование адаптера:

  • Luxon
  • date-fns
  • Moment (устаревший вариант)

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

Timeseries

Может работать без сложного адаптера при использовании timestamp:

  • прямое использование числовых значений
  • минимальная зависимость от внешних библиотек

Форматирование оси и отображение

Time

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

time: {
  unit: 'month',
  displayFormats: {
    month: 'MMM yyyy'
  }
}

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

Timeseries

Фокусируется на производительности и простом отображении:

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

Поведение при масштабировании (zoom/pan)

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

Time

  • масштабирование привязано к временным единицам
  • переходы между уровнями (день → месяц → год)

Timeseries

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

Практические сценарии применения

Time

Подходит для задач:

  • аналитика по календарным периодам
  • отчёты по дням, месяцам, кварталам
  • визуализация с бизнес-логикой времени

Timeseries

Оптимален для:

  • мониторинга метрик в реальном времени
  • телеметрии и логов
  • высокочастотных данных
  • больших датасетов (IoT, финтех, серверные метрики)

Сравнение поведения на уровне архитектуры

Характеристика time timeseries
Парсинг дат через адаптер минимальный
Формат данных строки/Date timestamps
Производительность средняя высокая
Календарная логика полная упрощённая
Масштабируемость ограниченная высокая
Гибкость форматов высокая средняя

Ошибки при выборе шкалы

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

  • использование time для очень больших датасетов приводит к просадкам производительности
  • использование timeseries для календарных отчётов усложняет форматирование
  • смешивание строк дат и timestamp в одном dataset вызывает некорректное отображение
  • отсутствие сортировки при time может ломать визуализацию

Особенности миграции между шкалами

Переход с time на timeseries требует:

  • замены строковых дат на UNIX timestamp
  • упрощения конфигурации time блока
  • удаления зависимости от сложных адаптеров
  • проверки сортировки данных на стороне источника

Обратная миграция требует восстановления календарного контекста и форматирования.

Влияние на архитектуру приложения

Выбор шкалы влияет не только на визуализацию, но и на структуру данных:

  • time стимулирует хранение данных в человекочитаемом виде
  • timeseries стимулирует хранение данных в числовом формате
  • серверная агрегация чаще сочетается с timeseries
  • клиентская бизнес-логика чаще сочетается с time
Оглавление