style body min height 600px circle stroke width 10 r 5 cx 10 cy 10 style svg height 300px width 300px viewBox 0 0 20 20 style border 1px solid gray border radius 0 g transform rotate 90 10 10 fill none g text id svgtext style font size 2px x 50 y 50 text anchor middle stroke 51c5cf stroke width 0 1px dy 3em text svg br input type range max 1000 value 500 oninput change input br input type range max 1000 value 500 oninput change input br input type range max 1000 value 500 oninput change input br input type range max 1000 value 500 oninput change input br script let data id s0 v 1 0 c red id s1 v 2 0 c green id s2 v 3 0 c blue id s3 v 4 0 c yellow let svg document getElementsByTagName svg 0 let g svg children 0 console log g g let sum 0 0 data forEach d i let color d c let ang d v let total 10 0 var circle document createElementNS http www w3 org 2000 svg circle g appendChild circle circle id d id circle setAttribute stroke color circle setAttribute stroke dashoffset calc sum 10 1 0 3 14 10 circle setAttribute stroke dasharray calc ang 10 1 0 3 14 10 calc 3 14 10 let text document createElementNS http www w3 org 2000 svg text svg appendChild text let tx Math cos sum total 3 14 2 0 3 14 0 5 let ty Math sin sum total 3 14 2 0 3 14 0 5 text setAttribute x 10 tx 8 0 text setAttribute y 10 ty 8 0 text setAttribute text anchor middle text setAttribute alignment baseline middle text setAttribute stroke black text setAttribute stroke width 0 1px text setAttribute dy 0 3em text classList add textsegment text style fontSize 2px text textContent test sum d v function change let v document getElementsByTagName input v v let total 0 v forEach el total parseInt el value let angRanges let prev 0 let next 0 v forEach el next parseInt el value angRanges push next prev prev next let t document getElementsByClassName textsegment t t let c document getElementsByTagName circle c c var sum 0 c forEach circle i let ang parseInt v i value circle setAttribute stroke dashoffset calc sum total 1 0 3 14 10 circle setAttribute stroke dasharray calc ang total 1 0 3 14 10 calc 3 14 10 let tx Math cos sum angRanges i 0 5 total 3 14 2 0 3 14 0 5 let ty Math sin sum angRanges i 0 5 total 3 14 2 0 3 14 0 5 t i setAttribute x 10 tx 8 0 centre circle offset t i setAttribute y 10 ty 8 0 t i textContent 100 angRanges i total toFixed 1 sum ang change function generateData t let v document getElementsByTagName input v v v 0 value 1000 Math sin 3 14 2 t 2 0 v 1 value 1000 Math cos 3 14 2 t 3 0 1 0 v 2 value 1000 Math cos 3 14 2 t 1 0 Math sin 3 14 2 t 6 v 3 value 1000 Math cos 3 14 2 t 6 0 change let count 0 const maxcount 10000 let intervalId setInterval count if count maxcount clearInterval intervalId generateData count maxcount let perc 100 count maxcount toFixed 1 document getElementById svgtext textContent perc 30 script
0 3em text classList add textsegment text style fontSize 2px text textContent test sum d v function change let v document getElementsByTagName input v v let total 0 v forEach el total parseInt el value let angRanges let prev 0 let next 0 v forEach el next parseInt el value angRanges push next prev prev next let t document getElementsByClassName textsegment t t let c document getElementsByTagName circle c c var sum 0 c forEach circle i let ang parseInt v i value circle setAttribute stroke dashoffset calc sum total 1 0 3 14 10 circle setAttribute stroke dasharray calc ang total 1 0 3 14 10 calc 3 14 10 let tx Math cos sum angRanges i 0 5 total 3 14 2 0 3 14 0 5 let ty Math sin sum angRanges i 0 5 total 3 14 2 0 3 14 0 5 t i setAttribute x 10 tx 8 0 centre circle offset t i setAttribute y 10 ty 8 0 t i textContent 100 angRanges i total toFixed 1 sum ang change function generateData t let v document getElementsByTagName input v v v 0 value 1000 Math sin 3 14 2 t 2 0 v 1 value 1000 Math cos 3 14 2 t 3 0 1 0 v 2 value 1000 Math cos 3 14 2 t 1 0 Math sin 3 14 2 t 6 v 3 value 1000 Math cos 3 14 2 t 6 0 change let count 0 const maxcount 10000 let intervalId setInterval count if count maxcount clearInterval intervalId generateData count maxcount let perc 100 count maxcount toFixed 1 document getElementById svgtext textContent perc 30 script