如何使用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"] }];

我所需要的东西和图像中的完全一样，

​

​

标签应该在每个切片中都是默认的，并且只需要使用纯typescript而不是javascript来实现。请帮助我达到预期的效果。

Answer 1

‘’chartjs plugin -labels‘是最流行的显示插件。我刚试过了。它起作用了!

npm install chartjs-plugin-labels --save

在所需的angular 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",