Объект data: datasets и labels

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

Общая структура data

Базовый формат объекта данных выглядит следующим образом:

const data = {
  labels: [],
  datasets: []
};

Основные элементы:

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

Chart.js интерпретирует data в зависимости от типа графика, но логика связи labels и datasets остаётся фундаментальной.

labels: роль и поведение

Назначение labels

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

  • категории на оси X (bar, line, radar)
  • временные метки (time scale)
  • идентификаторы точек (pie, doughnut)

Пример:

const data = {
  labels: ['Январь', 'Февраль', 'Март', 'Апрель'],
  datasets: []
};

Связь labels с данными

Каждое значение в labels соответствует позиции элемента в массиве data внутри каждого dataset.

const data = {
  labels: ['A', 'B', 'C'],
  datasets: [
    {
      label: 'Продажи',
      data: [10, 20, 30]
    }
  ]
};

Соответствие:

labels data
A 10
B 20
C 30

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

  1. Синхронизация по индексу Chart.js не сопоставляет значения по ключам, только по индексам массива.

  2. Необязательность labels в scatter charts В точечных графиках (scatter) labels могут отсутствовать, так как используются координаты x и y.

  3. Гибкость типов данных labels могут быть:

    • строками
    • числами
    • датами (при time scale)

datasets: структура и назначение

Общая концепция

datasets — массив объектов, каждый из которых описывает отдельный набор данных, визуализируемый на одном графике. Это может быть:

  • несколько линий на line chart
  • несколько групп столбцов на bar chart
  • несколько серий точек на scatter plot
datasets: [
  { ... },
  { ... }
]

Базовая структура dataset

Минимальный dataset:

{
  label: 'Набор данных',
  data: [10, 20, 30]
}

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

label

Имя серии данных, отображаемое в легенде.

label: 'Продажи 2026'

data

Массив значений, соответствующих labels.

data: [5, 10, 15, 20]

Связь datasets с labels

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

  • индекс i в labels соответствует индексу i в data каждого dataset

Пример с несколькими наборами:

const data = {
  labels: ['Янв', 'Фев', 'Мар'],
  datasets: [
    {
      label: '2024',
      data: [10, 20, 30]
    },
    {
      label: '2025',
      data: [15, 25, 35]
    }
  ]
};

Визуально:

Месяц 2024 2025
Янв 10 15
Фев 20 25
Мар 30 35

Множественные datasets и их визуальная роль

Каждый dataset может иметь собственный стиль отображения. Это делает Chart.js мощным инструментом для сравнения данных.

Пример оформления:

{
  label: 'Продажи',
  data: [10, 20, 30],
  borderColor: 'blue',
  backgroundColor: 'lightblue'
}

Различия между datasets:

  • цвет линии или столбцов
  • тип линии (сплошная, пунктирная)
  • толщина
  • заливка области
  • тип точки

data: различные форматы

1. Простой массив

Используется при синхронизации с labels:

data: [1, 2, 3, 4]

2. Объекты с координатами (scatter / line)

Для графиков с координатной системой:

data: [
  { x: 1, y: 10 },
  { x: 2, y: 20 },
  { x: 3, y: 30 }
]

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

  • labels могут отсутствовать
  • оси определяются по значениям x/y

3. Частично заполненные данные

Допускается использование null:

data: [10, null, 30]

Значение null означает разрыв линии или отсутствие точки.

Несоответствие lengths labels и data

При различной длине массивов Chart.js обрабатывает данные следующим образом:

  • лишние элементы data игнорируются
  • отсутствующие значения трактуются как undefined
  • отсутствующие labels могут приводить к пустым категориям

Пример:

labels: ['A', 'B'],
data: [10, 20, 30]

Результат:

  • значение 30 не будет отображено

Несколько типов данных в одном графике

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

datasets: [
  {
    type: 'bar',
    data: [10, 20, 30]
  },
  {
    type: 'line',
    data: [15, 25, 35]
  }
]

labels при этом остаются общим контекстом категорий.

Гибкие labels: работа с временными шкалами

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

labels: [
  '2026-01-01',
  '2026-01-02',
  '2026-01-03'
]

или полностью передаваться через dataset:

data: [
  { x: '2026-01-01', y: 10 },
  { x: '2026-01-02', y: 20 }
]

Пустые datasets и их влияние

Dataset без data:

{
  label: 'Пустой набор',
  data: []
}

Последствия:

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

Индексация и порядок отображения

Порядок datasets в массиве влияет на визуальную отрисовку:

datasets: [
  { label: 'A', data: [1, 2, 3] },
  { label: 'B', data: [2, 3, 4] }
]
  • первый dataset рисуется первым (может быть перекрыт вторым)
  • порядок влияет на z-index в визуализации

Работа с динамическими данными

datasets и labels часто изменяются во время выполнения:

chart.data.labels.push('Май');
chart.data.datasets[0].data.push(40);
chart.update();

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

  • изменение labels требует синхронного обновления всех datasets
  • изменение data влияет только на конкретную серию

Пустые значения и пропуски

Chart.js различает:

  • null — разрыв линии
  • undefined — пропуск
  • отсутствие элемента — сдвиг индексов
data: [10, null, 30]

Результат:

  • линия прерывается между 10 и 30

Использование нескольких наборов данных в аналитике

Типичный сценарий:

datasets: [
  { label: 'Доход', data: [100, 200, 300] },
  { label: 'Расход', data: [80, 150, 250] },
  { label: 'Прибыль', data: [20, 50, 50] }
]

Такое представление позволяет:

  • сравнивать категории
  • отслеживать динамику
  • строить многослойные графики

Особенности интерпретации labels в разных типах графиков

Bar / Line

  • labels = категории

Pie / Doughnut

  • labels = сегменты

Radar

  • labels = оси характеристик

Scatter

  • labels обычно не используются

Закономерности проектирования структуры data

Корректная структура данных опирается на три принципа:

  1. Согласованность индексов
  2. Единообразие длины массивов
  3. Явное разделение серий данных через datasets

Ошибки при работе с labels и datasets

Типичные проблемы:

  • несоответствие длины labels и data
  • отсутствие label у dataset (теряется легенда)
  • использование объектов вместо массивов без настройки parsing
  • смешивание категориальных и координатных данных
Оглавление