Столбчатая диаграмма (bar)

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

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

  • Ось X (категориальная) — отображает набор категорий или меток.
  • Ось Y (числовая) — отражает количественные значения.

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

В Chart.js базовая конфигурация bar-диаграммы выглядит следующим образом:

const config = {
  type: 'bar',
  data: {
    labels: ['Январь', 'Февраль', 'Март', 'Апрель'],
    datasets: [{
      label: 'Продажи',
      data: [12, 19, 7, 15],
      backgroundColor: 'rgba(54, 162, 235, 0.5)',
      borderColor: 'rgba(54, 162, 235, 1)',
      borderWidth: 1
    }]
  }
};

В этой структуре:

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

Многосерийные столбчатые диаграммы

Chart.js поддерживает отображение нескольких наборов данных одновременно. Это позволяет сравнивать несколько метрик по одной и той же шкале категорий.

const config = {
  type: 'bar',
  data: {
    labels: ['Январь', 'Февраль', 'Март'],
    datasets: [
      {
        label: '2024',
        data: [10, 20, 30],
        backgroundColor: 'rgba(255, 99, 132, 0.5)'
      },
      {
        label: '2025',
        data: [15, 25, 35],
        backgroundColor: 'rgba(54, 162, 235, 0.5)'
      }
    ]
  }
};

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

Настройка внешнего вида столбцов

Каждый столбец может быть стилизован независимо через параметры dataset:

  • backgroundColor — цвет заполнения
  • borderColor — цвет границы
  • borderWidth — толщина обводки
  • borderRadius — скругление углов
  • barPercentage — ширина столбца относительно доступного пространства
  • categoryPercentage — плотность группировки категорий

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

datasets: [{
  label: 'Посещения',
  data: [5, 10, 8],
  backgroundColor: 'rgba(75, 192, 192, 0.6)',
  borderColor: '#4bc0c0',
  borderWidth: 2,
  borderRadius: 6,
  barPercentage: 0.7,
  categoryPercentage: 0.8
}]

Горизонтальная столбчатая диаграмма

Изменение ориентации достигается параметром indexAxis. При значении 'y' диаграмма становится горизонтальной.

const config = {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      label: 'Значения',
      data: [30, 50, 20],
      backgroundColor: 'rgba(153, 102, 255, 0.5)'
    }]
  },
  options: {
    indexAxis: 'y'
  }
};

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

Работа с масштабами и осями

Система осей в Chart.js позволяет гибко управлять отображением значений.

Настройка оси Y

options: {
  scales: {
    y: {
      beginAtZero: true,
      ticks: {
        stepSize: 10
      }
    }
  }
}

Ограничение диапазона

y: {
  min: 0,
  max: 100
}

Форматирование значений

ticks: {
  callback: function(value) {
    return value + ' шт.';
  }
}

Стекированные столбчатые диаграммы

Stacked bar charts позволяют складывать значения нескольких наборов данных друг над другом.

const config = {
  type: 'bar',
  data: {
    labels: ['Q1', 'Q2', 'Q3'],
    datasets: [
      {
        label: 'Продукт A',
        data: [10, 20, 30],
        backgroundColor: 'rgba(255, 99, 132, 0.5)'
      },
      {
        label: 'Продукт B',
        data: [15, 25, 35],
        backgroundColor: 'rgba(54, 162, 235, 0.5)'
      }
    ]
  },
  options: {
    scales: {
      x: { stacked: true },
      y: { stacked: true }
    }
  }
};

Стекирование позволяет анализировать вклад каждой категории в общий результат.

Анимации и интерактивность

По умолчанию столбчатые диаграммы обладают встроенной анимацией появления. Её можно настраивать:

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

Интерактивные возможности включают:

  • hover-эффекты
  • выделение активного столбца
  • динамическое обновление данных
  • события клика по элементам

Пример обработки клика:

options: {
  onClick: (event, elements) => {
    if (elements.length > 0) {
      const index = elements[0].index;
      console.log('Выбран индекс:', index);
    }
  }
}

Управление толщиной и расстояниями

Параметры, влияющие на плотность отображения:

  • barThickness — фиксированная ширина столбца
  • maxBarThickness — максимальная ширина
  • minBarLength — минимальная длина столбца
datasets: [{
  data: [10, 20, 30],
  barThickness: 30
}]

Эти настройки полезны при адаптивной верстке и плотных наборах данных.

Обработка пустых и нулевых значений

Chart.js корректно отображает:

  • 0 — как отсутствующий по высоте столбец
  • null — как пропуск значения
  • undefined — игнорируется в расчётах

Пример:

data: [10, null, 25, 0, 40]

Пропуски визуально создают разрывы, что может быть использовано для обозначения отсутствующих данных.

Цветовые схемы и динамическое оформление

Цвета могут задаваться как статически, так и динамически:

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

Это позволяет создавать условную визуализацию, где цвет отражает состояние данных.

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

При работе с большим количеством категорий важно учитывать оптимизацию:

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

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

Использование плагинов

Chart.js поддерживает систему плагинов, расширяющих функциональность диаграмм:

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

Пример кастомного тултипа:

options: {
  plugins: {
    tooltip: {
      callbacks: {
        label: function(context) {
          return `Значение: ${context.raw}`;
        }
      }
    }
  }
}

Группировка и перекрытие столбцов

Существует два основных режима отображения:

  • grouped — столбцы расположены рядом
  • stacked — столбцы накладываются друг на друга

Переключение осуществляется через настройки scales.

Группировка полезна для сравнений, стекирование — для анализа структуры.

Контроль порядка отображения

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

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

Меньшее значение order отображается поверх других элементов.

Адаптивное поведение

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

  • фиксировать высоту canvas
  • ограничивать минимальную ширину столбцов
  • отключать автоматическое масштабирование

Это важно при интеграции в сложные интерфейсы и dashboards.

Оглавление