재질 디자인 라이트 파이 차트 동적

Question

안녕하세요 저는 재료 디자인 라이트 Pie Chart을 사용하고 있습니다.

내가 100 태그를 추가하면 내가 그것을 100 % 원을 작성해야 내 말이 역동적를 만들 수있는 방법

<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop"> 
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#piechart" mask="url(#piemask)"></use> 
    <text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1"> 
     82 
     <tspan font-size="0.2" dy="-0.07">%</tspan> 
    </text> 
</svg> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="position: fixed; left: -1000px; height: -1000px;"> 
    <defs> 
     <mask id="piemask" maskContentUnits="objectBoundingBox"> 
     <circle cx="0.5" cy="0.5" r="0.49" fill="white"></circle> 
     <circle cx="0.5" cy="0.5" r="0.40" fill="black"></circle> 
     </mask> 
     <g id="piechart"> 
     <circle cx="0.5" cy="0.5" r="0.5"></circle> 
     <path d="M 0.5 0.5 0.5 0 A 0.5 0.5 0 0 1 0.95 0.28 z" stroke="none" fill="rgba(255, 255, 255, 0.75)"></path> 
     </g> 
    </defs> 
</svg> 

..

Answer 1

당신은 코드가 자신한다 : 여기

는 코드입니다. 나는 SVG Path 's ( https://www.w3schools.com/graphics/svg_path.asp)를 사용하고 sinus와 cosinus로 포인트를 계산했다. 그것은 쉽지 않지만, 거기에 libary 또는 도구가 없어 쉽게 할 수 있습니다.

매개 변수 "D"를 생성하는 내 코드 : 난 당신이 부비동과 cosinus으로 x와 y 값을 계산해야 말했듯이

if (percent > 50 && percent <= 99) { 
    if (bool_main_circle) { 
     return "M100,50 A50,50 0 1,0 " + x + "," + y; 
    } else { 
     return "M100,50 A50,50 0 0,1 " + x + "," + y; 
    } 
} else if (percent <= 50 && percent >= 1) { 
    if (bool_main_circle) { 
     return "M100,50 A50,50 0 0,0 " + x + "," + y; 
    } else { 
     return "M100,50 A50,50 0 1,1 " + x + "," + y; 
    } 
} else if (percent == 100) { 
    if (bool_main_circle) { 
     return "M50,100a50,50 0 1,0 100,0a50,50 0 1,0 -100,0"; 
    } else { 
     return ""; 
    } 
} else if (percent === 0) { 
    if (bool_main_circle) { 
     return ""; 
    } else { 
     return "M50,100a50,50 0 1,0 100,0a50,50 0 1,0 -100,0"; 
    } 
} else { 
    console.log("Only values up to 100 percent are possible!"); 
} 

. (https://de.serlo.org/mathe/geometrie/sinus-kosinus-tangens/sinus-kosinus-tangens-einheitskreis/trigonometrie-einheitskreis)이 독일어 페이지는 유감 스럽지만 "Veranschaulichung an einem Applet"을 클릭하면 아주 좋은 애플릿이 있으며 부비동이있는 점을 계산하는 방법이 매우 좋습니다. 그런 다음 퍼센트 값 (degree = percent * 3.6)의 차수 값만 계산하면됩니다.