当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《Highcharts添加工具提示,其中有一个指向系列的小箭头》经验,为你挑选了1个好方法。

我正在使用以下文档构建一个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 '' +
          '' + this.point.name + ': $ 620 USD
' + '' + this.point.value + ' Transactions'; } }, series:[{ allAreas: true, data: data, mapData: mapsPathData, joinBy: [countryCode], dataLabels: { enabled: false, format: '{point.name}' } }] };

stpoa.. 5

为了在工具提示中添加箭头,您可以进行设置 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 '' +
          '' + this.point.name + ': $ 620 USD
' + '' + this.point.value + ' Transactions'; } } } const chart = Highcharts.mapChart('container', options)

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



1> stpoa..:

为了在工具提示中添加箭头,您可以进行设置 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 '' +
          '' + this.point.name + ': $ 620 USD
' + '' + this.point.value + ' Transactions'; } } } const chart = Highcharts.mapChart('container', options)

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

推荐阅读
LEEstarmmmmm
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有