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

Answer 2

'chartjs-plugin-labels'是最受欢迎的显示插件。我刚试过可行！

npm install chartjs-plugin-labels --save

在所需的2+角分量中，添加以下内容：

import 'chartjs-plugin-labels';

无需导入任何模块。

以下是npm信息：
https://www.npmjs.com/package/chartjs-plugin-labels

网站：
https://chartjs-plugin-datalabels.netlify.com/

演示：
https://emn178.github.io/chartjs-plugin-labels/samples/demo/

package.json：有效的组合：

"chart.js": "^2.8.0",
"chartjs-plugin-labels": "^1.1.0",