Временны́е данные в datasets

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

Структура dataset для временной оси

Временные данные в datasets могут задаваться двумя основными способами: через объекты {x, y} и через массивы значений при наличии отдельной конфигурации оси времени.

Формат объектов {x, y}

Наиболее универсальный вариант — явная передача координат:

const data = {
  datasets: [{
    label: 'Температура',
    data: [
      { x: '2026-01-01', y: 12 },
      { x: '2026-01-02', y: 14 },
      { x: '2026-01-03', y: 9 }
    ]
  }]
};

Поле x может содержать:

  • ISO-строку даты (YYYY-MM-DD)
  • timestamp (миллисекунды)
  • объект Date

Поле y — числовое значение, соответствующее измерению.

Использование числовых timestamp

Для высокоточных данных (логирование, IoT, трейдинг) предпочтительно использовать Unix timestamp:

data: [
  { x: 1704067200000, y: 120 },
  { x: 1704153600000, y: 135 },
  { x: 1704240000000, y: 128 }
]

Такой формат снижает неоднозначность парсинга и ускоряет обработку.

Конфигурация оси времени

Чтобы Chart.js интерпретировал значения x как время, необходимо явно указать тип оси:

options: {
  scales: {
    x: {
      type: 'time'
    }
  }
}

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

Парсинг дат и адаптеры времени

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

На практике применяются:

  • date-fns adapter
  • Luxon adapter
  • Moment.js (устаревающий вариант)

Пример подключения адаптера:

import 'chartjs-adapter-date-fns';

После подключения Chart.js получает возможность:

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

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

Временная шкала поддерживает несколько форматов:

ISO 8601 строки

{ x: '2026-05-17T10:00:00Z', y: 42 }

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

Date объекты

{ x: new Date(2026, 4, 17), y: 30 }

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

Timestamp

{ x: Date.now(), y: 55 }

Наиболее стабильный формат для больших данных.

Автоматическое масштабирование временной оси

Ось времени автоматически подбирает единицы измерения:

  • миллисекунды
  • секунды
  • минуты
  • часы
  • дни
  • месяцы
  • годы

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

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

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

Настройка интервалов и отображения времени

Ключевой блок конфигурации — time:

options: {
  scales: {
    x: {
      type: 'time',
      time: {
        minUnit: 'minute',
        tooltipFormat: 'yyyy-MM-dd HH:mm',
        displayFormats: {
          hour: 'HH:mm',
          day: 'MMM dd'
        }
      }
    }
  }
}

Основные параметры:

  • minUnit — минимальный масштаб
  • unit — фиксированный интервал
  • tooltipFormat — формат всплывающих подсказок
  • displayFormats — правила отображения на шкале

Разрежение данных и производительность

При работе с временными рядами большого объёма (тысячи и миллионы точек) важным становится снижение нагрузки на рендеринг.

Chart.js использует механизмы:

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

Пример включения decimation:

options: {
  datasets: {
    line: {
      parsing: false
    }
  },
  plugins: {
    decimation: {
      enabled: true,
      algorithm: 'lttb'
    }
  }
}

Алгоритм LTTB (Largest-Triangle-Three-Buckets) сохраняет визуальную форму графика при сильном уменьшении количества точек.

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

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

  • резкие скачки линии
  • некорректная интерполяция
  • смещение tooltip-значений

Рекомендуемая подготовка:

data.sort((a, b) => a.x - b.x);

Если x — строка, предварительно выполняется преобразование:

data.sort((a, b) => new Date(a.x) - new Date(b.x));

Использование массива значений без x

Chart.js допускает альтернативный формат, где временные метки задаются отдельно:

labels: [
  '2026-01-01',
  '2026-01-02',
  '2026-01-03'
],
datasets: [{
  data: [10, 20, 15]
}]

В этом случае labels интерпретируются как временная шкала только при включении соответствующей оси. Однако такой подход менее гибок, чем использование {x, y}.

Смещение и временные зоны

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

  • строки ISO интерпретируются как UTC
  • Date объект может использовать локальную зону

Для избежания расхождений рекомендуется:

  • хранить данные в UTC
  • избегать локальных Date при серверной синхронизации
  • использовать timestamp

Интерполяция и непрерывность данных

При пропусках во временных рядах Chart.js не создаёт значения автоматически. Поведение зависит от типа графика:

  • line: разрыв линии
  • spanGaps: соединение пропусков
  • scatter: отображение отдельных точек
datasets: [{
  data: [...],
  spanGaps: true
}]

Tooltip и форматирование времени

Отображение времени в tooltip настраивается отдельно:

options: {
  plugins: {
    tooltip: {
      callbacks: {
        label: function(context) {
          return `${context.parsed.x} → ${context.parsed.y}`;
        }
      }
    }
  }
}

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

Масштабирование и диапазоны времени

Управление видимым диапазоном осуществляется через:

options: {
  scales: {
    x: {
      min: '2026-01-01',
      max: '2026-01-31'
    }
  }
}

Также допустимы timestamp значения:

min: 1704067200000,
max: 1706745600000

Комбинирование временных и числовых данных

В одном графике допускается использование временной оси с несколькими dataset, где каждый набор данных может иметь разную плотность и характер изменения:

datasets: [
  {
    label: 'Продажи',
    data: [{ x: '2026-01-01', y: 200 }]
  },
  {
    label: 'Посещения',
    data: [{ x: '2026-01-01', y: 1200 }]
  }
]

Обе серии синхронизируются по оси времени, независимо от частоты измерений.

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

При охвате больших промежутков (годы, десятилетия) Chart.js:

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

Это предотвращает перегрузку интерфейса и сохраняет читаемость.

Контроль точности отображения

Формат отображения временных значений влияет только на визуализацию, но не на внутреннюю модель данных. Это позволяет:

  • хранить данные в миллисекундах
  • отображать их в любом формате
  • переключать представление без изменения исходных данных
time: {
  displayFormats: {
    millisecond: 'HH:mm:ss.SSS',
    second: 'HH:mm:ss',
    minute: 'HH:mm',
    hour: 'HH:mm'
  }
}

Особенности сериализации и восстановления данных

При передаче данных через API важно учитывать, что:

  • Date объекты сериализуются в строки
  • timestamp остаётся числом
  • ISO строки требуют парсинга на клиенте

Поэтому наиболее устойчивый формат — числовые метки времени, исключающие неоднозначность интерпретации.

Оглавление