Структура объекта конфигурации

Объект конфигурации в Chart.js представляет собой центральную структуру, через которую определяется поведение, данные и визуальное представление графика. Он передаётся при создании экземпляра диаграммы и формирует всю логику от типа графика до тонкой настройки анимаций и осей.

Базовая структура конфигурации включает три ключевых блока:

  • type — тип диаграммы
  • data — набор данных и меток
  • options — параметры отображения и поведения

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

  • plugins — регистрация и настройка плагинов
  • defaults — глобальные переопределения
  • interaction — управление взаимодействием пользователя

Типовая форма объекта выглядит следующим образом:

const config = {
  type: 'bar',
  data: {},
  options: {}
};

Каждый из этих разделов имеет собственную вложенную структуру и влияет на конкретную часть визуализации.

Поле type: определение типа диаграммы

Поле type задаёт базовый шаблон рендера. Chart.js использует его для выбора внутреннего контроллера, отвечающего за построение графика.

Основные значения:

  • line — линейный график
  • bar — столбчатая диаграмма
  • pie — круговая диаграмма
  • doughnut — кольцевая диаграмма
  • radar — радарная диаграмма
  • polarArea — полярная диаграмма
  • scatter — диаграмма рассеяния

Пример:

const config = {
  type: 'line',
  data: {},
  options: {}
};

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

Структура data: модель данных

Блок data описывает содержимое графика. Он включает метки и наборы данных.

data: {
  labels: [],
  datasets: []
}

labels: ось категорий

Массив labels задаёт подписи по оси X (или категориальной оси). В зависимости от типа графика они могут интерпретироваться по-разному.

Пример:

labels: ['Январь', 'Февраль', 'Март']

Для временных шкал labels могут отсутствовать, если используется адаптер дат.

datasets: наборы данных

Массив datasets содержит объекты, каждый из которых описывает отдельную серию данных.

datasets: [
  {
    label: 'Продажи',
    data: [10, 20, 30]
  }
]

Каждый dataset включает:

  • label — имя серии
  • data — массив значений
  • backgroundColor — заливка
  • borderColor — цвет линии/границы
  • borderWidth — толщина линии
  • hidden — скрытие серии

Пример расширенного dataset:

{
  label: 'Выручка',
  data: [120, 190, 300],
  backgroundColor: 'rgba(54, 162, 235, 0.2)',
  borderColor: 'rgba(54, 162, 235, 1)',
  borderWidth: 2,
  tension: 0.4
}

options: система настройки поведения и отображения

Блок options является наиболее сложным и содержит иерархию параметров.

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

options: {
  responsive: true,
  plugins: {},
  scales: {},
  interaction: {},
  animation: {}
}

responsive: адаптивность

Параметр responsive управляет реакцией графика на изменение размеров контейнера.

  • true — график адаптируется
  • false — фиксированные размеры

Дополнительно используется:

  • maintainAspectRatio — сохранение пропорций
options: {
  responsive: true,
  maintainAspectRatio: false
}

scales: настройка осей

Блок scales определяет поведение координатных осей. В Chart.js каждая ось является отдельным объектом.

scales: {
  x: {},
  y: {}
}

Типы осей

  • category — категориальная
  • linear — линейная
  • logarithmic — логарифмическая
  • time — временная

Пример настройки линейной оси:

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

ticks: форматирование значений

Объект ticks управляет отображением подписей:

y: {
  ticks: {
    stepSize: 10,
    color: '#666',
    callback: function(value) {
      return value + ' ₽';
    }
  }
}

grid: сетка

x: {
  grid: {
    display: false
  }
}

Сетка может управляться отдельно для каждой оси.

plugins: расширение функциональности

Блок plugins управляет встроенными и сторонними расширениями.

Структура plugins

plugins: {
  legend: {},
  tooltip: {},
  title: {}
}

legend: легенда

legend: {
  display: true,
  position: 'top',
  labels: {
    color: '#333'
  }
}

tooltip: всплывающие подсказки

tooltip: {
  enabled: true,
  mode: 'index',
  intersect: false
}

Параметр mode определяет логику отображения:

  • nearest
  • index
  • dataset
  • point

title: заголовок графика

title: {
  display: true,
  text: 'Динамика продаж'
}

interaction: модель взаимодействия

Блок interaction управляет тем, как график реагирует на курсор и события.

interaction: {
  mode: 'nearest',
  axis: 'x',
  intersect: false
}

mode

  • nearest — ближайшая точка
  • index — все элементы по индексу
  • dataset — весь dataset
  • point — конкретная точка

intersect

  • true — событие только при точном попадании
  • false — более широкая зона срабатывания

animation: система анимаций

Блок animation отвечает за переходы и плавность отрисовки.

animation: {
  duration: 1000,
  easing: 'easeOutQuart'
}

Основные параметры

  • duration — длительность в миллисекундах
  • easing — функция сглаживания
  • delay — задержка запуска

Пример:

animation: {
  duration: 1500,
  easing: 'easeInOutQuad',
  delay: 200
}

Дополнительные свойства конфигурации

plugins на уровне экземпляра

Плагины могут подключаться локально:

plugins: [ChartDataLabels]

parsing: управление интерпретацией данных

options: {
  parsing: {
    xAxisKey: 'date',
    yAxisKey: 'value'
  }
}

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

normalized: оптимизация данных

data: {
  datasets: [{
    data: largeDataset,
    normalized: true
  }]
}

Смешанные конфигурации (multi-type charts)

Chart.js поддерживает комбинированные графики, где разные datasets имеют разные типы.

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

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

Глобальные настройки через defaults

Chart.js позволяет задавать глобальные параметры:

Chart.defaults.font.size = 14;
Chart.defaults.color = '#444';

Это влияет на все создаваемые графики, если не переопределено локально.

Порядок обработки конфигурации

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

  1. Глобальные defaults
  2. Конфигурация экземпляра
  3. Настройки dataset
  4. Плагины
  5. Локальные переопределения осей и элементов

Приоритет всегда отдается наиболее специфичному уровню.

Особенности структуры в современных версиях

В актуальных версиях Chart.js наблюдается усиление модульности:

  • плагины выделены в отдельную систему
  • оси полностью конфигурируемы как независимые объекты
  • interaction и parsing стали самостоятельными подсистемами
  • dataset-ориентированная настройка стала более гибкой

Это привело к тому, что конфигурационный объект стал не просто JSON-структурой, а декларативной моделью поведения визуализации.

Оглавление