如何使用ng2圖表在環形圖中顯示標籤？

我正在使用ng2的圓環圖來顯示一些項目，它的所有工作都很好，但是我需要改變的是，每個切片的標籤顯示只在懸停時顯示，但我需要的是它應該在每個切片中默認。如何使用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就可以實現。請幫助我達到預期的效果。

來源

2017-10-10 Mani Raj

參考chart.js之文檔[傳奇配置]（http://www.chartjs.org/docs/latest/configuration/legend.html#example），你可以使用輸入'[options] =「options」'來傳遞上面鏈接的相同選項 – JoxieMedina

您可以通過使用名爲 - Chart.PieceLabel.js的Chart.js插件來實現此目的。

第一..通過NPM安裝：

npm install chart.piecelabel.js --save

然後..進口它在你的儀表板組件：

import 'chart.piecelabel.js';

和終於..設置下列選項在你的圖表的選項配置：

pieceLabel: { 
    render: 'label' 
}

^{注：這是最低的選擇需要設置顯示標籤，，你可以找到更多的選擇here。}

看到的 - working example

來源

2017-10-10 06:51:31

沒有包含任何插件的選項嗎？ –

不幸的是.. **沒有** ..還沒有 –

Omg，包括插件不斷增加應用程序的大小。 –

如何使用ng2圖表在環形圖中顯示標籤？

回答

相關問題