Круговая диаграмма с секторами на SVG

Генератор простых круговых диаграмм с секторами.

Важно!

Сектора не кликабельные, не выделяемые, генерируется просто картинка.

Полный код:

/*
 * Создает круговую диаграмму с секторами
 * @param container {DOMElement}
 * @param chartData {Array.<{value: Number, color: String}>}
 * @param config {{strokeWidth: Number, radius: Number, start: String}}
 */
function createPie(container, chartData, config = {}) {
  const svgns = "http://www.w3.org/2000/svg";
  const offsetRatio = {
    top: 0.25,
    right: 0,
    left: 0.5,
    bottom: -0.25,
  }

  const radius = config.radius || 100;
  const strokeWidth = config.strokeWidth || 5;
  const fullRadius = radius + strokeWidth;

  // длина окружности 
  const length = 2 * Math.PI * radius; 

  // смещение начальной точки
  let startPoint = config.start in offsetRatio ? config.start : 'top';
  const chartOffset = length * offsetRatio[startPoint];

  // расчетные данные для построения секторов
  const sectors = [];
  chartData.forEach((sectorData, sectorIndex) => {
    // Длина сектора
    const width = length * sectorData.value / 100;
    // Смещение сектора от начальной точки
    let offset = chartOffset;

    if (sectorIndex > 0) {
      let prevSector = sectors[sectorIndex - 1];
      offset = prevSector.offset - prevSector.width;
    }

    sectors.push({
      ...sectorData,
      width,
      offset,
    })
  });

  const svg = createSvgElement('svg', {
    'viewBox': `0 0 ${fullRadius * 2} ${fullRadius * 2}`,
    'fill': 'none',
    'width': fullRadius * 2,
    'height': fullRadius * 2,
  });

  sectors.forEach(sector => {
    const circle = createSvgElement('circle', {
      cx: fullRadius,
      cy: fullRadius,
      r: radius,
      'stroke-dasharray': `${sector.width} ${length - sector.width}`,
      'stroke-dashoffset': sector.offset,
      'stroke': sector.color,
      'stroke-width': strokeWidth
    })

    svg.appendChild(circle);
  })

  container.appendChild(svg);

  function createSvgElement(elementName, attrs = {}) {
    const el = document.createElementNS(svgns, elementName);
    Object.entries(attrs).forEach(([attrName, attrValue]) => {
      el.setAttributeNS(null, attrName, attrValue)
    });
    return el;
  }
}

Функция createPie() принимает три параметра:

• элемент, внутри которого будет сгенерирован SVG;
• данные для графика;
• настройки графика.

Возможные настройки:

• radius — внешний радиус круга;
• strokeWidth — толщина круга;
• start — стартовая точка для отсчета секторов (top|left|right|bottom). По умолчанию график начинается сверху (и идет по часовой стрелке).

Пример на Codepen:

See the Pen Untitled by furrycat (@furrycat) on CodePen.