Диаграмма Sunburst

Sunburst — это иерархическая круговая диаграмма для визуализации данных с несколькими уровнями вложенности (деревьев).

Каждый уровень структуры (например, год → категория → продукт) отображается отдельным кольцом, а ветви разной длины позволяют наглядно увидеть иерархию, объёмы, структуру.

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

Отображение иерархий и распределения: оргструктуры, ассортимент, категории, бюджеты, процессы Разбор состава и вложенности (например, продажи по категориям, департаментам, регионам) Визуализация путей, разветвлений, распределений с разной глубиной группировки

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

Центр диаграммы — корневой уровень (например, "Год"). Каждый следующий уровень — новое кольцо, отражающее дочерние элементы (категории, подкатегории, объекты и т.д.). Ветвь может заканчиваться на любом уровне (необязательно все ветки одной глубины). Размер сектора соответствует значению у соответствующего элемента.

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

Каждый элемент — объект с обязательным полем name, может содержать поле value и массив children (для дочерних элементов). Можно делать разную глубину ветвления.

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

javascript

function dataCal(originData) {
  var dataModels = originData.dataModels;
  var colData = dataModels[0].colData;
  var data = [];
  for (var i = 0; i < colData[0].length; i++) {
    data[i] = {
      value: colData[3][i],
      product: colData[2][i],
      category: colData[1][i],
      year: colData[0][i]
    };
  }
  return data;
}

В операторе конфигурации данные преобразуются к нужному виду.

javascript

function optionCal(data, chartConfig, chart) {
  var yearMap = {};
  data.forEach(function(item) {
    var year = item.year || item['year'];
    var category = item.category || item['category'];
    var product = (item.product || item['product'] || '').toString().trim();
    var value = Math.round(Number(item.value));

    if (!yearMap[year]) yearMap[year] = { name: year, children: [] };

    // ищем, есть ли уже такая категория
    var catNode = yearMap[year].children.find(function(child) {
      return child.name === category;
    });

    if (!catNode) {
      catNode = { name: category, children: [] };
      yearMap[year].children.push(catNode);
    }

    if (product) {
      // если продукт задан, добавляем на уровень продукта
      catNode.children.push({
        name: product,
        value: value
      });
    } else {
      // если продукт отсутствует, кладём value на категорию
      catNode.value = value;
    }
  });

  // Преобразуем в массив для sunburst
  var sunburstData = Object.values(yearMap);

  var option = {
    title: { text: 'Sunburst Chart Example', left: 'center' },
    tooltip: {},
    series: [{
      type: 'sunburst',
      data: sunburstData,
      radius: [0, '90%'],
      label: { rotate: 'radial' }
    }]
  };
  return option;
}