Радиальная диаграмма

Radar (радарная диаграмма, «паук», spider chart) — это круговая диаграмма, предназначенная для сравнения сразу нескольких категориальных/числовых показателей по разным осям.

Каждая ось отображает один показатель, а расстояние от центра до точки на оси — значение этого показателя. Линия или многоугольник соединяет значения для одного объекта/cерии.

Области применения:

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

Как работает:

На каждом луче (оси) — свой параметр/категория. Для каждого объекта/набора значений строится свой многоугольник/линия. Можно отобразить несколько объектов и сразу увидеть их профиль и отличия.

Структура данных:

indicator: массив объектов с названием оси (name) и максимумом (max) — определяют, что отображается на каждой оси. series.data: массивы значений (или объектов с значениями), по одному для каждого многоугольника/объекта.

Оператор данных при одной мере остается неизменным. Ниже представлен код для оператора конфигураций.

javascript

function optionCal(data, chartConfig, chart) {
  var categories = data.map(function(item) { return item.name; });
  var values = data.map(function(item) { return item.value; });

  var maxValue = Math.max.apply(null, values.map(function(v) { return Number(v); }));
  var indicators = categories.map(function(cat) {
  return { name: cat, max: maxValue };
  });

  // Собираем данные для одной серии
  var seriesData = [categories.map(function(product) {
    var found = data.find(function(item) { return item.product === product; });
    return found ? Number(found.value) : 0;
  })];

  var option = {
    title: { text: "Radar Chart Example", left: "center" },
    tooltip: {},
    radar: {
      indicator: indicators
    },
    series: [{
      name: "Прибыль",
      type: "radar",
      data: [
        {
          value: values,
          name: "Прибыль"
        }
      ]
    }]
  };
  return option;
}