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

Question

我正在使用来自 ng2-chart 的 angular 甜甜圈图表。

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

为了得到自定义的百分比值，我只想调用一个函数(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
        }
      }
    }
  };

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

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

Answer 1

您在错误的范围内引用了 this.someFunction。尝试改变

label: function(tooltipItem, data) {

箭头函数，它不会改变作用域

label: (tooltipItem, data) => {

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

angular ng2-chart :want to display the value as well as one percentage value, which will come from other source but with the same index

ng2-charts

angular