угловая диаграмма ng2: хотите отобразить значение, а также одно процентное значение, которое будет получено из другого источника, но с тем же индексом - PullRequest
Новая
       13

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

0 голосов
/ 10 июля 2019

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

1 Ответ

0 голосов
/ 10 июля 2019

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

label: function(tooltipItem, data) {

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

label: (tooltipItem, data) => {
...