Радарная диаграмма (radar)

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

Chart.js реализует радарные диаграммы через тип графика radar, поддерживающий наборы данных, настройку шкал, стилизацию линий, точек и заполнения области.

Базовая структура радарной диаграммы

Минимальная конфигурация включает:

  • тип графика radar
  • массив меток (labels), определяющих оси
  • набор данных (datasets), содержащий значения по каждой оси
const config = {
  type: 'radar',
  data: {
    labels: ['Сила', 'Выносливость', 'Скорость', 'Интеллект', 'Ловкость'],
    datasets: [{
      label: 'Персонаж A',
      data: [80, 65, 90, 70, 85]
    }]
  }
};

Отрисовка выполняется через Chart:

const ctx = document.getElementById('chart').getContext('2d');
new Chart(ctx, config);

Особенности структуры данных

Каждое значение в массиве data соответствует одной метке из labels. Порядок строго синхронизирован:

  • labels[0] → data[0]
  • labels[1] → data[1]
  • и так далее

Несоответствие длины массивов приводит к некорректному отображению или игнорированию лишних значений.

Множественные наборы данных

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

datasets: [
  {
    label: 'Персонаж A',
    data: [80, 65, 90, 70, 85]
  },
  {
    label: 'Персонаж B',
    data: [60, 75, 70, 85, 60]
  }
]

Каждый набор данных формирует отдельный многоугольник.

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

Цвет линий и заливки

Основные параметры визуализации:

  • borderColor — цвет контура
  • backgroundColor — заливка области
  • pointBackgroundColor — цвет точек
  • pointBorderColor — обводка точек
datasets: [{
  label: 'Персонаж A',
  data: [80, 65, 90, 70, 85],
  borderColor: 'rgb(54, 162, 235)',
  backgroundColor: 'rgba(54, 162, 235, 0.2)',
  pointBackgroundColor: 'rgb(54, 162, 235)'
}]

Управление толщиной линий и точками

borderWidth: 2,
pointRadius: 4,
pointHoverRadius: 6
  • borderWidth влияет на визуальную плотность контура
  • pointRadius управляет размером узлов
  • pointHoverRadius увеличивает точки при наведении

Шкала и нормализация значений

Радарная диаграмма использует радиальную шкалу (r-axis), которая по умолчанию автоматически подстраивается под диапазон данных.

Явное задание диапазона

options: {
  scales: {
    r: {
      min: 0,
      max: 100,
      ticks: {
        stepSize: 20
      }
    }
  }
}

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

Подписи и оформление осей

Настройка меток шкалы

ticks: {
  display: true,
  backdropColor: 'transparent',
  color: '#666'
}

Подписи категорий (point labels)

pointLabels: {
  color: '#333',
  font: {
    size: 12
  }
}

Эти подписи располагаются вокруг диаграммы и соответствуют каждой оси.

Поведение сетки

Радиальная сетка формируется концентрическими окружностями и лучами.

grid: {
  circular: true,
  color: 'rgba(0,0,0,0.1)'
}
  • circular: true делает сетку круговой
  • color управляет визуальной плотностью структуры

Управление углами и направлением

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

options: {
  scales: {
    r: {
      angleLines: {
        display: true
      },
      beginAtZero: true
    }
  }
}

Также возможно управление направлением вращения через глобальные параметры.

Анимация

Радарная диаграмма поддерживает анимацию построения многоугольника.

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

Анимация применяется как к линиям, так и к заполнению области.

Tooltip (подсказки)

Подсказки отображают значение конкретной оси при наведении:

options: {
  plugins: {
    tooltip: {
      enabled: true
    }
  }
}

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

callbacks: {
  label: function(context) {
    return `${context.dataset.label}: ${context.raw}`;
  }
}

Работа с несколькими наборами данных

При наложении нескольких наборов данных важны:

  • прозрачность заливки
  • контраст линий
  • различимость цветов
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)'

Для второго набора:

backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)'

Поведение при масштабировании

Радарные диаграммы адаптивны и пересчитывают геометрию при изменении размеров контейнера. Важно учитывать:

  • относительные размеры canvas
  • отсутствие фиксированных пиксельных ограничений
  • корректную работу responsive: true
options: {
  responsive: true,
  maintainAspectRatio: false
}

Практические сценарии применения

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

  • сравнение характеристик объектов
  • оценка компетенций
  • профилирование показателей
  • визуализация баланса метрик
  • анализ сильных и слабых сторон системы

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

Особенности интерпретации данных

Форма многоугольника отражает распределение значений:

  • равномерный многоугольник — сбалансированные показатели
  • вытянутые формы — выраженные сильные стороны
  • провалы — слабые зоны

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

Ограничения формата

Радарная диаграмма имеет ряд структурных ограничений:

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

При увеличении количества параметров свыше 8–10 осей снижается визуальная различимость формы.

Оглавление