Типы осей: linear, logarithmic, category, time, timeseries

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

Оси в Chart.js задаются в конфигурации через параметр type внутри объекта scales. Каждая ось может иметь собственный тип, независимо от других осей на графике.

Основные типы осей:

  • linear
  • logarithmic
  • category
  • time
  • timeseries

Каждый тип предназначен для определённого класса задач визуализации данных.

Linear (линейная ось)

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

Основные свойства:

  • поддержка целых и дробных чисел
  • равномерная шкала
  • автоматическое вычисление диапазона (min/max)

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

const config = {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      label: 'Данные',
      data: [10, 20, 30]
    }]
  },
  options: {
    scales: {
      y: {
        type: 'linear',
        beginAtZero: true
      }
    }
  }
};

Линейная ось используется в большинстве графиков: столбчатых, линейных, точечных.

Особенность поведения:

  • значения интерполируются линейно
  • поддерживаются отрицательные значения
  • хорошо подходит для измерений (температура, количество, время в числовом виде)

Logarithmic (логарифмическая ось)

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

Основные характеристики:

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

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

const config = {
  type: 'line',
  data: {
    datasets: [{
      label: 'Рост',
      data: [1, 10, 100, 1000]
    }]
  },
  options: {
    scales: {
      y: {
        type: 'logarithmic'
      }
    }
  }
};

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

  • шаги представляют собой степени основания логарифма
  • расстояние между 1 и 10 равно расстоянию между 10 и 100
  • используется в анализе экспоненциального роста

Типичные области применения:

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

Category (категориальная ось)

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

Характерные особенности:

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

Пример:

const config = {
  type: 'bar',
  data: {
    labels: ['Январь', 'Февраль', 'Март'],
    datasets: [{
      label: 'Продажи',
      data: [50, 80, 65]
    }]
  },
  options: {
    scales: {
      x: {
        type: 'category'
      }
    }
  }
};

Семантика:

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

Применение:

  • временные периоды без строгого интервала
  • списки объектов (страны, продукты, категории)
  • сравнительные визуализации

Time (временная ось)

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

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

  • требует адаптера даты (например, date-fns или moment)
  • поддерживает формат ISO, Date objects, timestamps
  • автоматическое масштабирование по временным интервалам

Пример:

const config = {
  type: 'line',
  data: {
    datasets: [{
      label: 'Температура',
      data: [
        { x: '2026-01-01', y: 5 },
        { x: '2026-01-02', y: 7 },
        { x: '2026-01-03', y: 4 }
      ]
    }]
  },
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'day'
        }
      }
    }
  }
};

Поведение:

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

Особенности конфигурации time:

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

Timeseries (временная серия)

Timeseries-ось расширяет подход time и ориентирована на высокопроизводительную работу с большими наборами временных данных.

Основные отличия от time:

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

Пример:

const config = {
  type: 'line',
  data: {
    datasets: [{
      label: 'Трафик',
      data: [
        { x: '2026-01-01T10:00:00Z', y: 120 },
        { x: '2026-01-01T11:00:00Z', y: 150 },
        { x: '2026-01-01T12:00:00Z', y: 180 }
      ]
    }]
  },
  options: {
    scales: {
      x: {
        type: 'timeseries'
      }
    }
  }
};

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

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

Семантика:

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

Сравнение поведения типов осей

Линейная и логарифмическая

  • linear: равномерный шаг
  • logarithmic: экспоненциальный шаг

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

Category и числовые оси

  • category не оперирует числами
  • linear и logarithmic работают с числовыми диапазонами

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

Time и timeseries

  • time требует более гибкой конфигурации форматов
  • timeseries ориентирована на потоковые и крупные данные

Обе оси обеспечивают работу с датами, но различаются уровнем оптимизации и требованиями к данным.

Настройка масштабов в Chart.js

Конфигурация осей выполняется через объект scales, где каждая ось задаётся по ключу:

options: {
  scales: {
    x: {
      type: 'category'
    },
    y: {
      type: 'linear'
    }
  }
}

Дополнительные параметры:

  • min, max — фиксация диапазона
  • ticks — управление делениями
  • grid — настройка сетки
  • position — расположение оси (top, bottom, left, right)

Поведение ticks и форматирования

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

  • linear: числовая интерполяция
  • logarithmic: степени основания
  • category: строки массива labels
  • time/timeseries: форматированные даты

Пример кастомизации:

ticks: {
  callback: function(value) {
    return value + ' ед.';
  }
}

Особенности обработки данных

Chart.js автоматически нормализует данные в зависимости от типа оси:

  • category требует синхронизации с labels
  • linear и logarithmic работают с массивами чисел
  • time/timeseries интерпретируют объекты с x и y

При использовании временных осей допустимы разные форматы входных данных:

  • ISO строки
  • timestamp (ms)
  • объекты Date

Поведение сетки (grid)

Сетка адаптируется к типу оси:

  • linear: равномерные линии
  • logarithmic: логарифмические деления
  • category: линии по категориям
  • time/timeseries: временные интервалы

Настройка:

grid: {
  display: true,
  color: '#e0e0e0'
}

Комбинирование осей разных типов

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

scales: {
  x: {
    type: 'time'
  },
  y: {
    type: 'logarithmic'
  }
}

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

Обработка ошибок и ограничений

Поведение осей зависит от корректности данных:

  • logarithmic не поддерживает ноль и отрицательные значения
  • category требует соответствия labels и data.length
  • time/timeseries требуют валидных дат

Некорректные значения приводят к пропускам точек или искажению шкалы.

Оглавление