angular ng2-chart: хотите отобразить значение, а также одно процентное значение, которое будет поступать из другого источника, но с тем же индексом

Я использую диаграмму угловых орехов из 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];
      }

person Biplob    schedule 10.07.2019    source источник


Ответы (1)


Вы ссылаетесь на this.someFunction внутри неправильной области. Попробуйте изменить

label: function(tooltipItem, data) { 

для функции стрелки, это не меняет область действия

label: (tooltipItem, data) => {
person Michał Tkaczyk    schedule 10.07.2019