Highcharts-vue - вызов собственной функции форматирования меток всплывающей подсказки

Question

Я пытался вызвать свою собственную функцию для форматирования значений осей x и y во всплывающей подсказке в Highcharts vue.Обратите внимание на следующее:

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 () в оба метода () и вне любого из обработчиков Vue.Ни одна из них не работает.Обратите внимание, что дробные цифры , языковой стандарт и currencySymbol были разрешены на данный момент.Хотите знать, если кто-то может посоветовать правильный подход?

Также обратите внимание, что форматтер работает, когда я удаляю вызов моей функции formatNumber () .Похоже, проблема заключается в отсутствии возможностей.

Answer 1

Если предположить, что this.formatNumber, this.fractionDigits, this.locale и this.currencySymbol будут ссылками на внутренние данные компонента, тогда проблема возникнет из-за контекста this в функции форматирования всплывающей подсказки, котораяфактически указывает не на компонент, а на объект, для которого был вызван форматтер, а именно TooltipFormatterContextObject .

Чтобы исправить это, вы можете сохранить соответствующий контекст в началеchartOptions вычисляемая функция свойства, и просто обращайтесь к ней при вызове компонентных функций.Пожалуйста, посмотрите на пример ниже, где я поместил функцию 'template', названную так же, как ваша, и представил, как ее можно реализовать.

Живой пример: https://codesandbox.io/s/highcharts-vue-demo-wqwzu

ВидС уважением!

Answer 2

Не уверен, что это наиболее элегантно, но я нашел решение этой проблемы для себя.

Я создал утилиту js-файл с именем helper.js , добавил свою экспортированную функцию (яв любом случае понадобится в других местах) и поместит его в каталог с именем utils .

Содержимое выглядит следующим образом:

export function formatNumber(number, maxFractionDigits, locale, currencySymbol) {
     // function logic here
}

Затем я импортировал его в свой компонент и просто вызвал метод следующим образом:

 import {formatNumber} from "../../utils/helper";
    export default {
     data() {
       return {
         currencySymbol: "$",
       };
     },
    computed: {
      chartOptions() {
        var symbol = this.currencySymbol;

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