Highcharts-vue-调用我自己的工具提示标签格式化程序功能 [英] Highcharts-vue - Calling my own tooltip label formatter function

问题描述

我一直在尝试调用自己的函数来格式化Highcharts vue中的工具提示中的x和y轴值. 考虑以下内容；

I have been trying to call my own function for formatting the x and y axis values in a tooltip in Highcharts vue. Consider the following;

data() {
    return {
      currencySymbol: "$",
    };
  },
  computed: {
    chartOptions() {
      var symbol = this.currencySymbol;

      return {
        chart: {
          type: "spline"
        },
        title: {
          text: "Sin chart"
        },
        yAxis: {
          gridLineDashStyle: "Dot",
          labels: {
            style: {
              color: "#000"
            },
            formatter: label => {
              return (
                symbol + Highcharts.Axis.prototype.defaultLabelFormatter.call(label)
              );
            }
          }
        },
        tooltip: {
          formatter: function () {
            return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + 
                this.formatNumber(this.y, this.fractionalDigits, this.locale, this.currencySymbol);
          }                    
        },
        series: [
          {
            data: [10, 0, 8, 2, 6, 4, 5, 5],
            color: "#6fcd98"
          }
        ]
      };
    }
  }

标签工作正常，但工具提示功能调用将无法工作.我尝试将 formatNumber()函数放在 methods()中以及任何Vue挂钩之外.都不起作用. 请注意，此时已经解决了 fractionDigits ， locale 和 currencySymbol . 想知道是否有人可以建议正确的方法吗?

The labels work fine but the tooltip function call will not work. I have tried putting my formatNumber() function in both methods() and outside of any of the Vue hooks. Neither work. Note that fractionDigits, locale and currencySymbol have been resolved at this point. Wondering if someone can advise on the correct approach?

还请注意，当我删除对 formatNumber()函数的调用时，格式化程序将起作用.问题的根源在于缺乏范围.

Also note that the formatter works when I remove the call to my formatNumber() function. It's lack of scope appears to be where the problem lies.

推荐答案

如果我应该假定this.formatNumber，this.fractionDigits，this.locale和this.currencySymbol将引用组件的内部数据，那么问题就出在由于工具提示的格式化程序函数中的this上下文而发生，该上下文实际上并不指示在组件上，而是指示在调用格式化程序的对象上，即

If I should assume that this.formatNumber, this.fractionDigits, this.locale, and this.currencySymbol would be references to a component's internal data, then the problem would occurs because of this context within tooltip's formatter function, which does not actually indicate on the component, but on the object on which the formatter was called, namely the TooltipFormatterContextObject.

为了修复它，您可以在chartOptions计算属性函数的开头保存适当的上下文，并仅在调用组件函数时引用它.请看下面的示例，在该示例中，我放置了名为您的模板"函数，并介绍了该函数的实现方式.

In order to fix it, you can save appropriate context in the beginning of the chartOptions computed property function, and just refer it when calling component functions. Please take a look on the example below, where I've put the 'template' function named like yours, and presented how it could be implemented.

实时示例: https://codesandbox.io/s/highcharts-vue- demo-wqwzu

亲切的问候！

这篇关于Highcharts-vue-调用我自己的工具提示标签格式化程序功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！