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

Question

我已经尝试过更改数据（null 到一些超出范围的数字）并使用 colorAxis min 和 mas 以及 color stops 并且虽然如果它在单个地图上有效，但它不适用于我的情况做.

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

谢谢

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}'
            }
        }]
    });
});

Answer 1

我不太确定您要实现的目标，但据我了解，您希望将点击事件附加到具有 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'
    }],
}

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

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

javascript

jquery

highmaps