Hello!

It is necessary to implement a donut chart for skills, as in the image.

The complexity of the first: from the visual side, how to "flip" the animation, so that it starts from the upper right corner.

Question two: on the technical side, how to implement it so that when changing the value in the div class = "donut_value", the value in donut_circle_value stroke-dashoffset = "..." changes?

enter image description here https://jsfiddle.net/xpvt214o/305391/

<div id="donut"> <div class="donut" style="margin-left:50px"> <svg class="circle-chart" viewbox="0 0 35 35" width="300" height="300" xmlns="http://www.w3.org/2000/svg" style="position:absolute;"> <circle class="donut_background" stroke="#E9E9E9" stroke-width="0.5" fill="none" stroke-linecap="round" stroke-dasharray="85,100" cx="17.5" cy="17.5" r="15.91549431"/> <circle class="donut_circle_value" stroke="#2a8679" stroke-width="0.5" stroke-dasharray="70,100" stroke-dashoffset="70" stroke-linecap="round" fill="none" cx="17.5" cy="17.5" r="15.91549431" /> </svg> <div class="donut_value" style="color:#2a8679; left:250px; top:80px;">70</div> </div> </div>

    1 answer 1

    in css we add:

     .circle-chart { transform: rotateX(180deg) rotateZ(45deg); }

    This will turn the circle, and in js, in the selection of donut_value elements, add the line:

      $(this).parent().find('.donut_circle_value').attr('stroke-dasharray', ($(this).text() * 85/100) + ', 100');

    An example can be found here JsFiddle

    • thanks, what you need! - Sveta Pershay pm