HighMaps分组悬停

时间:2015-08-13 14:38:16

标签: javascript highcharts highmaps

目标:在下面的演示中,如果您将鼠标悬停在右上角状态,您会看到它们都被命名为#34; Intermountain"。我需要他们在悬停时突出显示,文档并没有真正提供有关如何执行此操作的详细信息。

我尝试使用

             states: {
                    hover: {
                        enabled: true
                    }
                },

但它不能满足我的需要。

演示: http://jsfiddle.net/TUy7x/781/

$(function () {

    // Initiate the chart
    $('#container').highcharts('Map', {

        series: [{
            "type": "map",

            states: {
                hover: {
                    enabled: true
                }
            },
                "data": //more than highchart character limits
    });
});

1 个答案:

答案 0 :(得分:1)

您可以捕获mouseOver / mouseOut,然后找到所有具有相同名称的点。

series:{
            point:{
                events:{
                    mouseOver:function(){

                        var series = this.series,
                            name = this.name;

                        $.each(series.data, function(i, data){
                            if(data.name === name) {
                                data.setState('hover');
                            }
                        });
                    },
                    mouseOut:function(){
                        var series = this.series,
                            name = this.name;

                        $.each(series.data, function(i, data){
                            if(data.name === name) {
                                data.setState('');
                            }
                        });
                    }
                }
            }
        }

示例:http://jsfiddle.net/TUy7x/782/