当悬停国家/地区没有可用数据时，Highmaps 中的自定义光标

Question

我使用 Highcharts 和 Highmaps 来显示国家信息。我的世界地图初始化如下：

data.series[0].data = {...}; // array with 135 entries     
data.series[0].mapData = Highcharts.maps['custom/world']; // world map with 213 countries
data.series[0].point.events.click = function(){ //do something };

一切正常，显示了数据并且 onClick 处理程序也在工作。为了向用户显示国家/地区是可点击的，我将光标设置为手形图标：

data.plotOptions.series.cursor = "pointer";

现在是问题。有时我没有所有国家的数据，所以 "empty" 个国家不可点击。当我点击国家时，Highmaps 不会触发事件，但我也想覆盖这些国家的光标。

如果给定点不存在值，如何设置自定义光标？

Highcharts v4.2.5

Answer 1

您可以使用

plotOptions.series.point.events.mouseOver 事件

和

plotOptions.series.point.events.mouseOut 事件。

plotOptions: {
         series: {
             point: {
                events: {
                    mouseOver: function () {

                        $("#container").addClass("cursor");
                    },
                    mouseOut: function () {

                        $("#container").removeClass("cursor");
                    }
                }
            },
         }
}

通过这样做，没有任何价值的区域不会触发事件。你还应该删除 plotOptions.series.cursor = "pointer";

A Working Sample On Fiddle

当悬停国家/地区没有可用数据时，Highmaps 中的自定义光标

Custom Cursor in Highmaps when no data is available for hovered country

javascript

css

highcharts

highmaps