在Angular 2中创建一个圆环图

Question

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

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中添加了更通用的源代码.