Svg диаграмма прогресса с динамически изменяемыми линиями

Question

Я пытаюсь создать SVG код, реализующий что-то похожее на это:

Строки (линии) полностью динамические, поскольку они поступают из API. Я хочу нанести линии на полученные точки (в виде массива процентных значений). Необязательно чтобы линии располагались в указанной последовательности, и расстояние между двумя секциями, ограниченных линиями, тоже не обязательно должно быть одинаковым.

Я пытаюсь сделать что-то вроде, как получается ниже, но не могу придумать логику для размещения линий.
Я попытался следовать ответу, как здесь: https://stackoverflow.com/a/66076805/6456247, но расстояние между линиями в том ответе одинаковое. В моем сценарии это решение не подходит.

Fiddle: https://jsfiddle.net/puq8v594/2/

let divisionsElement = document.getElementById('divisions');
let length = parseInt(divisionsElement.getAttribute("r")) * Math.PI;
let divisionsArray = [20,30,80,90]; //stroke at 20%, 30%,80%,90% position
let METER_DIVISIONS_GAP = 0.2;

divisionsArray.map(ele => {
    setupPath(ele);
})


function setupPath(val) {
    divisionsElement.setAttribute("stroke-dasharray", val + ' ' +METER_DIVISIONS_GAP);
}

circle {
  fill: none;
}
.circle-back {
  stroke: #F8F6F0;
  stroke-width:9px;
}

.circle-fill {
  stroke: grey;
  stroke-width: 10px;
}

.circle-progress {
  stroke: blue;
  stroke-width:9px;
}

<svg viewBox="0 0 126 126" preserveAspectRatio="xMinYMin meet">

  <clipPath id="cut-off">
    <rect x="0" y="0" width="100%" height="50" />
  </clipPath>

  <clipPath id="progress-percent">
    <path x="0" y="0" width="12%" height="50" />
  </clipPath>
  
  <g>
    <circle r="35%" cx="40%" cy="40%" class="circle-fill" clip-path="url(#cut-off)" />

    <circle id="divisions" r="35%" cx="40%" cy="40%" class="circle-back" clip-path="url(#cut-off)" 
    stroke-dasharray="20 0.5" stroke-dashoffset="25" />

    <circle r="35%" cx="40%" cy="40%" class="circle-progress" clip-path="url(#progress-percent)" />
  </g>
  
</svg>

_{Свободный перевод вопроса SVG gauge meter with dynamic strokes от участника @Kshri.}

Answer 1

Возможно, было бы проще сделать это просто путем дуги с pathLength, установленным на 100 (или почти 100).

let data =[5 , 10 , 25  ,25 , 6 , 9  , 20];
let i=0;
let drawArray = "";
let arcPath = document.getElementById("meter");

function setupPath() {
    for (i=0; i < data.length; i++) {
      drawArray = drawArray + (data[i] - 0.5) + " 0.5 ";
    }
  arcPath.setAttribute("stroke-dasharray", drawArray);
}; setupPath();

<svg width="800px" height="600px" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin meet">
 
    <path id="meter" fill="none" stroke-dasharray="" stroke-width="20" stroke="blue" pathLength="99.5" d="M30 100 A 40 40 0 0 1 170 100" />
  
</svg>

Update:

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

Я также понял, что вам нужна частичная заливка - чтобы вы могли контролировать, где заполняется прогресс датчик, изменяя переменную - indexOfFill.

var data = [5, 10 ,25 ,25 ,6 ,9 ,20 ,16 ,33 ,45 ,67];
var dataSum = data.reduce((partial_sum, a) => partial_sum + a, 0);
var indexOfFill = 3;

var i=0;
var drawArray = "";
var arcPath = document.getElementById("meter-back");
var filledPath = document.getElementById("meter-fill");


function setupPath() {
  
  // Draw the background
    for (i=0; i < data.length; i++) {
      drawArray = drawArray + (data[i] - (0.5 * (dataSum/100)) + " " + 0.5*(dataSum/100) +" ")};
    arcPath.setAttribute("stroke-dasharray", drawArray);
    arcPath.setAttribute("pathLength", dataSum - (0.5 * (dataSum/100)));
  
  //Draw the fill
  drawArray="";
    for (i=0; i < indexOfFill; i++) {
      if ( (i + 1) === indexOfFill ) {
        drawArray = drawArray + (data[i] - (0.5 * (dataSum/100)) + " " + dataSum)
      } else {
        drawArray = drawArray + (data[i] - (0.5 * (dataSum/100)) + " " + 0.5*(dataSum/100) +" ")}};
    filledPath.setAttribute("stroke-dasharray", drawArray);
    filledPath.setAttribute("pathLength", dataSum - (0.5 * (dataSum/100)));  
  
}; setupPath();

<svg width="800px" height="600px" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin meet">
 <defs>
  <filter id="outline" y="-50%" height="200%">
    <feMorphology operator="erode" radius="0.2"/>
    <feComposite operator="out" in="SourceGraphic" result="outline"/>
    <feFlood flood-color="black"/>
    <feComposite operator="in" in2="outline"/>
    <feComposite operator="atop" in2="SourceGraphic"/>
   </filter>
  </defs>
  
  <g filter="url(#outline)">
    <path id="meter-back" fill="none" stroke-dasharray="" stroke-width="20" stroke="white" pathLength="99.5" d="M30 100 A 40 40 0 0 1 170 100" />
    
    <path id="meter-fill" fill="none" stroke-dasharray="" stroke-width="20" stroke="rgb(90,90,220)" pathLength="99.5" d="M30 100 A 40 40 0 0 1 170 100" />
  </g>
</svg>

_{Свободный перевод ответа от участника @Michael Mullany.}

БЛОГ НА HUSL

Svg диаграмма прогресса с динамически изменяемыми линиями

Ответы (1 шт):

Update: