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

Question

演示： http://jsfiddle.net/uwh7Lgyo/

如果可能的话，我希望悬停由background-color应用，而不是单独突出显示每个状态。这意味着，悬停在蓝色状态上时会影响整个蓝色状态组，当悬停在绿色状态上时，悬停会影响整组绿色状态，依此类推。

Answer 1

这是可能的。

我想到的第一件事是将每个系列点的状态设置为 hover .这可以通过使用 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
                }
            },

是为了防止自动应用"取消悬停"的动画高图。

请看一看：http://jsfiddle.net/uwh7Lgyo/6/

另一方面，您可以设置自己的悬停颜色：将状态设置为 hover 时，高图表将采用为序列悬停状态定义的颜色，例如：

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

当状态"悬停"被触发时，上面会将该点着色为红色。

请参阅此示例中的 iv'e 创建：http://jsfiddle.net/uwh7Lgyo/5/