Question

我正在使用以下文档构建一个highcharts highmap：http://api.highcharts.com/highmaps/tooltip.style

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

以下是我目前的情况：

这就是我需要的东西（工具提示上的小箭头或胡萝卜）

通常我会通过使用HTML来创建它：after或：before和relative locate但是我很难知道如何在highcharts中执行此操作。我知道我可以设置useHtml：true然后将css应用于渲染工具提示的类，但我觉得必须有一种方法可以自动让工具提示通过highcharts中的prop进行此操作？

以下是我目前用于高图的代码：

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/

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

1 个答案: