Angular, SVG - динамически создавать круги в SVG - PullRequest
Новая
       27

Angular, SVG - динамически создавать круги в SVG

0 голосов
/ 20 ноября 2018

Я использовал эту статью для создания круговых диаграмм 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

Теперь мне нужно создать одну круговую диаграмму со всеми сечениями на одной диаграмме.

Можно ли создавать круги в SVG с помощью Angularчто-то вроде. 

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

1 Ответ

0 голосов
/ 20 ноября 2018

Конечно, нарисуйте все круги в одном 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>
...