Привязка данных к осям

В Chart.js визуализация данных строится вокруг строгой модели соответствия между набором данных (datasets) и осями координат. Основная идея заключается в том, что каждый элемент данных должен быть корректно интерпретирован системой масштабов (scales) и отображён в соответствии с типом оси: категориальной, линейной, временной или пользовательской.

Модель данных и механизм интерпретации

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

Простейший вариант: массив значений

data: {
  labels: ['Янв', 'Фев', 'Мар', 'Апр'],
  datasets: [{
    label: 'Продажи',
    data: [12, 19, 3, 5]
  }]
}

В этом случае:

  • labels автоматически становятся значениями оси X (категориальная ось)
  • массив data привязывается к оси Y
  • соответствие устанавливается по индексу: labels[i] ↔︎ data[i]

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

Объектная форма данных: явная привязка координат

Для более гибкой работы Chart.js позволяет задавать точки как объекты:

data: [{
  x: 'Янв',
  y: 12
}, {
  x: 'Фев',
  y: 19
}]

В этом случае:

  • x напрямую привязывается к оси X
  • y напрямую привязывается к оси Y
  • labels больше не обязательны

Такой формат используется при работе с:

  • временными рядами
  • разреженными данными
  • неравномерными интервалами

Типы осей и влияние на привязку данных

Категориальная ось (category)

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

scales: {
  x: {
    type: 'category'
  }
}

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

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

Линейная ось (linear)

scales: {
  x: {
    type: 'linear'
  }
}

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

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

Пример:

data: [{
  x: 0,
  y: 10
}, {
  x: 5,
  y: 15
}]

Временная ось (time)

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

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

data: [{
  x: '2024-01-01',
  y: 10
}, {
  x: '2024-01-02',
  y: 15
}]

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

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

Явное указание осей через xAxisID и yAxisID

При использовании нескольких осей Chart.js позволяет явно связывать dataset с конкретной осью.

data: {
  datasets: [{
    label: 'Температура',
    data: [10, 20, 15],
    yAxisID: 'y'
  }, {
    label: 'Влажность',
    data: [30, 40, 35],
    yAxisID: 'y1'
  }]
}

Конфигурация осей:

scales: {
  y: {
    type: 'linear',
    position: 'left'
  },
  y1: {
    type: 'linear',
    position: 'right'
  }
}

Ключевые моменты:

  • yAxisID связывает dataset с конкретной осью Y
  • возможно использование нескольких шкал на одном графике
  • каждая ось может иметь независимые диапазоны

Отключение автоматического парсинга данных

Chart.js автоматически интерпретирует структуры данных, но это поведение можно отключить:

datasets: [{
  parsing: false,
  data: [{
    time: 1,
    value: 10
  }]
}]

В этом случае требуется явное указание ключей:

parsing: {
  xAxisKey: 'time',
  yAxisKey: 'value'
}

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

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

Привязка к сложным структурам данных

При работе с объектами данных можно использовать вложенные значения:

data: [{
  point: {
    time: 1,
    value: 10
  }
}]

И конфигурация:

parsing: {
  xAxisKey: 'point.time',
  yAxisKey: 'point.value'
}

Поддерживается:

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

Множественные наборы данных и общая ось

Несколько datasets могут использовать одну и ту же ось X:

datasets: [{
  label: 'A',
  data: [1, 2, 3]
}, {
  label: 'B',
  data: [3, 2, 1]
}]

Механизм привязки:

  • все datasets используют общий labels
  • индексация синхронизируется автоматически
  • порядок массивов критически важен

Переопределение оси X через indexAxis

Chart.js позволяет менять направление базовой оси:

indexAxis: 'y'

В этом случае:

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

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

type: 'bar',
indexAxis: 'y'

Нормализация и приведение данных

Перед отрисовкой Chart.js выполняет нормализацию:

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

При несовпадении структуры:

  • отсутствующие значения интерпретируются как null
  • разрывы в данных отображаются как пустоты
  • несоответствие индексов приводит к смещению точек

Ограничение диапазонов осей при привязке данных

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

scales: {
  y: {
    min: 0,
    max: 100
  }
}

Или динамическая настройка:

suggestedMin: 0,
suggestedMax: 100

Поведение:

  • min/max жёстко фиксируют диапазон
  • suggestedMin/suggestedMax влияют только на авторасчёт
  • данные вне диапазона могут быть скрыты визуально

Связь масштабов и структуры данных

Тип оси определяет допустимую форму данных:

Тип оси Формат данных Особенности
category массив значений индексное соответствие
linear {x, y} числа числовая интерполяция
time {x: дата, y} временная шкала
logarithmic {x, y} > 0 логарифмическое масштабирование

Влияние пропусков данных

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

  • null — разрыв линии
  • undefined — игнорирование точки
  • отсутствующий индекс — пустое значение

Пример:

data: [10, null, 20]

Результат:

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

Согласование нескольких осей и наборов данных

При сложной визуализации каждый dataset может иметь:

  • собственную ось Y
  • собственный масштаб
  • независимую нормализацию

Конфигурация:

datasets: [{
  yAxisID: 'y'
}, {
  yAxisID: 'y1'
}]

Это позволяет объединять:

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