我如何将单击事件处理程序附加到HighMaps上的空数据点

How do I attach a click event handler to null data points on HighMaps

本文关键字：HighMaps 数据 单击 程序 事件处理      更新时间：2023-09-26

我已经尝试改变数据(null到一些超出范围的数字)和玩弄colorAxis min和mas和颜色停止，而如果它是一个单一的地图，它不适合我所做的。

我真的需要能够挂代码的点击事件。

感谢https://jsfiddle.net/alex_at_pew/nbz9npyg/5/

$(function () {
    // Instantiate the map
    $('#container').highcharts('Map', {
        plotOptions: {
            map: {
                events: {
                    mouseOver: function (e) {
                        console.log(e);
                    }
                }
            }
        },
        chart : {
            borderWidth : 1
        },
        title : {
            text : 'Nordic countries'
        },
        subtitle : {
            text : 'Demo of drawing all areas in the map, only highlighting partial data'
        },
        legend: {
            enabled: false
        },
        colorAxis: {
            dataClasses: [{
                from: -100,
                to: 1,
                color: '#C40401',
                name: 'pseudonull(1s are the new null)'
            }],
        },
        series : [{
            name: 'Country',
            mapData: Highcharts.maps['custom/europe'],
            data: [
                {
                    code: 'DE',
                    value: 1
                }, {
                    code: 'IS',
                    value: 2
                }, {
                    code: 'NO',
                    value: 2
                }, {
                    code: 'SE',
                    value: 2
                }, {
                    code: 'FI',
                    value: 2
                }, {
                    code: 'DK',
                    value: 2
                }
            ],
            joinBy: ['iso-a2', 'code'],
            dataLabels: {
                enabled: true,
                color: 'white',
                formatter: function () {
                    if (this.point.value > 1) {
                        return this.point.name;
                    } else if(this.point.value == 1) {
                        return 'this is "null"';
                    }
                }
            },
            tooltip: {
                headerFormat: '',
                pointFormat: '{point.name}'
            }
        }]
    });
});

我不太确定你想要实现什么，但根据我的理解，你想要将点击事件附加到具有NULL值的国家。

我在这里创建了这个例子:http://jsfiddle.net/on6v5vhr/

显然，如果一个国家有一个NULL值，它将无法有点击事件，但我所做的是模拟这种行为，所以我经历了这些步骤:

处理你的数据并给所有空值相同的特定值(法国是空的，所以我给它的值-999)

{code: 'FR', value: -999}

仅显示具有值且值不同于-999的国家/地区的数据标签

formatter: function() {
    if (this.point.value && (this.point.value !== -999)) {
        return this.point.name;
    }
}

仅显示与-999值不同的国家/地区的工具提示

tooltip: {
    formatter: function() {
        if (this.point.value !== -999) {
            return this.point.name;
            } else {
                return false;
            }
        }
    }

手动为所有值为-999的国家/地区设置与NULL颜色相同的颜色

colorAxis: {
    dataClasses: [{
        from: -100,
        to: 1,
        color: '#C40401',
        name: 'pseudonull(1s are the new null)'
    }, {
        from: -999,
        to: -999,
        color: 'rgba(0,0,0,0)',
        name: 'No data'
    }],
}
相关文章：