材料設計ライト円グラフダイナミック

Question

こんにちは私はMaterial Design Lite Pie Chartを使用しています。ここで

がコードされています

<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> 

私は100のタグを追加する場合、それは100％の円を埋める必要があり、このダイナミックは私が意味することができますどのように..

Answer 1

あなたがコードする必要がありますが、自分自身です。私はSVG Path's（https://www.w3schools.com/graphics/svg_path.asp）を使って、洞と余弦でポイントを計算しました。それは簡単ではありませんが、そこにはlibaryやツールがありません。

パラメータ「d」を生成するための私のコード：私はあなたが洞とコサインで、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"をクリックすると、非常に良いアプレットがあり、洞を持つポイントを計算する方法が非常に優れています。次に、パーセント値（度=パーセント* 3.6）の度数を計算すればよいだけです。