javascript - Highcharts 添加工具提示，其中有一个指向系列的小箭头

Question

我正在使用此处的文档构建一个 highcharts highmap:http://api.highcharts.com/highmaps/tooltip.style

而且我已经成功地按照我希望的颜色和内容样式设计了我的工具提示..

这是我目前拥有的:

这是我需要的(工具提示上的小箭头或胡萝卜)

通常我会使用 HTML :after 或 :before 和相对定位来创建它，但我对如何在 highcharts 中执行此操作感到困惑。我知道我可以设置 useHtml:true，然后将 css 应用于呈现工具提示的类，但我觉得必须有一种方法可以通过 highcharts 中的 Prop 自动让工具提示执行此操作？

这是我目前拥有的 Highcharts 代码:

let config = {
  tooltip: {
      backgroundColor: '#ff9600',
      borderWidth: 1,
      borderColor: '#ff9600',
      borderRadius: 2,
      formatter: function () {
          return '<b>' +
          '<span style="'+ tooltipStyle + '">' + this.point.name + ': $ 620 USD</span><br>' +
          '<span style="'+ tooltipStyle + '">' + this.point.value + ' Transactions</span>';
      }
  },

  series:[{
    allAreas: true,
    data: data,
    mapData: mapsPathData,
    joinBy: [countryCode],
    dataLabels: {
        enabled: false,
        format: '{point.name}'
    }
  }]

};

Answer 1

为了向您的工具提示添加箭头，您可以设置 followPointer: false

const options = {
  series: [{
    mapData: Highcharts.maps['custom/europe'],
    data: [
      ['is', 1],
      ['no', 1],
      ['se', 1],
      ['dk', 1],
      ['fi', 1]
    ]
  }],
  tooltip: {
    followPointer: false,
      backgroundColor: '#ff9600',
      borderWidth: 1,
      borderColor: '#ff9600',
      borderRadius: 2,
      formatter: function () {
          return '<b>' +
          '<span style="'+ 'tooltipStyle' + '">' + this.point.name + ': $ 620 USD</span><br>' +
          '<span style="'+ 'tooltipStyle' + '">' + this.point.value + ' Transactions</span>';
      }
  }
}

const chart = Highcharts.mapChart('container', options)

实例:https://jsfiddle.net/krg9m2zb/