Question

如果可能，我希望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
                }
            },

是否可以防止“不徘徊”的aniamtion highcharts自动应用。

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

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

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

当触发状态“悬停”时，上面将以红色着色。

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

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

1 个答案: