Comment afficher les étiquettes dans un graphique en anneau à l'aide de graphiques ng2?

Question

J'utilise le graphique ng2 donut pour afficher certains articles, tout fonctionne bien selon la documentation graphique de beignet mais la chose que je dois changer est, l'affichage de l'étiquette de chaque tranches vient uniquement en vol stationnaire mais la chose dont j'ai besoin est devrait être en défaut dans chaque tranche.

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

La chose que je suis dans le besoin est exactement comme comme dans l'image,

Les étiquettes doivent être en défaut dans chaque tranche et la chose doit être réalisé uniquement en utilisant du type dactylographié pur et pas de javascript. Veuillez m'aider à atteindre le résultat souhaité.

Answer 1

Vous pouvez y parvenir en utilisant un plugin Chart.js appelé - Chart.PieceLabel.js.

premier .. installer via NPM:

npm install chart.piecelabel.js --save 

alors .. importer dans votre composant de tableau de bord:

import 'chart.piecelabel.js'; 

et enfin .. définir l'option suivante dans votre thème 's options config:

pieceLabel: { 
    render: 'label' 
} 

^{Note: c'est l'option minimale doit être réglée pour afficher les étiquettes, et vous pouvez trouver plus d'options here.}

voir - working example