Angular / SVG - передать данные в SVG - PullRequest
Новая
       18

Angular / SVG - передать данные в SVG

0 голосов
/ 08 октября 2018

У меня есть стекблиц здесь - https://stackblitz.com/edit/angular-vkwets?file=src%2Fapp%2Fdonuts.template.html

У меня есть угловой компонент, который создает кольцевую диаграмму svg для каждой точки данных массива, переданного компоненту.

Я могу получить доступданные передаются в компонент, но возможно ли использовать это в svg.

Я хотел бы обновить 'stroke-dasharray' в svg, используя данные, переданные компоненту.

что-то вроде 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>

1 Ответ

0 голосов
/ 08 октября 2018

Преобразуйте значения в строку и используйте привязку атрибута : 

[attr.stroke-dasharray]="donut.percent + ' ' + (100 - donut.percent)"

См. этот стек для демонстрации.

...