Структура объекта dataset

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

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

const config = {
  type: 'line',
  data: {
    labels: ['Янв', 'Фев', 'Мар', 'Апр'],
    datasets: [
      {
        label: 'Продажи',
        data: [10, 20, 15, 30]
      }
    ]
  }
};

Каждый объект внутри datasets отвечает за отдельную линию, столбцы, сектор или другой элемент графика в зависимости от типа диаграммы.

Базовые поля dataset

label

Поле label задаёт текстовое имя набора данных. Оно используется:

  • в легенде графика
  • в tooltip при наведении
  • при программной идентификации набора
{
  label: 'Доход за месяц'
}

data

data — ключевое поле, содержащее значения, отображаемые на графике. Формат зависит от типа диаграммы:

Линейные, столбчатые и radar-графики:

data: [12, 19, 3, 5, 2, 3]

Scatter (точечные графики):

data: [
  { x: 10, y: 20 },
  { x: 15, y: 10 }
]

Bubble chart:

data: [
  { x: 10, y: 20, r: 8 }
]

Значение r определяет радиус точки.

Визуальные параметры dataset

backgroundColor

Определяет заливку элементов:

  • столбцов
  • точек
  • секторов pie/doughnut
backgroundColor: 'rgba(54, 162, 235, 0.5)'

Также поддерживается массив цветов:

backgroundColor: ['red', 'blue', 'green']

borderColor

Задаёт цвет границ элементов:

borderColor: '#36A2EB'

Часто используется вместе с borderWidth.

borderWidth

Толщина линии или границы:

borderWidth: 2

hoverBackgroundColor и hoverBorderColor

Параметры состояния наведения:

hoverBackgroundColor: 'rgba(255, 99, 132, 0.7)',
hoverBorderColor: '#ff6384'

Параметры линий (Line Chart)

tension

Определяет сглаженность линии:

y = f(x)

Чем выше значение, тем более плавной становится кривая:

tension: 0.4
  • 0 — ломаная линия
  • 1 — максимальное сглаживание

fill

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

fill: true

Возможные значения:

  • true — заливка включена
  • false — отключена
  • объект — сложная настройка привязки к другому dataset

stepped

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

stepped: true

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

Параметры точек (Point Elements)

pointRadius

Размер точки:

pointRadius: 4

pointStyle

Форма точки:

  • circle
  • rect
  • triangle
  • star
pointStyle: 'triangle'

pointBackgroundColor

Цвет заполнения точки:

pointBackgroundColor: '#ff6384'

Параметры столбцов (Bar Chart)

barThickness

Фиксированная ширина столбца:

barThickness: 20

maxBarThickness

Максимально допустимая ширина:

maxBarThickness: 40

categoryPercentage и barPercentage

Управляют распределением пространства:

categoryPercentage: 0.8,
barPercentage: 0.9

Параметры границ и стиля

borderSkipped

Определяет, с какой стороны отключать границу:

borderSkipped: 'bottom'

Варианты:

  • start
  • end
  • middle
  • bottom
  • left
  • right

Расширенные свойства dataset

hidden

Скрывает dataset при инициализации:

hidden: true

order

Определяет порядок отрисовки:

order: 2

Чем больше значение, тем выше слой отображения.

stack

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

stack: 'group1'

Позволяет объединять несколько dataset в одну группу накопления.

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

Простые массивы

Используются при совпадении с labels:

labels: ['A', 'B', 'C'],
data: [5, 10, 15]

Каждое значение соответствует индексу метки.

Объектный формат

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

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

Кастомные структуры

Chart.js позволяет расширять объекты:

data: [
  { x: 1, y: 10, customInfo: 'A' }
]

Дополнительные поля игнорируются визуализацией, но доступны в callbacks.

Callback-поля внутри dataset

parsing

Управляет разбором данных:

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

Используется при работе с объектными массивами.

tooltip callbacks (через внешнюю конфигурацию)

Хотя tooltip задаётся вне dataset, сами данные dataset активно используются для кастомизации отображения значений через callbacks.

Особенности работы нескольких dataset

При использовании нескольких наборов данных структура расширяется:

datasets: [
  {
    label: '2023',
    data: [10, 20, 30]
  },
  {
    label: '2024',
    data: [15, 25, 35]
  }
]

Каждый dataset:

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

Взаимодействие dataset с типами графиков

Line chart

  • поддерживает tension, fill, stepped
  • основное значение — последовательность точек

Bar chart

  • акцент на ширине и группировке
  • важны barPercentage, categoryPercentage

Pie/Doughnut

  • каждый dataset обычно содержит один набор значений
  • важен backgroundColor как массив

Scatter/Bubble

  • используется координатная структура {x, y}
  • bubble добавляет параметр r

Поведение dataset при обновлении данных

Chart.js реагирует на изменение массива data:

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

Пример обновления:

chart.data.datasets[0].data.push(40);
chart.update();

Внутренняя модель dataset

Внутри Chart.js dataset преобразуется в набор элементов, каждый из которых содержит:

  • рассчитанные координаты
  • стили
  • контекст взаимодействия (hover, tooltip)
  • привязку к оси

Это позволяет разделять:

  • логические данные (dataset)
  • визуальные элементы (elements)

Контекст выполнения dataset

Каждый dataset получает контекст, используемый для динамических функций:

backgroundColor: (context) => {
  return context.raw > 10 ? 'green' : 'red';
}

Контекст содержит:

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