[英]Angular, svg - dynamically create circles in an svg
我一直在使用此articale創建svg餅圖
https://medium.com/@heyoka/scratch-made-svg-donut-pie-charts-in-html5-2c587e935d72
我在這里有一個exmapke,它使用angular從一個數據數組創建3個單獨的餅圖。
https://stackblitz.com/edit/svg-donuts-uskvrn?file=src/app/donuts.component.ts
現在,我需要創建一張餅圖,其中一張圖上的所有部分都包含在內。
是否可以使用Angular在svg中創建圓,就像這樣。
<circle
*ngFor="let dount of dountData; let i = index;"
class="donut-segment"
cx="21"
cy="21"
r="15.91549430918954"
fill="transparent"
[attr.stroke]="donut.color"
stroke-width="3"
[attr.stroke-dasharray]="donut.percent + ' ' + (100 - donut.percent)"
[attr.stroke-dashoffset]=strokeDashOffset>
</circle>
當然,在同一svg中繪制所有圓圈,而不是在三個單獨的svg中繪制。 這是將donuts.template.html
修改為將它們全部繪制在同一svg中的代碼:
<div>
<svg width="100%" height="100%" viewBox="0 0 42 42" class="donut">
<circle class="donut-hole"
cx="21"
cy="21"
r="15.91549430918954"
fill="#fff"></circle>
<circle class="donut-ring"
cx="21"
cy="21"
r="15.91549430918954"
fill="transparent"
stroke="#d2d3d4"
stroke-width="3"></circle>
<g *ngFor="let donut of donutData; let i = index;">
{{updatePercent(i, donut)}}
<circle class="donut-segment"
cx="21"
cy="21"
r="15.91549430918954"
fill="transparent"
[attr.stroke]="donut.color"
stroke-width="3"
[attr.stroke-dasharray]="donut.percent + ' ' + (100 - donut.percent)"
[attr.stroke-dashoffset]=strokeDashOffset></circle>
</g>
</svg>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.