angular - Angular, svg - 在 svg 中动态创建圆圈
问题描述
我一直在使用这篇文章来创建一个 svg 饼图
https://medium.com/@heyoka/scratch-made-svg-donut-pie-charts-in-html5-2c587e935d72
我在这里有一个 exmapke 使用角度从一个数据数组创建 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>
推荐阅读
- python - 如何在子行中搜索特定单词。如果找到匹配,则返回父子行
- php - 如何使用 ubuntu 为 php7.4 安装 gd lib
- laravel - 在 laravel 8 的第 4 行(“日期:2021-06-27”附近)的未引用映射值中不能使用冒号
- performance - 时间的表现.Ticker
- python - 使用 DataFrame 我想添加一个将写入 Field1、Field2 的列...(包含与 index-1 一样多的行)
- eclipse - 使用命令行在eclipse中自动导入调试配置
- kubernetes - container_memory_rss 与使用的节点内存的关系
- javascript - 你能在 Angular 中对作为 @Input 传递的函数进行 curry
- gradle - 多模块 gradle 项目 - 将子项目分组在父项下
- sql - 在复制设置中禁用分发时出错