角度2でドーナツチャートを作成する

Question

私はSVG、Canvas、CSS3のスキルが非常に限られています。私は運がない角度2でドーナツチャートを作成しようとしています。利用可能なライブラリがいくつか用意されていますが、私たちはサードパーティーのライブラリをプロジェクトに取り込むことはできません。誰かが正しい方向で私を指し示すことができるか、それを手伝ってもらえますか？私はSVGで遊んでいましたが、 SVGの円弧要素

Answer 1

これは、ストロークダッシュアレイとストロークダッシュオフセット付きのSVGを使用すると簡単に行うことができます。 rは半径である2πRによって決定される円の

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

基本的perimiter - ：あなたのドーナツ成分HTMLで次のコードを含みます。

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

項目 - ：どのようなポイントで指定しますオフセットストロークダッシュは新しいセグメントのstart.Thisは、あなたのTSファイルperimeter.In合計から、前のセグメントによって占められる周囲長の割合を差し引いて計算することができなければなりませんドーナツを汎用化する場合は、コンポーネントへの入力として作成することができます

githubに一般的なソースコードを追加しました。