繁体   English   中英

单击区域时,高图调用JavaScript函数

[英]Highmaps call JavaScript function when region is clicked

我有一个Highmap,大多数情况下都按照我想要的方式工作。 我项目中的以下代码显示了美国县地图,并在鼠标悬停在活动县上时显示了一些数据。

我想添加一个单击事件处理程序,该事件处理程序在地图区域之外(但仍在同一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);

任何建议表示赞赏!

多亏了发布的小提琴链接,我才弄清楚了代码中要做什么。 这是更新的plotOptions:

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

而且CountyClickFunction可以在实际地图之外运行,在地图区域之外显示数据。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM