Javascript 如何为整个系列而不是单个数据启用悬停效果

演示：

如果可能的话，我希望通过

背景色应用悬停，而不是单独突出显示每个状态。这意味着，当鼠标悬停在蓝色状态上时，会影响整个蓝色状态组，当鼠标悬停在绿色状态上时，会影响整个绿色状态组，等等。
这是可能的

我想到的第一件事是将每个序列点的状态设置为
悬停
。
这可以通过使用highcharts的
mouseOver
和
mouseOut
事件轻松实现：

        plotOptions: {
            map: {
              allAreas: false,
              joinBy: ['hc-a2', 'code'],
              mapData: Highcharts.maps['countries/us/us-all']
            },

            series: {
                states:{
                   normal: {
                        animation: false
                    }
                },
                point: {
                    events: {
                        mouseOver: function(){
                          var ser = this.series;
                          var data = ser.data;
                            $.each(data, function(){
                                this.setState("hover")
                            });
                        },
                        mouseOut: function(){
                          var ser = this.series;
                          var data = ser.data;
                            $.each(data, function(){
                                this.setState()
                            });      
                        }
                    }
                }
            }
          },

请注意，这些行：

            states:{
               normal: {
                    animation: false
                }
            },

是否有防止自动应用“取消悬停”的措施

请看一看:

另一方面，您可以设置自己的悬停颜色：
将状态设置为“悬停”

时，highcharts将采用为系列“悬停状态”定义的颜色，例如：

series:{
    .....
    .....
    states:{
      hover:{
         color: 'red'
      }
    }
}

当触发“悬停”状态时，上面将点涂成红色

---

请参见本例中创建的iv'e:

谢谢！我重新编写了这个问题，使它更适用于这个答案，因为原来的帖子有两个问题。非常感谢！