角度ng2-chart:想要显示该值以及一个百分比值，该值将来自其他来源，但具有相同的索引

Question

我正在使用ng2图表中的角面团图。

我正在为工具提示进行自定义。就我而言，除了工具提示标签和值之外，还有一个值，那就是百分比。在甜甜圈图上，我正在显示该值，但在悬停时，我想显示该值以及一个百分比值，该值将来自其他来源但具有相同的索引。

为了获取自定义百分比值，我只想调用一个函数(this.someFunction)，但无法这样做。

可能吗？请帮忙。

public doughnutChartOptions: any = {
cutoutPercentage: 55,
responsive: true,
tooltips: {
// Disable the on-canvas tooltip
enabled: true,
callbacks: {
title: function(tooltipItem, data) {
var tooltipLabel = data['labels'][tooltipItem[0]['index']];
if (tooltipLabel !== null) {
return tooltipLabel.toUpperCase();
} else {
return '';
}
},
label: function(tooltipItem, data) {
var allData = data.datasets[tooltipItem.datasetIndex].data;
var tooltipLabel = data.labels[tooltipItem.index];
var tooltipData = allData[tooltipItem.index];
var total_attritions: number = 0;
// tslint:disable-next-line: forin
for (let i in allData) {
total_attritions = total_attritions + Number(allData[i]);
}    
/*let tooltipPercentage = (
(Number(tooltipData) / total_attritions) *
100
).toFixed(2);*/
let tooltipPercentage = this.someFunction(tooltipItem.index); // Is it possible, because every time, I am getting undefined
return [
' Attrition Count : ' + tooltipData,
' Attrition Percentage : ' + tooltipPercentage + '%',
' Total Attritions : ' + total_attritions
];
}
},
titleFontSize: 18
},
legend: {
display: true,
position: 'bottom',
fullWidth: false,
labels: {
padding: 15,
fontSize: 13,
usePointStyle: true,
fontColor: 'rgb(143, 142, 142)',
boxWidth: 10
}
},
plugins: {
datalabels: {
font: {
weight: 'bold',
size: 19
}
}
}
};

这是函数，它将返回自定义值，该值将显示在工具提示悬停中。

public someFunction(index) {
return this.attritionCount[index];
}

Answer 1

你在错误的范围内引用了这个.someFunction。尝试改变

label: function(tooltipItem, data) { 

到箭头功能，它不会改变范围

label: (tooltipItem, data) => {