Параметры unit, round, tooltipFormat, displayFormats

Chart.js

Параметр unit определяет базовую единицу времени, используемую при построении временной шкалы (time scale). Он управляет тем, как данные группируются и как распределяются метки по оси.

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

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

При выборе unit библиотека перестраивает интервалы тиков, автоматически агрегируя точки данных.

Пример конфигурации:

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

При unit: 'month' несколько точек внутри одного месяца будут визуально сгруппированы в рамках месячного интервала. Это особенно важно при работе с большими временными рядами, где избыточная детализация ухудшает читаемость графика.

time.round

Параметр round управляет округлением времени до ближайшей логической границы выбранной единицы времени. Он влияет на вычисление начала и конца диапазона шкалы.

Поддерживаемые значения соответствуют временным единицам:

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

Если задано округление round: 'day', значения временной шкалы будут выравниваться по границам суток.

Пример:

scales: {
  x: {
    type: 'time',
    time: {
      unit: 'hour',
      round: 'minute'
    }
  }
}

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

time.tooltipFormat

Параметр tooltipFormat определяет формат отображения даты и времени во всплывающих подсказках (tooltips) на временной оси.

Формат зависит от используемого адаптера дат:

  • date-fns
  • Luxon
  • Moment.js (в старых конфигурациях)

Формат задаётся строкой, соответствующей правилам выбранного адаптера.

Пример:

scales: {
  x: {
    type: 'time',
    time: {
      tooltipFormat: 'dd.MM.yyyy HH:mm'
    }
  }
}

При наведении на точку графика значение времени будет преобразовано в заданный шаблон.

Важно учитывать, что tooltipFormat влияет только на отображение в tooltip, но не изменяет внутреннюю структуру данных и не влияет на ticks оси.

time.displayFormats

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

Структура:

displayFormats: {
  millisecond: 'HH:mm:ss.SSS',
  second: 'HH:mm:ss',
  minute: 'HH:mm',
  hour: 'HH:mm',
  day: 'dd MMM',
  week: 'PP',
  month: 'MMM yyyy',
  quarter: 'QQQ yyyy',
  year: 'yyyy'
}

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

Пример использования:

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

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

Связь параметров внутри time-scale

Параметры unit, round, tooltipFormat и displayFormats работают как единая система форматирования временной оси:

  • unit определяет шаг дискретизации данных
  • round задаёт выравнивание границ шкалы
  • displayFormats управляет отображением подписей оси
  • tooltipFormat отвечает за формат всплывающих значений

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

Chart.js Documentation

Оглавление