ng2グラフを使用してドーナツチャートにラベルを表示するにはどうすればいいですか？

Question

私はいくつかの項目を表示するためにng2のドーナツチャートを使用していますが、ドーナツチャートのドキュメンテーションごとにうまく動作しますが、変更する必要があるのは、各スライスのラベルの表示はホバーだけですが、各スライスでデフォルトにする必要があります。

Dashboard.component.html：

<canvas #mycanvas baseChart 
    [data]="doughnutChartData" 
    [labels]="doughnutChartLabels" 
    [chartType]="doughnutChartType" 
    [colors]="colors" 
    [options]="options" 
    (chartHover)="chartHovered($event)" 
    (chartClick)="chartClicked($event)"> 
</canvas> 

Dashboard.component.ts：

public doughnutChartLabels:string[] = ['Running', 'Stop', 'Idle']; 
public doughnutChartData:number[] = [1, 4, 5]; 
public doughnutChartType:string = 'doughnut'; 
public colors: any[] = [{ backgroundColor: ["#008000", "#FF0000", "#FFA500"] }]; 

私が必要としています事は、正確に画像のようにようである

ラベルは、各スライスとその物のデフォルトにする必要があります純粋なタイスクリプトとjavascriptを使用することによってのみ達成する必要があります。希望の結果を達成するのを助けてください。

Answer 1

- Chart.PieceLabel.jsというChart.jsプラグインを使用すると、それを達成できます。

最初..はNPM経由でインストールします。その後、

npm install chart.piecelabel.js --save 

...インポート、それを自分のダッシュボードコンポーネントに：

import 'chart.piecelabel.js'; 

とは最後に...は、次のオプションを設定しますあなたのチャートののオプションの設定：

pieceLabel: { 
    render: 'label' 
} 

^{注：これは最低限のオプションは、ラベルを表示するように設定する必要があり 、あなたがより多くのオプションhereを見つけることができます。}

う - working example