Question

我在SVG，Canvas和CSS3中的技能非常有限。我一直试图在角度2创建一个没有运气的圆环图。有一些现成的库可用但我们不允许将第三方库引入项目。可能有人指出我正确的方向或帮助我。基本上我玩SVG但似乎没有＆＃39;电弧＆＃39; SVG中的元素

Answer 1

这可以使用带有stroke-dasharray和stroke-dashoffset的SVG轻松完成。在您的甜甜圈组件中，html包含以下代码： -

  <svg height="100%" width="100%" viewBox="0 0 120 120">       
     <circle  *ngFor="let item of items;let i=index" cx="60" cy="60" r="50" fill="transparent" stroke-width="20"
     [attr.stroke-dasharray]="getPerimeter(50)" [attr.stroke-dashoffset]="getOffset(50,i)" [attr.stroke]="getColor(i)"/>             
  </svg>

圆的基本周边是由2πr确定的，其中r是半径。行程划线偏移将指定新段开始的位置。这可以通过从总周长中减去前一段占用的周长百分比来计算。在您的TS文件中： -

export class DonutComponent{

 items:Array<{name:string,count:number,color:string}>=[
    {name:'Orange',count:50,color:'orange'},
    {name:'Apple',count:25,color:'red'},
    {name:'Pear',count:15,color:'green'}
  ];
 private _total:number =0;
 constructor() {
   if(this.items.length>0)
   {
     this._total = this.items.map(a=>a.count).reduce((x,y)=>x+y);
   }

 }

  getPerimeter(radius:number):number
  {
    return Math.PI*2*radius;
  }

  getColor(index:number):string
  {
    return this.items[index].color;
  }

  getOffset(radius:number,index:number):number
  {   
    var percent=0;
    for(var i=0;i<index;i++)
    {
      percent+=((this.items[i].count)/this._total);
    }
    var perimeter = Math.PI*2*radius;
    return perimeter*percent;
  }
}

如果您想制作甜甜圈通用

，可以将这些项目作为组件的输入

在github中添加了更通用的源代码。

在Angular 2

1 个答案: