材料設計lite餅圖動態

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（https://www.w3schools.com/graphics/svg_path.asp），並用竇和餘弦計算了點。這並不容易，但是沒有任何庫或工具可以更容易地完成。

我生成參數「d」代碼：

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!"); 
} 

正如我所說的，你需要計算x和y的值與竇和餘弦。 （https://de.serlo.org/mathe/geometrie/sinus-kosinus-tangens/sinus-kosinus-tangens-einheitskreis/trigonometrie-einheitskreis）對不起德國的這個頁面，但是當你點擊「Veranschaulichung an einem Applet」時，它有一個非常好的小程序，它顯示了很好的如何用竇來計算點。那麼你只需要計算你的百分比值（degree = percent * 3.6）的度數值。