在使用tooltip call函数时，如何使用Angular提供的locale服务来设置Chart.js中的tooltip标签？

0yg35tkg 于 2023-05-17 发布在 Chart.js

关注(0)|答案(1)|浏览(162)

const config: any = {
      type: 'bar',
      data: {
        localNumberPipe : this.localNumberPipe,
        labels: this.labels,
        datasets: [{
          minBarLength: 5,
          maxBarThickness: 50,
          label: 'Waterfall Chart',
          elements: {
            bar: {
              backgroundColor: this.color,
              borderColor: this.color,
            }
          },
          data: this.data,
          borderWidth: 1,
          borderSkipped: false
        }]
      },
      options: {
        maintainAspectRatio: false,
        plugins: {
          tooltip: {
            callbacks: {
              context: {
                _this: this,
              },
              label: function (context) {
                var bar = JSON.parse(context.formattedValue);
                var label = [];
                if (bar) {
                  var l=  this.locale;
                  const diff = Number.parseFloat(bar[1]) - Number.parseFloat(bar[0]);
                  label.push('Difference: ' + formatNumber(diff, 'en-US', '1.0-0'));
                  label.push('Start: ' + formatNumber(bar[0], 'en-US', '1.0-0'));
                  label.push('End: ' + formatNumber(bar[1], 'en-US', '1.0-0'));
                }
                return label;
              }
            }
          }
        },
        scales: {
          y: {
            beginAtZero: true
          }
        }
      },
      plugins: [connectorLines]
    };

在构造函数中，我有这样的代码，我在本地得到'an-US'

constructor(private localeService: LocaleService) {
    this.localNumberPipe = new LocalNumberPipe(localeService);
    Chart.register(...registerables);
     **this.locale** = this.localeService.locale ;
    console.log(this.locale);
  }

但是如果我试图在工具提示回调函数中访问这个.locale，它会返回undefine。是不是跟这个范围有关？如果是这样，有没有办法在图表配置中添加locale作为一个属性，这样我就可以在工具提示回调函数中访问它。
在开发者控制台this返回工具提示详情。

label: function (context) {
                var bar = JSON.parse(context.formattedValue);
                debugger /// execute this at this stage

感谢您的支持！

chart.js

来源：https://stackoverflow.com/questions/76233483/how-can-i-use-the-locale-service-provided-by-angular-to-set-the-tooltip-label-in

1条答案

按热度按时间

ki0zmccv1#

如果您确信this是创建config对象时的应用程序，那么您可以使用

tooltip: {
    callbacks: {
        label: (function(){
            const _this = this;
            return function(context){ // use _this.locale here
                var bar = JSON.parse(context.formattedValue);
                var label = [];
                if(bar){
                    var l = _this.locale;
                    const diff = Number.parseFloat(bar[1]) - Number.parseFloat(bar[0]);
                    label.push('Difference: ' + formatNumber(diff, 'en-US', '1.0-0'));
                    label.push('Start: ' + formatNumber(bar[0], 'en-US', '1.0-0'));
                    label.push('End: ' + formatNumber(bar[1], 'en-US', '1.0-0'));
                }
                return label;
            };
        })()
    }
}

或者你甚至可以将函数绑定到外部的this，只要你不习惯这个方法，因为一般来说 * 在将方法绑定到外部对象时必须非常小心 *：

tooltip: {
        callbacks: {
            label: function(context){
            //......... // use this.locale
            }.bind(this) // better avoid this
        }
    }

第三种选择是使用箭头函数，它从外部作用域继承this：

tooltip: {
        callbacks: {
            label: (context) => {
                //......... // use this.locale
                return label;
            }
        }
    }

赞(0）回复(0）举报 2023-05-17

我来回答

在使用tooltip call函数时，如何使用Angular提供的locale服务来设置Chart.js中的tooltip标签？

1条答案

相关问题

热门标签

最新问答