Я использую диаграмму угловых орехов из ng2-chart.
Я делаю настройку для всплывающей подсказки. В моем случае, помимо метки всплывающей подсказки и значения, есть еще одно значение, и это процент. На кольцевой диаграмме я показываю значение, но при наведении я хочу отобразить значение, а также одно процентное значение, которое будет получено из другого источника, но с тем же индексом.
Чтобы получить пользовательское процентное значение, я просто хочу вызвать функцию (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];
}