我正在使用以下文档构建一个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/
为了在工具提示中添加箭头,您可以进行设置 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/