Question

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

我想添加一个click事件处理程序，它在地图区域外调用jQuery函数（但仍然在同一个HTML页面上）。当用户点击一个县（在将其悬停在其上之后）时，应该调用该函数，并且应该通过函数调用将来自悬停状态的相同工具提示信息放入外部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：

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

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

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

1 个答案: