Highmaps在单击区域时调用JavaScript函数

Question

我有一个Highmaps，大部分都是按照我想要的方式工作的。我的项目中的以下代码显示美国县地图，并在鼠标悬停在活动县上时显示一些数据。

我想添加一个单击事件处理程序，该处理程序在映射区域之外(但仍在相同的HTML页面上(调用jQuery函数。当用户单击某个县(将鼠标悬停在县上后(时，应调用该函数，并且应通过函数调用将悬停状态中的相同工具提示信息放入外部div。下面是我正在使用的代码。

我

在网上看过许多Highmaps和Highcharts问题，展示了如何做类似的事情，但是当我尝试集成代码示例时，我最终会遇到一个空地图或其他一些问题(可能是语法问题(。以下是有效的方法：

        var tableResult = "[]";
        data = JSON.parse(tableResult);
        var countiesMap = Highcharts.geojson(Highcharts.maps["countries/us/us-all-all"]);
        var lines = Highcharts.geojson(Highcharts.maps["countries/us/us-all-all"], "mapline");
        var options = {
            chart: {
                borderWidth: 1,
                marginRight: 50 // for the legend
            },
            exporting: {
                enabled: false
            },
            mapNavigation: {
                enabled: false
            },
            plotOptions: {
                mapline: {
                    showInLegend: false,
                    enableMouseTracking: false
                }
            },
            series: [{
                mapData: countiesMap,
                data: data,
                joinBy: ["hc-key", "code"],
                borderWidth: 1,
                states: {
                    hover: {
                        color: "#331900"
                    }
                }
            }, {
                type: "mapline",
                name: "State borders",
                data: [lines[0]],
                color: "black"
            }]
        };
        // Instanciate the map
        $("#map-container").highcharts("Map", options);

任何建议不胜感激！

Answer 1

多亏了发布的小提琴链接，我才弄清楚在代码中该做什么。以下是更新的绘图选项：

plotOptions: {
    series: {
        point: {
            events: {
                click: function () {
                    countyClickFunction(this.name,this.value);
                }
            }
        }
    },
    mapline: {
        showInLegend: false,
        enableMouseTracking: false
    }
},

并且 countyClickFunction 可以在实际地图之外运行，在地图区域之外显示数据。