html - 在 Angular 2 中创建圆环图

Question

我在 SVG、Canvas 和 CSS3 方面的技能非常有限。我一直在尝试在 Angular 2 中创建一个圆环图，但没有成功。有一些现成可用的库，但我们不允许将第 3 方库引入项目。有人可以指出我正确的方向或帮助我吗。基本上我玩过 SVG，但似乎没有 ' SVG 中的 arc' 元素

Answer 1

使用带有 stroke-dasharray 和 stroke-dashoffset 的 SVG 可以轻松完成此操作。在您的 donut 组件 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;
  }
}

如果你想让 donut 变得通用，可以将这些项目作为组件的输入

在 github 中添加了一个更通用的源代码.