我正在使用Highmaps,并陷入了用纬度位置绘制的地图点的工具提示问题。
一切都是正确的,但是工具提示是针对最接近鼠标光标的点。这会导致即使在地图的白色容器区域上也能启用显示工具提示。
当地图上有多个纬度点时,这会导致问题。
我尝试在该点上使用鼠标悬停和鼠标退出事件,但结果是相同的,从鼠标非常远处检测到点。
这个问题在Highmaps lat-lon演示中也可见。
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/mappoint-latlon/
[<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/gb/gb-all.js"></script>
<div id="container"></div>
// Initiate the chart
Highcharts.mapChart('container', {
chart: {
map: 'countries/gb/gb-all'
},
title: {
text: 'Highmaps basic lat/lon demo'
},
mapNavigation: {
enabled: true
},
tooltip: {
headerFormat: '',
pointFormat: '<b>{point.name}</b><br>Lat: {point.lat}, Lon: {point.lon}'
},
series: [{
// Use the gb-all map with no data as a basemap
name: 'Basemap',
borderColor: '#A0A0A0',
nullColor: 'rgba(200, 200, 200, 0.3)',
showInLegend: false
}, {
name: 'Separators',
type: 'mapline',
nullColor: '#707070',
showInLegend: false,
enableMouseTracking: false
}, {
// Specify points using lat/lon
type: 'mappoint',
name: 'Cities',
color: Highcharts.getOptions().colors[1],
data: [{
name: 'London',
lat: 51.507222,
lon: -0.1275
}, {
name: 'Birmingham',
lat: 52.483056,
lon: -1.893611
}, {
name: 'Leeds',
lat: 53.799722,
lon: -1.549167
}, {
name: 'Glasgow',
lat: 55.858,
lon: -4.259
}, {
name: 'Sheffield',
lat: 53.383611,
lon: -1.466944
}, {
name: 'Liverpool',
lat: 53.4,
lon: -3
}, {
name: 'Bristol',
lat: 51.45,
lon: -2.583333
}, {
name: 'Belfast',
lat: 54.597,
lon: -5.93
}, {
name: 'Lerwick',
lat: 60.155,
lon: -1.145,
dataLabels: {
align: 'left',
x: 5,
verticalAlign: 'middle'
}
}]
}]
});]
当鼠标正好出现在点上时,有没有办法显示工具提示。
您正在寻找stickyTracking
.
鼠标事件的粘性跟踪。如果为 true,则在鼠标移到另一个序列上或移出绘图区域之前,不会触发序列上的 mouseOut 事件。如果为 false,则当鼠标离开序列图形或标记周围的区域时,将触发序列上的 mouseOut 事件。这也意味着未共享时的工具提示。当粘滞跟踪为假且工具提示共享为假时,在系列之间移动鼠标时,工具提示将被隐藏。对于线和面类型系列,默认为 true,但对于列、饼图等,默认为 false。
因此,通过像这样设置plot选项,它将被禁用:
plotOptions: {
mappoint: {
stickyTracking: false,
}
}
工作示例:http://jsfiddle.net/ewolden/qgoc1p5z/