Highcharts Tooltip - возвращает ненужную пустую строку, вызывающую проблемы с рендерингом.

Question

custom tooltip.formatter с ( useHTML: true ) правильно печатает серию тегов span с правильными данными, но для каждой точки браузер отображает пустую строку "",который в некоторых старых браузерах Chrome содержит случайный символ (, а не point.symbol ).Как мне избавиться от этого?

Vue.js

export default {
   methods: {
      leftSpan(text) {
         return "<span style='float: left;'>" + text + "</span>"
      },

      rightSpan(text) {
         return "<span style='float: right; font-weight: 600;'>" + text + "</span>"
      },

      tooltipFormatter(options) {
          const { total, x, points, that } = options

          let tooltip = "<span style='display: inline-block; width: 125px;'>"

          tooltip += "<span style='font-size: 12px; font-weight: bold; padding-bottom: 5px; display: inline-block;'>" + x + "</span><br/>"

          points.forEach(point => {
                // EMPTY STRING IS BEING AUTOMATICLY IMPLEMENTED HERE
                tooltip += "<span style='display: inline-block; margin-bottom: 2px; width: 125px;'>"
                tooltip += this.leftSpan(this.translate(point.series.name) + ':') + this.rightSpan(point.y)
                tooltip += "</span><br/>"
          })

          tooltip += "</span>"

          return tooltip
      },
   }
}

Проблема видна в CodeSandbox https://yvxp3r1wv1.codesandbox.io/

Answer 1

У вас есть невидимый маркер в начале строки в функции leftSpan:

"<span style='float: left;'>" + text + "</span>";

Живой пример: https://codesandbox.io/s/842qo5xmp8