工具提示在白色区域以及经纬度地图点 Highmaps 中可见

Question

我正在使用 Highmaps，但在使用 lat-lon positions 绘制的地图点上遇到工具提示问题。

一切都正确，但工具提示出现在离鼠标光标最近的点。这导致即使在地图的白色容器区域也启用了显示工具提示。

当地图上有多个经纬度点时，这会导致问题。

我尝试在该点上使用鼠标悬停和鼠标移出事件，但结果是一样的，检测到的点距离鼠标很远。

Highmaps 经纬度演示中也存在此问题。

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'
            }
        }\]
    }\]
});]

有什么方法可以在鼠标正好位于该点上时显示工具提示。

Answer 1

您正在寻找 stickyTracking.

Sticky tracking of mouse events. When true, the mouseOut event on a series isn't triggered until the mouse moves over another series, or out of the plot area. When false, the mouseOut event on a series is triggered when the mouse leaves the area around the series' graph or markers. This also implies the tooltip when not shared. When stickyTracking is false and tooltip.shared is false, the tooltip will be hidden when moving the mouse between series. Defaults to true for line and area type series, but to false for columns, pies etc.

因此，通过像这样设置 plotOptions，它将被禁用：

plotOptions: {
  mappoint: {
    stickyTracking: false,
  }
}

工作示例： http://jsfiddle.net/ewolden/qgoc1p5z/

工具提示在白色区域以及经纬度地图点 Highmaps 中可见

Tooltip is visible on the whilte area as well in lat-lon mappoint Highmaps

highcharts

highmaps