如何使用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'
}

^{注意:这是需要设置的最小选项以显示标签,您可以在此处找到更多选项.}

看 - 工作实例