如何将数据标签添加到ng2图表的角度

Question

你好，我想在我的图表中使用数据标签Angular项目的ng2图表选项：

根据文档，我添加了这样的配置对象：

@ViewChild(BaseChartDirective) chart: BaseChartDirective | undefined
public pieChartOptions: ChartConfiguration['options'] = {
responsive: true,
plugins: {
legend: {
display: true,
position: 'top',
},
datalabels: {
formatter: (value, ctx) => {
if (ctx.chart.data.labels) {
return ctx.chart.data.labels[ctx.dataIndex];
}
},
},
}
};

在模板中：

<canvas baseChart
[plugins]="pieChartPlugins"
[data]="pieChartData"
[type]="pieChartType"
[options]="pieChartOptions"
>
</canvas>

https://valor-software.com/ng2-charts/#PieChart

我得到的错误是：

键入"｛legend:｛display:true；position:"top"｝；数据标签：｛formatter:(value:any，ctx:any(=>any；｝；｝'不可分配给类型"_DepPartialObject<插件选项ByType>'。对象文字只能指定已知属性，并且类型"_DepPartialObject<"中不存在"datalabels"；插件选项ByType>'。ts(2322(

我正在使用：

"chart.js"："3.3.2"；，"chartjs-plugin-datalabels"："1.0.0"；，"ng2图表"："3.0.0〃；，

和角度：

"角度/cdk"："12.1.0"；，"角/公共"："12.1.0"；，"angular/compiler"："12.1.0"；，

Answer 1

为了正确使用它，您应该将插件添加到图表中：

在HTML中，将以下内容添加到画布中：

[plugins]="pieChartPlugins"

在你的Typescript导入和定义你的插件数组：

import DatalabelsPlugin from 'chartjs-plugin-datalabels';
...

public pieChartPlugins = [ DatalabelsPlugin ];