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

Question

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

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

Answer 1

有可能的。

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

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

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

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

当触发状态“悬停”时，上述内容会将点着色为红色。

在这个例子中看到我创建的：http: //jsfiddle.net/uwh7Lgyo/5/