Angular/SVG-将数据传递到SVG [英] Angular / svg - pass data into svg
问题描述
我在这里有一个堆叠闪电- https://stackblitz.com/edit/angular-vkwets?file=src%2Fapp%2Fdonuts.template.html
I have a stackblitz here - https://stackblitz.com/edit/angular-vkwets?file=src%2Fapp%2Fdonuts.template.html
我有一个Angular组件,它为传递给该组件的数组的每个数据点创建一个svg甜甜圈图.
I have an Angular component that creates an svg donut chart for each data point of an array passed to the component.
我可以访问传递到组件中的数据,但是可以在svg中使用它.
I can access the data passed into the component but is it possible to use this in the svg.
我想使用传递给组件的数据更新svg中的'stroke-dasharray'.
I would like to update the 'stroke-dasharray' in the svg using the data passed to the component.
类似于 stroke-dasharray = donut.percent 100-donut.perecent
<div>
<ul>
<li *ngFor="let donut of donutData">
{{donut.percent}}
<svg width="20%" height="20%" 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>
<circle class="donut-segment"
cx="21"
cy="21"
r="15.91549430918954"
fill="transparent"
stroke="green"
stroke-width="3"
stroke-dasharray="60 40"
stroke-dashoffset="25"></circle>
</svg>
</li>
</ul>
</div>
推荐答案
将值转换为字符串并使用属性绑定:
Convert the values to a string and use attribute binding:
[attr.stroke-dasharray]="donut.percent + ' ' + (100 - donut.percent)"
有关演示,请参见此stackblitz .
这篇关于Angular/SVG-将数据传递到SVG的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!