Question

带有（ useHTML：true ）的

自定义tooltip.formatter 可以正确打印一系列具有正确数据的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

Highcharts工具提示-返回不需要的空字符串，导致渲染问题

1 个答案: